Issue in applying toolbar in grid.

[Apeksha SinghParticipant]

Hi,

I am trying to apply toolbar in my grid but not able to do it.

Can you please guide me regarding this.

I am adding my code below :-

var all_initGrid = function () {
                gridid = "#all_invoicetable"; //update gridid...
                //var url = "sampledata/invoice_maindata.php";
                //$('#all_invoicetable').jqxGrid('updatebounddata');
                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'
                        },
                    ],
                    //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);
                    }
                });
                columnCheckBox = null;
                var updatingCheckState = false;
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    //sortable: true,
                    //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',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            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
                        }
                    ]
                });

Thanks & Regrads,

Apeksha

[DimitarParticipant]

Hello Apeksha,

Please check out the demo Toolbar which shows how to append a toolbar to the grid. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

I have already tried this but I do not know why it is not working.
Please have a look behind my code and guide me regarding this

var all_initGrid = function () {
                gridid = "#all_invoicetable"; //update gridid...
                //var url = "sampledata/invoice_maindata.php";
                //$('#all_invoicetable').jqxGrid('updatebounddata');
                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'
                        },
                    ],
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 20
                    }
                    //id: 'id',
                    //url: url,
                    //root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                        formatData: function (data) {
                            data.name_startsWith = $("#searchField").val();
                            return data;
                        }
                    },
                    {
                        async: false,
                        loadError: function (xhr, status, error) {
                            alert('Error loading "' + source.url + '" : ' + error);
                        }
                    });
                columnCheckBox = null;
                var updatingCheckState = false;
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    //sortable: true,
                    //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',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            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
                        }
                    ],
                    showtoolbar: true,
                    rendertoolbar: function (toolbar) {
                        var me = this;
                        var container = $("<div style='margin: 5px;'></div>");
                        var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
                        var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                        toolbar.append(container);
                        container.append(span);
                        container.append(input);
                        var oldVal = "";
                        input.on('keydown', function (event) {
                            if (input.val().length >= 2) {
                                if (me.timer) {
                                    clearTimeout(me.timer);
                                }
                                if (oldVal != input.val()) {
                                    me.timer = setTimeout(function () {
                                        $("#all_invoicetable").jqxGrid('updatebounddata');
                                    }, 1000);
                                    oldVal = input.val();
                                }
                            }
                        });
                    }
                });

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Please clarify the issue you experience – is it that the toolbar is not shown or does the search not work?

Also, please make sure you have included all required JavaScript files in the page’s head section and use the latest version of jQWidgets (3.0.2).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

The issue is it that the search is not working.

And I am using 2.9.1 version of jQWidgets and jquery-1.10.1.min.js.

I have included jqx-all.js for all the required JavaScript files.

Please guide me regarding this.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

The url of your source is commented out. It needs url, which shows where to fetch the data from.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

I am using localdata to display grid data.
What should I use in url now.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Please provide us with you local data so that we can test your code.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

I am adding my code below please have a look:-

