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 - 16 through 30 (of 38 total)
  • Author
  • Issue in applying toolbar in grid. #28188

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #28397

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #28544

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29534

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #29538

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29541

    Apeksha Singh
    Participant

    Hi Dimitar,

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

    Regards,
    Apeksha

    Issue in applying toolbar in grid. #29591

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29595

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #29666

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29688

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #29812

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29822

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #29892

    Dimitar
    Participant

    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/

    Issue in applying toolbar in grid. #29911

    Apeksha Singh
    Participant

    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

    Issue in applying toolbar in grid. #30010

    Dimitar
    Participant

    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/

Viewing 15 posts - 16 through 30 (of 38 total)

You must be logged in to reply to this topic.