jQWidgets Forums
jQuery UI Widgets › Forums › Grid › How to implement single search for all the columns of grid.
Tagged: datagrid filtering
This topic contains 10 replies, has 2 voices, and was last updated by Apeksha Singh 12 years ago.
-
Author
-
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
Hi,
Please format your code: http://www.jqwidgets.com/community/topic/code-formatting/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi,
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
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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,
ApekshaHi,
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 StoevjQWidgets Team
http://www.jqwidgets.comHi Peter Stoev,
Is it possible to have one toolbar to search items from two different column of grids.
Thanks & Regards,
ApekshaHi 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,
ApekshaHi,
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 StoevjQWidgets Team
http://www.jqwidgets.comHi Peter Stoev,
Thanks for your quick reply I will implement filter and let you know if I want any guidance regarding this.
Thanks & Regards,
ApekshaHi 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 -
AuthorPosts
You must be logged in to reply to this topic.