var all_invoice_data = new Array();
all_invoice_data.push(voucher_item); //To have data of all invoices...
  /*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'
                        },
                    ],
                    //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);
                    }
                });
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    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',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            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
                        }
                    ]
                });
                $("#all_invoicetable").bind('rowclick', function (event) {
                    var datafield = event.args.datafield;
                    var editrow = event.args.rowindex;
                    var offset = $("#all_invoicetable").offset();
                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#all_invoicetable").jqxGrid('getrowdata', editrow);
                    var statusvalue = $('#all_invoicetable').jqxGrid('getcellvalue', editrow, 'workflow_status_id');
                    var transactionType = $('#all_invoicetable').jqxGrid('getcellvalue', editrow, 'transaction_type_id');
                    if (transactionType !== undefined) //have only correct value...
                    {
                        if (parseInt(transactionType) == 5) //for Customer Invoice transaction_type_id...
                        {
                            if (parseInt(statusvalue) == 4) {
                                self.goToThisRoute('non_editable_invoice_detail/' + dataRecord.id + '/' + item_type_id, dataRecord);
                            } else if (parseInt(statusvalue) == 3) {
                                self.goToThisRoute('non_editable_invoice_detail/' + dataRecord.id + '/' + item_type_id, dataRecord);
                            } else {
                                self.goToThisRoute('editable_invoice_detail', dataRecord);
                            }
                        } else if (parseInt(transactionType) == 6) //remaining invoices are of Credit Note type.....
                        {
                            if (statusvalue == "4") {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('non_editable_credit_note_detail/' + dataRecord.id, dataRecord);
                                $("#invoice_form_label").text("Paid");
                            } else if (statusvalue == "3") {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('non_editable_credit_note_detail/' + dataRecord.id, dataRecord);
                            } else {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('editable_credit_note_detail', dataRecord);
                            }
                        }
                    } //end if...applied for undefined
                });
            }

Here I am using localdata to display data in the grid that is stored in an array.
How I can use this for searching?

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

To search into a local array, you may use the grid filter functionality, as showcased in the demo Statusbar.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

Is it not possible to use toolbar in the code I have shared above.
As I want to apply search on only one column and other columns should also get updated according to the new order not only one column.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Yes, it is possible to use the toolbar in this case. However, you should implement the functionality of the Statusbar demo Find button in the toolbar. As you can see, it searches (filters) the values in a selected column.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

Statusbar opens a new popup window that’s why I don’t want to use it.
Please guide me how I can make toolbar work in my code as it fulfill all my requirements.

Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Here is an example with filtering through the toolbar:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var getAdapter = function () {
                // prepare the data
                var data = generatedata(15);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'available', type: 'bool' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: getAdapter(),
                theme: theme,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    container.append(input);
                    var searchDatafield = "firstname";
                    input.on('keyup', function (event) {
                        var searchText = input.val();
                        var filtergroup = new $.jqx.filter();
                        var filter_or_operator = 1;
                        var filtervalue = searchText;
                        var filtercondition = 'contains';
                        var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                        filtergroup.addfilter(filter_or_operator, filter);
                        $("#jqxgrid").jqxGrid('addfilter', searchDatafield, filtergroup);
                        $("#jqxgrid").jqxGrid('applyfilters');
                    });
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

This code was really helpful. But as you have implemented input here can I add a combobox too so that user can select “searchDatafield” from the combobox.

I am adding my code below :-

$("#selectSearchField").jqxComboBox({
                //source: contacts,
                selectedIndex: -1,
                promptText: "Select Column",
                width: '75.5%',
                height: '20',
                theme: 'ui-start'
});
var all_initGrid = function () {
                gridid = "#all_invoicetable"; //update gridid...
                //var url = "sampledata/invoice_maindata.php";
                //$('#all_invoicetable').jqxGrid('updatebounddata');
                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'
                        },
                    ],
                    //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);
                    }
                });
                columnCheckBox = null;
                var updatingCheckState = false;
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    //sortable: true,
                    //enabletooltips: true,
                    altrows: true,
                    pageable: true,
                    pagesizeoptions: ['10', '20', '30', '40', '50'],
                    editable: false,
                    selectionmode: 'none',
                    theme: 'metro',
showtoolbar: true,
                    rendertoolbar: function (toolbar) {
                        var me = this;
                        var container = $("<div style='margin: 5px;'></div>");
                        toolbar.append(container);
                        var combobox = $("#selectSearchField");
                        var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: right; width: 150px;' />");
                        container.append(combobox);
                        container.append(input);
                        var searchDatafield = "number";
                        input.on('keyup', function (event) {
                            var searchText = input.val();
                            var filtergroup = new $.jqx.filter();
                            var filter_or_operator = 1;
                            var filtervalue = searchText;
                            var filtercondition = 'contains';
                            var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                            filtergroup.addfilter(filter_or_operator, filter);
                            $("#all_invoicetable").jqxGrid('addfilter', searchDatafield, filtergroup);
                            $("#all_invoicetable").jqxGrid('applyfilters');
                        });
                    },
                    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',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            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 regarding this as soon as possible.

Thanks & Regards,
Apeksha

[Author]

Posts