JavaScript Grid

Invoke the updatebounddata method of the jqxGrid. Author: http://jqwidgets.com

by Manu Vashishtha

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">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="frmFind" style="display:none; width:200px;border:1px solid #CCC;padding:20px" >
<label id="lbl" style="color:red;" ></label>

<div id="jqxDropDownList"></div>
<div id="jqxDropDownListMatch"></div>
 <input type="text" id="txtFind" placeholder="Enter search value..."/>   
 <input type="button" id="btnFind" value="Find"/>
</div>

<div id='jqxWidget'>
 <button id="selectRowByValue">
      Search</button>
    <div id="jqxgrid"></div>
</div>

JavaScript

var prevouseIndex= -3;
function BindSearchTypeCombo(){
  var source = [
      "Start of the field",
      "Whole field",
      "Any part of the field"
      ];
  // Create a jqxDropDownList
  $("#jqxDropDownListMatch").jqxDropDownList({
      source: source,
      selectedIndex: 0,
      theme: 'energyblue'
});


$('#jqxDropDownListMatch').on('change', function (event)
{ 
prevouseIndex= -3;
$('#lbl').html("");
});

}
BindSearchTypeCombo();

var source = [
      "firstname",
      "lastname",
      "productname",
      "date",
      "quantity",
      "price"];
  // Create a jqxDropDownList
  $("#jqxDropDownList").jqxDropDownList({
      source: source,
    //  selectedIndex: 0,
      theme: 'energyblue'
});

$('#jqxDropDownList').on('change', function (event)
{ 
prevouseIndex=-3;
$('#lbl').html("");
});

var data = generatedata(50);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);

 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'singlerow',
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
        ...