jQuery UI Widgets Forums Grid Issue in applying toolbar in grid.

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

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
  • Issue in applying toolbar in grid. #27775

    Apeksha Singh
    Participant

    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

    • This topic was modified 10 years, 6 months ago by  Apeksha Singh.
    • This topic was modified 10 years, 6 months ago by  Apeksha Singh.
    Issue in applying toolbar in grid. #27781

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27783

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #27785

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27787

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #27789

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27792

    Apeksha Singh
    Participant

    Hi Dimitar,

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

    Thanks & Regards,
    Apeksha

    Issue in applying toolbar in grid. #27829

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27840

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #27841

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27851

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #27911

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #27920

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #27929

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #28161

    Apeksha Singh
    Participant

    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

Viewing 15 posts - 1 through 15 (of 38 total)

You must be logged in to reply to this topic.