JQuery Grid

Set the rendertoolbar property of the jqxGrid. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxgrid"></div>

JavaScript

var source = {
          datatype: "jsonp",
          datafields: [{
              name: 'countryName'
          }, {
              name: 'name'
          }, {
              name: 'population',
              type: 'float'
          }, {
              name: 'continentCode'
          }, {
              name: 'adminName1'
          }],
          async: false,
          url: "http://api.geonames.org/searchJSON",
          data: {
              featureClass: "P",
              style: "full",
              maxRows: 20,
              username: "jqwidgets"
          }
      };
      var dataAdapter = new $.jqx.dataAdapter(source, {
          formatData: function (data) {
              data.name_startsWith = $("#searchField").val();
              return data;
          }
      });
      $("#jqxgrid").jqxGrid({
          width: 500,
          height: 300,
          theme: 'energyblue',
          source: dataAdapter,
          columns: [{
              text: 'City',
              datafield: 'name',
              width: 170
          }, {
              text: 'Country Name',
              datafield: 'countryName',
              width: 200
          }, {
              text: 'Population',
              datafield: 'population',
              cellsformat: 'f',
              width: 170
          }, {
              text: 'Continent Code',
              datafield: 'continentCode',
              minwidth: 110
          }],
          showtoolbar: true,
          rendertoolbar: function (toolbar) {
              var me = this;
              var container = $("<div style='margin: 5px;'></div>");
              var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
              var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
              toolbar.append(container);
              container.append(span);
             ...