1

i'm trying a grid with jquery.bootgrid, but i can't generate command buttons...

  • At first, i get data with a webmethod... no problem.
  • Then i use the "append" method, fine.
  • But, when apply "formatters" don´t works

.

$.ajax({
  url: url,
  type: 'POST',
  dataType: "json",
  contentType: "application/json; charset=utf-8",
  data: JSON.stringify({ 'idPO': 1}),
  success: function (result) {
  if (result.d != null) {
    $("#grid-data").bootgrid({
       caseSensitive: false,
       selection: true,
       formatters: {
          "commands": function () {
             return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + id + "\"><span class=\"fa fa-pencil\"></span></button> ";
             }
        }
     }).bootgrid("append", result.d);
  }
})
Gabriel
  • 11
  • 3

1 Answers1

1

Problem On your code

  1. You din't load the id in function. As understanding you have to view the formatter in your View as button.

HTML

you should add the data-formatter inside the th tag.

 <th data-column-id="commands" data-formatter="commands">Commands </th>

JavaScript

you should load the json or id Values. I have added the Working Snippet for your question. Look into the script and Html, forget about dependency CSS :). 

$("#grid-data").bootgrid({
  formatters: {
    "commands": function(column, row) {
      return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> ";

    }
  }
});
.bootgrid-header,
.bootgrid-footer {
  margin: 15px 0;
}
.bootgrid-header a,
.bootgrid-footer a {
  outline: 0;
}
.bootgrid-header .search,
.bootgrid-footer .search {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: middle;
  width: 180px;
}
.bootgrid-header .search .glyphicon,
.bootgrid-footer .search .glyphicon {
  top: 0;
}
.bootgrid-header .search.search-field::-ms-clear,
.bootgrid-footer .search.search-field::-ms-clear,
.bootgrid-header .search .search-field::-ms-clear,
.bootgrid-footer .search .search-field::-ms-clear {
  display: none;
}
.bootgrid-header .pagination,
.bootgrid-footer .pagination {
  margin: 0 !important;
}
.bootgrid-header .actionBar,
.bootgrid-footer .infoBar {
  text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
  text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 3px 20px;
  white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox {
  margin: 0 2px 4px 0;
  vertical-align: middle;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled {
  cursor: not-allowed;
}
.bootgrid-table {
  table-layout: fixed;
}
.bootgrid-table a {
  outline: 0;
}
.bootgrid-table th > .column-header-anchor {
  color: #333;
  cursor: not-allowed;
  display: block;
  position: relative;
  text-decoration: none;
}
.bootgrid-table th > .column-header-anchor.sortable {
  cursor: pointer;
}
.bootgrid-table th > .column-header-anchor > .text {
  display: block;
  margin: 0 16px 0 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table th > .column-header-anchor > .icon {
  display: block;
  position: absolute;
  right: 0;
  top: 2px;
}
.bootgrid-table th:hover,
.bootgrid-table th:active {
  background: #fafafa;
}
.bootgrid-table td {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table td.loading,
.bootgrid-table td.no-results {
  background: #fff;
  text-align: center;
}
.bootgrid-table th.select-cell,
.bootgrid-table td.select-cell {
  text-align: center;
  width: 30px;
}
.bootgrid-table th.select-cell .select-box,
.bootgrid-table td.select-cell .select-box {
  margin: 0;
  outline: 0;
}
.table-responsive .bootgrid-table {
  table-layout: inherit !important;
}
.table-responsive .bootgrid-table th > .column-header-anchor > .text {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}
.table-responsive .bootgrid-table td {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}
@font-face {
  font-family: FontAwesome;
  src: url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-pencil:before {
  content: "\f040";
}
.fa-trash-o:before {
  content: "\f014";
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.scic.com/files/eddie/jquery.bootgrid.js"></script>
<table id="grid-data" data-toggle="bootgrid" columnSelection="true" class="table table-condensed table-hover table-striped">
  <thead>
    <tr>
      <th data-column-id="id" data-type="numeric">ID</th>
      <th data-column-id="sender">Sender</th>
      <th data-column-id="received" data-order="desc">Received</th>
      <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10238</td>
      <td>eduardo@pingpong.com</td>
      <td>14.10.201332</td>
    </tr>
    <tr>
      <td>102381</td>
      <td>eduardo1@pingpong.com</td>
      <td>14.10.20135</td>
    </tr>
    <tr>
      <td>1023823</td>
      <td>eduardo2@pingpong.com</td>
      <td>14.10.20134</td>
    </tr>
  </tbody>
</table>
vinodh
  • 714
  • 1
  • 7
  • 20