Issue in applying toolbar in grid.

[DimitarParticipant]

Hi Apeksha,

Here is how you would have to modify the rendertoolbar callback function in the example we provided you:

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;' />");
    var combobox = $("<div id='jqxcombobox'></div>");
    container.append(input);
    container.append(combobox);
    var source = ["firstname", "lastname", "productname", "quantity", "price", "available"];
    combobox.jqxComboBox({ source: source, selectedIndex: 0 });
    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', combobox.jqxComboBox("val"), filtergroup);
        $("#jqxgrid").jqxGrid('applyfilters');
    });
},

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

This code was really helpful it solved my requirements but I am facing some issues with this code as :-
1) If we have a blank row in any column then search for that column is not working properly. For example :-

1- If there is 4 rows in a column and only one row has data “abc”.
2- I searched for abc it removed all the blank rows and display me only this row.
3- Then after removing this word from search input I am not getting the original list back.

Please tell me what is the issue behind it.

2) This search is not working for dates of format like “2013-09-12”.

Please reply me back as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Here is an improvement for the provided code:

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;' />");
    var combobox = $("<div id='jqxcombobox'></div>");
    container.append(input);
    container.append(combobox);
    var source = ["firstname", "lastname", "productname", "quantity", "price", "available"];
    combobox.jqxComboBox({ source: source, selectedIndex: 0 });
    input.on('keyup', function (event) {
        var searchText = input.val();
        var datafield = combobox.jqxComboBox("val");
        var filtertype = 'stringfilter';
        if (datafield == 'price' || datafield == 'quantity') {
            filtertype = 'numericfilter';
        };
        if (searchText == "") {
            $('#jqxgrid').jqxGrid('removefilter', datafield);
        } else {
            $('#jqxgrid').jqxGrid('removefilter', datafield);
            var filtergroup = new $.jqx.filter();
            var filter_or_operator = 1;
            var filtervalue = searchText;
            var filtercondition = 'contains';
            var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
            filtergroup.addfilter(filter_or_operator, filter);
            $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
            $("#jqxgrid").jqxGrid('applyfilters');
        };
    });
},

Note that for date datafields, the filtertype variable should be set to “datefilter”. You can learn more about filtering in the Grid Filtering documentation entry.

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

It resolved one of my issue that is :-

1) If we have a blank row in any column then search for that column is not working properly. For example :-

1- If there is 4 rows in a column and only one row has data “abc”.
2- I searched for abc it removed all the blank rows and display me only this row.
3- Then after removing this word from search input I am not getting the original list back.

Thanks a lot for helping me in resolving one issue, but still not able to search date column as the format is “2013-08-25” after “2013” when I enter “-” it is not able to filter it.

Please tell me what can resolve this issue as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

1) Make sure you have this piece of code included in your solution:

if (searchText == "") {
    $('#jqxgrid').jqxGrid('removefilter', datafield);
} else {

2) The filtering of dates should be in a particular order: day-month-year, e.g. 01-05-2013.

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

Is it not possible to do it in year-month-day ?

Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

It is possible. To achieve it, you have to change the cellsformat property of the date column to “yyyy-MMMM-dd”.

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

I have already implemented this format but not able to search date in this format using filter.
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Here is an update to the grid that allows date filtering:

$("#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;' />");
        var combobox = $("<div id='jqxcombobox'></div>");
        container.append(input);
        container.append(combobox);
        var source = ["firstname", "lastname", "productname", "quantity", "date", "available"];
        combobox.jqxComboBox({ source: source, selectedIndex: 0 });
        input.on('change', function (event) {
            var searchText = input.val();
            var datafield = combobox.jqxComboBox("val");
            var filtertype = 'stringfilter';
            if (datafield == 'quantity') {
                filtertype = 'numericfilter';
            } else if (datafield == 'date') {
                filtertype = 'datefilter';
            };
            if (searchText == "") {
                $('#jqxgrid').jqxGrid('removefilter', datafield);
            } else {
                $('#jqxgrid').jqxGrid('removefilter', datafield);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = searchText;
                var filtercondition = 'contains';
                if (datafield == "date") {
                    filtervalue = new Date(searchText);
                    filtervalue.setMinutes(0, 0, 0);
                    filtervalue.setHours(0);
                    filtercondition = "EQUAL";
                };
                var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter);
                $("#jqxgrid").jqxGrid('addfilter', datafield, 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: 'Date', datafield: 'date', cellsalign: 'right', cellsformat: 'yyyy-MMMM-dd' }
    ]
});

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks a lot this is the solution I was searching for.
Now I am able to filter date column, but in this after deleting every value from input fields I am not getting the original grid data.
The above code to get the original data is working fine for other columns except date.
Also while I filter any data for a particular column, the whole column get selected by grey shade but if I change the column for filtering. The previous column is not getting deselected.
Now I have two columns in the grid displayed as selected.

Please guide me regarding this as sson as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

1) The date filter gets cleared. However, this no longer happens on keyup but on change – when the value of the input has changed and it has lost focus.

