CODEWITHSUNDEEP
jqueryjquery-bootgrid
Gabriel
Gabriel

Reputation: 11

troubles with bootgrid ("append") and formatters

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

.

$.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);
  }
})

Upvotes: 1

Views: 2161

Answers (1)

vinodh
vinodh

Reputation: 724

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>[email protected]</td>
      <td>14.10.201332</td>
    </tr>
    <tr>
      <td>102381</td>
      <td>[email protected]</td>
      <td>14.10.20135</td>
    </tr>
    <tr>
      <td>1023823</td>
      <td>[email protected]</td>
      <td>14.10.20134</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions