jQWidgets Forums

jQuery UI Widgets Forums Grid How to implement single search for all the columns of grid.

This topic contains 10 replies, has 2 voices, and was last updated by  Apeksha Singh 12 years ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author

  • Apeksha Singh
    Participant

    Hi,

    Is it possible to have only one search box for all the columns of a grid.
    I am adding my code below , where I have a search jqxinput filed and a jqxtab which contain 5 different grids.I want to implement search for all the grids.

    <pre style='width: 700px; max-width: 700px; margin: 10px;' class='code'>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">".search"</span>).jqxInput({width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'100px',height: '20px',theme: 'ui-start',scrollPosition: 'left'</span>});<div/> /*START :Function to display grid for all account*/<div/> var all_initGrid = function () {<div/> gridid = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#all_invoicetable"</span>;//update gridid…<div/> var source =<div/> {<div/> datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/> localdata: all_invoice_data,<div/> datafields:<div/> [<div/> <div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'number', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'reference', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_name', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due_date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'paid', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_status', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction_type_id', type: 'number'</span> },<div/> ],<div/> };<div/> var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Error loading <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"' + source.url + '"</span> : '</span> + error); } });<div/> // initialize jqxGrid<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#all_invoicetable"</span>).jqxGrid(<div/> {<div/> width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'97.7%'</span>, <div/> autoheight:true,<div/> source: dataAdapter,<div/> enabletooltips: true,<div/> altrows: true,<div/> pageable: true,<div/> pagesizeoptions: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10', '20','30','40','50'</span>],<div/> editable:false,<div/> selectionmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'none'</span>,<div/> <div/> theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>,<div/> columns: [<div/> <div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Id',datafield: 'id', width: '12%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Number',datafield: 'number', width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Ref',datafield: 'reference',width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To_id',datafield: 'contact_id',width: '12%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To',datafield: 'contact_name',width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Date',datafield: 'date', width: '15%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due Date',datafield: 'due_date',width: '15%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Paid',datafield: 'paid', width: '8%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due',datafield: 'due',width: '8%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status_id',datafield: 'workflow_status_id', width: '18%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status',datafield: 'workflow_status_status', width: '18%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction Type',datafield: 'transaction_type_id', width: '18%'</span>, hidden:true }<div/> ] <div/> }); <div/>   } <div/> /*END :Function to display grid for all account*/     <div/> /*START :Function to display grid for draft*/<div/> var draft_initGrid = function () {<div/> gridid = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#draft_invoicetable"</span>;//update gridid…<div/> var source =<div/> {<div/> localdata: draft_invoice_data,<div/> datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/> datafields:<div/> [   <div/>    { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'item', type: 'bool'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'number', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'reference', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_name', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due_date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_status', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction_type_id', type: 'number'</span> },<div/> ],<div/> };<div/> var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Error loading <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"' + source.url + '"</span> : '</span> + error); } });<div/> var columnCheckBox = null;<div/> var updatingCheckState = false;<div/> // initialize jqxGrid<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#draft_invoicetable"</span>).jqxGrid(<div/> {<div/> width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'97.7%'</span>, <div/> autoheight:true,<div/> source: dataAdapter,<div/> enabletooltips: true,<div/> altrows: true,<div/> pageable: true,<div/> pagesizeoptions: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10', '20','30','40','50'</span>],<div/> editable:true,<div/> selectionmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'none'</span>, <div/> theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>,<div/> columns: [<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', columntype: 'checkbox', datafield: 'item', width: '8%'</span>, renderer: function () {<div/>      return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float:left;margin-left: 33.5%; margin-top: 5px;"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/>   },<div/>    rendered: function (element) {<div/>    $(element).jqxCheckBox({ theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });<div/>   },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Id',datafield: 'id', width: '12%'</span>,editable:false, hidden:true },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Number',datafield: 'number', editable:false,width: '12%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Ref',datafield: 'reference',editable:false,width: '12%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To_id',datafield: 'contact_id',editable:false,width: '12%'</span>, hidden:true },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To',datafield: 'contact_name',editable:false,width: '12%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Date',datafield: 'date',editable:false, width: '15%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due Date',datafield: 'due_date',editable:false,width: '15%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due',datafield: 'due',editable:false,width: '8%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%'</span>, hidden:true },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status',datafield: 'workflow_status_status',editable:false, width: '18%'</span> },<div/>   { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%'</span>, hidden:true }<div/>  ] <div/>      }); <div/>   } <div/> /*END :Function to display grid for draft*/<div/> /*START :Function to display grid for awaiting approval*/   <div/> var awaiting_approval_initGrid = function () {<div/> gridid = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#awaiting_approval_invoicetable"</span>;//update gridid…<div/> var source =<div/> {<div/> localdata: awaiting_approval_invoice_data,<div/> datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/> datafields:<div/> [   { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'item', type: 'bool'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'number', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'reference', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_name', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due_date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_status', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction_type_id', type: 'number'</span> },<div/> ],<div/> };<div/> var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Error loading <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"' + source.url + '"</span> : '</span> + error); } });<div/> var columnCheckBox = null;<div/> var updatingCheckState = false;<div/> // initialize jqxGrid<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#awaiting_approval_invoicetable"</span>).jqxGrid(<div/> {<div/> width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'97.7%'</span>, <div/> autoheight:true,<div/> source: dataAdapter,<div/> enabletooltips: true,<div/> altrows: true,<div/> editable:true,<div/> pageable: true,<div/> pagesizeoptions: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10', '20','30','40','50'</span>],<div/> selectionmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'none'</span>,<div/> theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>,<div/> columns: [<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', columntype: 'checkbox', datafield: 'item', width: '8%'</span>, renderer: function () {<div/>        return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float:left;margin-left: 33.5%; margin-top: 5px;"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/>  },<div/>   rendered: function (element) {<div/>   $(element).jqxCheckBox({ theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });<div/> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Id',datafield: 'id', width: '12%'</span>,editable:false, hidden:true },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Number',datafield: 'number',editable:false, width: '12%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Ref',datafield: 'reference',editable:false,width: '12%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To_id',datafield: 'contact_id',width: '12%'</span>,editable:false, hidden:true },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To',datafield: 'contact_name',editable:false,width: '12%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Date',datafield: 'date',editable:false, width: '15%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due Date',datafield: 'due_date',editable:false,width: '15%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due',datafield: 'due',editable:false,width: '8%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%'</span>, hidden:true },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status',datafield: 'workflow_status_status',editable:false, width: '18%'</span> },<div/> { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%'</span>, hidden:true }<div/>        ] <div/>      });<div/>   }<div/> /*END :Function to display grid for awaiting approval*/ <div/> /*START :Function to display grid for awaiting payment*/   <div/> var awaiting_payment_initGrid = function () {<div/> gridid = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#awaiting_payment_invoicetable"</span>;//update gridid…<div/> var source =<div/> {<div/> localdata: awaiting_payment_grid_data,<div/> datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/> datafields:<div/> [   { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'item', type: 'bool'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'number', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'reference', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_name', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due_date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'paid', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'due', type: 'float'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_status', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction_type_id', type: 'number'</span> },<div/> ],<div/> };<div/> var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Error loading <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"' + source.url + '"</span> : '</span> + error); } });<div/> var columnCheckBox = null;<div/> var updatingCheckState = false;<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#awaiting_payment_invoicetable"</span>).jqxGrid(<div/> {<div/> width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'97.7%'</span>, <div/> autoheight:true,<div/> source: dataAdapter,<div/> enabletooltips: true,<div/> altrows: true,<div/> pageable: true,<div/> pagesizeoptions: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10', '20','30','40','50'</span>],<div/> editable:true,<div/> selectionmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'none'</span>,<div/> theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>,<div/> columns: [<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', columntype: 'checkbox', datafield: 'item', width: '7.5%'</span>, renderer: function () {<div/>            return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float:left;margin-left: 33.5%; margin-top: 5px;"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/>    },<div/>    rendered: function (element) {<div/>    $(element).jqxCheckBox({ theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });<div/>   },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Id',datafield: 'id', width: '12%'</span>,editable:false, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Number',datafield: 'number',editable:false, width: '10%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Ref',datafield: 'reference',editable:false,width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To_id',datafield: 'contact_id',editable:false,width: '12%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To',datafield: 'contact_name',editable:false,width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Date',datafield: 'date', editable:false,width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due Date',datafield: 'due_date',editable:false,width: '12%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Paid',datafield: 'paid',editable:false, width: '8%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Due',datafield: 'due',editable:false,width: '9%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status',datafield: 'workflow_status_status',editable:false, width: '18%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%'</span>, hidden:true }<div/> ] <div/> });  <div/>   } <div/> /*END :Function to display grid for awaiting payment*/ <div/> /*START :Function to display grid for paid*/   <div/> var paid_initGrid = function () {<div/> gridid = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#paid_invoicetable"</span>;//update gridid…<div/> var source =<div/> {<div/> localdata: paid_invoice_data,<div/> datatype: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div/> datafields:<div/> [   { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'item', type: 'bool'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'number', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'reference', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_name', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'contact_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'date', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_id', type: 'number'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'workflow_status_status', type: 'string'</span> },<div/> { name: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction_type_id', type: 'number'</span> }, <div/> ],<div/> };<div/>                                                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Error loading <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"' + source.url + '"</span> : '</span> + error); } });<div/> var columnCheckBox = null;<div/> var updatingCheckState = false;<div/> // initialize jqxGrid<div/> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#paid_invoicetable"</span>).jqxGrid(<div/> {<div/> width: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'97.7%'</span>, <div/> autoheight:true,<div/> source: dataAdapter,<div/> enabletooltips: true,<div/> altrows: true,<div/> pageable: true,<div/> pagesizeoptions: [<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'10', '20','30','40','50'</span>],<div/> editable:true,<div/> selectionmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'none'</span>,<div/> theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>,<div/> columns: [<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'', columntype: 'checkbox', datafield: 'item', width: '8%'</span>, renderer: function () {<div/>    return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float:left;margin-left: 33.5%; margin-top: 5px;"</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;},<div/>     rendered: function (element) {<div/>     $(element).jqxCheckBox({ theme: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'metro'</span>, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });<div/>  },<div/>          { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Id',datafield: 'id', width: '12%'</span>,editable:false, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Number',datafield: 'number',editable:false, width: '15%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Ref',datafield: 'reference',editable:false,width: '22%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To_id',datafield: 'contact_id',editable:false,width: '12%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'To',datafield: 'contact_name',editable:false,width: '22%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Date',datafield: 'date',editable:false, width: '15%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%'</span>, hidden:true },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Status',datafield: 'workflow_status_status',editable:false, width: '18%'</span> },<div/>  { text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%'</span>, hidden:true }<div/> ] <div/> });<div/>   }<div/>   var initWidgets = function (tab) {<div/> switch (tab) {<div/> case 0:<div/> all_initGrid();<div/> break;<div/> case 1:<div/> draft_initGrid(); <div/> break;<div/> case 2:<div/> awaiting_approval_initGrid(); <div/> break;<div/> case 3:<div/> awaiting_payment_initGrid(); <div/> break;<div/> case 4:<div/> paid_initGrid(); <div/> break;<div/> }<div/>   }<div/>

    Please guide me regarding this as soon as possible.

    Thanks & Regards,

    Apeksha

     

     

     

     

     

     


    Peter Stoev
    Keymaster

    Hi,

    Please format your code: http://www.jqwidgets.com/community/topic/code-formatting/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Apeksha Singh
    Participant

    Hi,

    Is it possible to have only one search box for all the columns of a grid.
    I am adding my code below , where I have a search jqxinput filed and a jqxtab which contain 5 different grids.I want to implement search for all the grids.

    $(".search").jqxInput({width: '100px',height: '20px',theme: 'ui-start',scrollPosition: 'left'});
    /*START :Function to display grid for all account*/
    var all_initGrid = function () {
    gridid = "#all_invoicetable";//update gridid...
    var source =
    {
    datatype: "json",
    localdata: all_invoice_data,
    datafields:
    [
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    { name: 'paid', type: 'float' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    // initialize jqxGrid
    $("#all_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:false,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: 'Id',datafield: 'id', width: '12%', hidden:true },
    { text: 'Number',datafield: 'number', width: '12%' },
    { text: 'Ref',datafield: 'reference',width: '12%' },
    { text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',width: '12%' },
    { text: 'Date',datafield: 'date', width: '15%' },
    { text: 'Due Date',datafield: 'due_date',width: '15%' },
    { text: 'Paid',datafield: 'paid', width: '8%' },
    { text: 'Due',datafield: 'due',width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status', width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
    ]
    });
    }
    /*END :Function to display grid for all account*/
    /*START :Function to display grid for draft*/
    var draft_initGrid = function () {
    gridid = "#draft_invoicetable";//update gridid...
    var source =
    {
    localdata: draft_invoice_data,
    datatype: "json",
    datafields:
    [
    { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#draft_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:true,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number', editable:false,width: '12%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
    { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
    { text: 'Date',datafield: 'date',editable:false, width: '15%' },
    { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
    { text: 'Due',datafield: 'due',editable:false,width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    }
    /*END :Function to display grid for draft*/
    /*START :Function to display grid for awaiting approval*/
    var awaiting_approval_initGrid = function () {
    gridid = "#awaiting_approval_invoicetable";//update gridid...
    var source =
    {
    localdata: awaiting_approval_invoice_data,
    datatype: "json",
    datafields:
    [ { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#awaiting_approval_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    editable:true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number',editable:false, width: '12%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
    { text: 'To_id',datafield: 'contact_id',width: '12%',editable:false, hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
    { text: 'Date',datafield: 'date',editable:false, width: '15%' },
    { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
    { text: 'Due',datafield: 'due',editable:false,width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    }
    /*END :Function to display grid for awaiting approval*/
    /*START :Function to display grid for awaiting payment*/
    var awaiting_payment_initGrid = function () {
    gridid = "#awaiting_payment_invoicetable";//update gridid...
    var source =
    {
    localdata: awaiting_payment_grid_data,
    datatype: "json",
    datafields:
    [ { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    { name: 'paid', type: 'float' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    $("#awaiting_payment_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:true,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '7.5%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number',editable:false, width: '10%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
    { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
    { text: 'Date',datafield: 'date', editable:false,width: '12%' },
    { text: 'Due Date',datafield: 'due_date',editable:false,width: '12%' },
    { text: 'Paid',datafield: 'paid',editable:false, width: '8%' },
    { text: 'Due',datafield: 'due',editable:false,width: '9%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    }
    /*END :Function to display grid for awaiting payment*/
    /*START :Function to display grid for paid*/
    var paid_initGrid = function () {
    gridid = "#paid_invoicetable";//update gridid...
    var source =
    {
    localdata: paid_invoice_data,
    datatype: "json",
    datafields:
    [ { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#paid_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:true,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';},
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number',editable:false, width: '15%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '22%' },
    { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '22%' },
    { text: 'Date',datafield: 'date',editable:false, width: '15%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    }

    Please guide me regarding this as soon as possible.

    Thanks & Regards,

    Apeksha


    Peter Stoev
    Keymaster

    Hi,

    This help topic shows how to apply a Filter to a Grid – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm. You can use the approach from the help topic to create an apply new Filter objects to multiple grids i.e create a function which returns a Filter object and then use the Grid’s API to apply the filter object.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Apeksha Singh
    Participant

    Hi Peter ,

    I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project is it possible to apply your Toolbar demo of grid in my code.

    Thanks and Regards,
    Apeksha


    Peter Stoev
    Keymaster

    Hi,

    It depends whether the Toolbar feature is available in that version. You may check whether “showtoolbar” is available in the Grid’s API in your version. You can find the API in the documentation folder of the download package.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Apeksha Singh
    Participant

    Hi Peter Stoev,

    Is it possible to have one toolbar to search items from two different column of grids.

    Thanks & Regards,
    Apeksha


    Apeksha Singh
    Participant

    Hi Peter Stoev,

    I have implemented your showtoolbar in my code but it is not working.
    I am adding my code below :

    var source =
    {
    datatype: "json",
    localdata: all_invoice_data,
    datafields:
    [
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    { name: 'paid', type: 'float' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    formatData: function (localdata) {
    localdata.contact_name_startsWith = $("#searchField").val();
    return localdata;
    }
    });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#all_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    showtoolbar: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:false,
    selectionmode: 'none',
    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);
    container.append(input);
    input.on('keydown', function (event) {
    if (input.val().length >= 2) {
    if (me.timer) clearTimeout(me.timer);
    me.timer = setTimeout(function () {
    dataAdapter.dataBind();
    }, 300);
    }
    });
    },
    theme: 'metro',
    columns: [
    { text: 'Id',datafield: 'id', width: '12%', hidden:true },
    { text: 'Number',datafield: 'number', width: '12%' },
    { text: 'Ref',datafield: 'reference',width: '12%' },
    { text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',width: '12%' },
    { text: 'Date',datafield: 'date', width: '15%' },
    { text: 'Due Date',datafield: 'due_date',width: '15%' },
    { text: 'Paid',datafield: 'paid', width: '8%' },
    { text: 'Due',datafield: 'due',width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status', width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
    ]
    });

    Please guide me what am I doing wrong.

    Thanks & Regards,
    Apeksha


    Peter Stoev
    Keymaster

    Hi,

    It will not because our sample uses a Remote Server to retrieve new Data and updates the Grid on each Search by rebinding it. In your sample you use Local Data Source and I suggest you to use the Grid’s Filters like in the Filtering sample.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Apeksha Singh
    Participant

    Hi Peter Stoev,

    Thanks for your quick reply I will implement filter and let you know if I want any guidance regarding this.

    Thanks & Regards,
    Apeksha


    Apeksha Singh
    Participant

    Hi Peter Stoev,

    I am facing an issue that is I have a select all checkbox in my grid that select all the row and also checked the comboboxes of each row.
    While using filter it is affecting my select all code as I am selecting rows by using row index.
    And also I tried to use getrowboundindex but it is not working.

    I am adding my code below please let me know :-

    var draft_initGrid = function () {
    gridid = "#draft_invoicetable";//update gridid...
    //console.log("gridid in draft_initGrid",gridid);
    //var url = "sampledata/invoice_maindata.php";
    var source =
    {
    localdata: draft_invoice_data,
    datatype: "json",
    datafields:
    [
    { name: 'item', type: 'bool' },
    { name: 'id', type: 'number' },
    { name: 'number', type: 'string' },
    { name: 'reference', type: 'string' },
    { name: 'contact_name', type: 'string' },
    { name: 'contact_id', type: 'number' },
    { name: 'date', type: 'string' },
    { name: 'due_date', type: 'string' },
    //{ name: 'paid', type: 'float' },
    { name: 'due', type: 'float' },
    { name: 'workflow_status_id', type: 'number' },
    { name: 'workflow_status_status', type: 'string' },
    { name: 'transaction_type_id', type: 'number' },
    ],
    // id: 'id',
    // url: url,
    // root: 'data'
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid
    $("#draft_invoicetable").jqxGrid(
    {
    width: '97.7%',
    autoheight:true,
    source: dataAdapter,
    //sortable: true,
    enabletooltips: true,
    altrows: true,
    pageable: true,
    pagesizeoptions: ['10', '20','30','40','50'],
    editable:true,
    selectionmode: 'none',
    theme: 'metro',
    columns: [
    { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';/*CHANGES DONE ON 27 Feb*/
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    columnCheckBox = $(element);
    $(element).on('change', function (event) {
    console.log("event :",event);
    var paginginformation = $("#draft_invoicetable").jqxGrid('getpaginginformation');
    var pagenum = paginginformation.pagenum;
    var pagesize = paginginformation.pagesize;
    var pagescount = paginginformation.pagescount;
    var k = 1;
    var pageArray = new Array();
    for (var i = pagenum * pagesize; i < (pagenum + 1) * pagesize; i++) {
    pageArray.push(i);
    };
    var checked = event.args.checked;
    if (checked == null || updatingCheckState) return;
    var rowscount = $("#draft_invoicetable").jqxGrid('getdatainformation').rowscount;
    $("#draft_invoicetable").jqxGrid('beginupdate');
    if (checked)
    {
    $("#draft_invoicetable").jqxGrid({ selectedrowindexes: pageArray });
    for (m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++)
    {
    // Get the Check box value of all rows on the page
    var value = $('#draft_invoicetable').jqxGrid('getcellvalue', m, "item");
    if (value != null){
    $("#draft_invoicetable").jqxGrid('setcellvalue', m, 'item', event.args.checked);
    k = k * 1;
    }
    else
    {
    k = k * 0;
    break;
    };
    };
    if (0 ==(m % pagesize))
    x = pagesize;
    else
    x = m % pagesize;
    }// END OF if (checked)
    else if (checked == false)
    {
    $("#draft_invoicetable").jqxGrid('clearselection');
    for (var j = (pagenum) * pagesize; j < (pagenum + 1) * pagesize; j++) {
    $("#draft_invoicetable").jqxGrid('setcellvalue', j, 'item', event.args.checked);
    }
    x=0;
    }
    $("div#draftitem_label label").text(x);
    $("#draft_invoicetable").jqxGrid('endupdate');
    });
    }
    },
    { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
    { text: 'Number',datafield: 'number', editable:false,width: '12%' },
    { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
    { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
    { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
    { text: 'Date',datafield: 'date',editable:false, width: '15%' },
    { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
    // { text: 'Paid',datafield: 'paid', width: '8%' },
    { text: 'Due',datafield: 'due',editable:false,width: '8%' },
    { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
    { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
    { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
    ]
    });
    //START :Code to refresh the grid row selection on changing page or pagesize.Added by UI
    $("#draft_invoicetable").on("pagechanged", function (event)
    {
    //var args = event.args;
    //var pagenum = args.pagenum;
    //var pagesize = args.pagesize;
    $('#draft_invoicetable').jqxGrid('updatebounddata');
    $("#draft_invoicetable").jqxGrid('clearselection');
    $("div#draftitem_label label").text(0);
    });
    $("#draft_invoicetable").on("pagesizechanged", function (event)
    {
    //var args = event.args;
    //var pagenum = args.pagenum;
    //var oldpagesize = args.oldpagesize;
    //var pagesize = args.pagesize;
    $("#draft_invoicetable").jqxGrid('updatebounddata');
    $("#draft_invoicetable").jqxGrid('clearselection');
    $("div#draftitem_label label").text(0);
    });
    //END :Code to refresh the grid row selection on changing page or pagesize.Added by UI
    // select or unselect rows when the checkbox is checked or unchecked.
    $("#draft_invoicetable").bind('cellendedit', function (event) {
    if (event.args.value) {
    $("#draft_invoicetable").jqxGrid('selectrow', event.args.rowindex);
    ++x;
    $("div#draftitem_label label").text(x);
    }
    else {
    $("#draft_invoicetable").jqxGrid('unselectrow', event.args.rowindex);
    --x;
    $("div#draftitem_label label").text(x);
    //main checkbox set false
    if(x==0)
    {
    columnCheckBox.jqxCheckBox({ checked: false });
    }
    }
    });

    Please tell me how I can use filter so that it won’t disturb my this code.

    Thanks & Regards,
    Apeksha

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.