2) I understand you wish to clear other columns’ filters when selecting a new column for filtering. Here is how:

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;' />");
    var combobox = $("<div id='jqxcombobox'></div>");
    container.append(input);
    container.append(combobox);
    var source = ["firstname", "lastname", "productname", "quantity", "date", "available"];
    combobox.jqxComboBox({ source: source, selectedIndex: 0 });
    combobox.on("change", function () {
        input.val("");
        $('#jqxgrid').jqxGrid('clearfilters');
    });
    input.on('change', function (event) {
        var searchText = input.val();
        var datafield = combobox.jqxComboBox("val");
        var filtertype = 'stringfilter';
        if (datafield == 'quantity') {
            filtertype = 'numericfilter';
        } else if (datafield == 'date') {
            filtertype = 'datefilter';
        };
        if (searchText == "") {
            $('#jqxgrid').jqxGrid('clearfilters');
        } else {
            $('#jqxgrid').jqxGrid('removefilter', datafield);
            var filtergroup = new $.jqx.filter();
            var filter_or_operator = 1;
            var filtervalue = searchText;
            var filtercondition = 'contains';
            if (datafield == "date") {
                filtervalue = new Date(searchText);
                filtervalue.setMinutes(0, 0, 0);
                filtervalue.setHours(0);
                filtercondition = "EQUAL";
            };
            var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
            filtergroup.addfilter(filter_or_operator, filter);
            $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
            $("#jqxgrid").jqxGrid('applyfilters');
        };
    });
},

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

I have changed the ‘keyup’ to ‘change’ but still the date filter is not getting removed when the value of the input has changed or removed.
I am not able to get my original grid data back.

I am adding my piece of code please have a look :-

rendertoolbar: function (toolbar) {
                        //jshint unused:vars
                        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' placeholder='Search' style='height: 23px; float: right; width: 150px;' />");
                        var combobox = $("<div id='selectSearchField'></div>");
                        container.append(input);
                        container.append(combobox);
                        var source = ["Number", "To", "Date", "Due Date", "Status"];
                        combobox.jqxComboBox({
                            source: source,
                            selectedIndex: -1,
                            promptText: "Select Column",
                            width: "20%",
                            height: "20",
                            theme: "ui-start"
                        })
                        combobox.on("change", function () {
                            input.val("");
                            $('#all_invoicetable').jqxGrid('clearfilters');
                        });
                        $(combobox).on("select", function (event) {
                            //$("#all_invoicetable").jqxGrid({ showfiltercolumnbackground: false});
                            var args = event.args;
                            if (args) {
                                var item = args.item;
                                // get item"s label and value.
                                var label = item.label;
                                //alert("ssds"+label);
                                if (label === "Number") {
                                    searchDatafield = "number";
                                } else if (label === "Date") {
                                    searchDatafield = "date";
                                } else if (label === "Due Date") {
                                    searchDatafield = "due_date";
                                } else if (label === "To") {
                                    searchDatafield = "contact_name";
                                } else {
                                    searchDatafield = "workflow_status_status";
                                }
                            }
                        });
                        //var searchDatafield = "number";
                        input.on("change", function (event) {
                            var searchText = input.val();
                            var filtertype = 'stringfilter';
                            if (searchDatafield == 'due_date' || searchDatafield == 'date') {
                                filtertype = 'datefilter';
                            };
                            if (searchText == " ") {
                                //alert("in");
                                $("#all_invoicetable").jqxGrid("clearfilters");
                            } else {
                                $("#all_invoicetable").jqxGrid("removefilter", searchDatafield);
                                var filtergroup = new $.jqx.filter();
                                var filterOrOperator = 1;
                                var filtervalue = searchText;
                                var filtercondition = "contains";
                                if (searchDatafield == 'due_date' || searchDatafield == 'date') {
                                    filtervalue = new Date(searchText);
                                    //filtervalue.setMinutes(0, 0, 0);
                                    //filtervalue.setHours(0);
                                    filtercondition = "EQUAL";
                                };
                                var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                                filtergroup.addfilter(filterOrOperator, filter);
                                //console.log("filters------", filter);
                                $("#all_invoicetable").jqxGrid("addfilter", searchDatafield, filtergroup);
                                $("#all_invoicetable").jqxGrid("applyfilters");
                            };
                        });
                    },

Please guide me as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

The issue comes from this line:

if (searchText == " ") {

which should actually be:

if (searchText == "") {

Note the difference between ” ” (an interval) and “” (an empty string).

Best Regards,
Dimitar

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

[Apeksha SinghParticipant]

Hi Dimitar,

Yes this was the issue I didn’t noticed it 😛 .Thanks a lot for your reply.

But still I am facing one issue, let me explain you in steps it might clear what I want to say :-

1- If I select a particular column for filtering say in context of my code I selected “To”.
2- Then in the list I have 4 names say – “Apeksha”,”Dimitar”,”Peter”,”Damen”.
3- Now when I enter “D” in the input field , the filter response properly everything is working fine it filter and show me two names “Dimitar” and “Damen”.
4- Now if I enter “Z” as you can see there is no word in the column that contain “Z” letter.
5- So the grid remove all the data and show “No data to Display”.
6- Now I deleted the “z” letter from input it return me the previous grid data.

But there is a design displacement of text in the first cell of first column , first row only. The text is moved to left.
I am not able to understand why is it happening.

Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

We did not encounter such an issue by following your step-by-step guide. Please make sure you are using the latest version of jQWidgets (3.0.3).

Best Regards,
Dimitar

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

[Author]

Posts