JQGrid MultiSelect Filter option populate based on column's distinct value(part-II)

1.1k views Asked by At

I am using this to fill multiselect filter value based on those are present in available rows for particular column.

I am facing below issue when going to delete selected row i.e. say I have deleted the first row, after deletion multiselect filter should recalculate the value based on those are present in available rows for particular column(for SkillCategory). We can see after deletion first row still "Data" value is available for SkillCategory multiselect filter.

How can I recalculate multiselect filter value after deleting row/add/update?

<script type="text/javascript">
        function loadCompleteHandler1() {
            initializeGridFilterValueSupply();
        }
        jQuery(function () {

            $.extend(true, $.jgrid.search, {
                beforeShowForm: function ($form) {
                    $form.closest(".ui-jqdialog").position({
                        of: window,
                        at: "center center",
                        my: "center center"
                    });
                }
            });

            $.extend($.jgrid.edit, { viewPagerButtons: false });

            $grid = $("#listTableSupply"),
                myDefaultSearch = "cn",
                getColumnIndexByName = function (columnName) {
                    var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                    for (i = 0; i < l; i += 1) {
                        if (cm[i].name === columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
                },
                modifySearchingFilter = function (separator) {
                    var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
                        filters = $.parseJSON(this.p.postData.filters);
                    if (filters && filters.rules !== undefined && filters.rules.length > 0) {
                        rules = filters.rules;
                        for (i = 0; i < rules.length; i++) {
                            rule = rules[i];
                            iCol = getColumnIndexByName.call(this, rule.field);
                            cmi = cm[iCol];
                            if (iCol >= 0 &&
                                    ((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
                                        && (rule.op === myDefaultSearch)) ||
                                    (typeof (cmi.searchoptions) === "object" &&
                                        $.isArray(cmi.searchoptions.sopt) &&
                                        cmi.searchoptions.sopt[0] === rule.op)) {
                                // make modifications only for the 'contains' operation
                                parts = rule.data.split(separator);
                                if (parts.length > 1) {
                                    if (filters.groups === undefined) {
                                        filters.groups = [];
                                    }
                                    group = {
                                        groupOp: 'OR',
                                        groups: [],
                                        rules: []
                                    };
                                    filters.groups.push(group);
                                    for (j = 0, l = parts.length; j < l; j++) {
                                        str = parts[j];
                                        if (str) {
                                            // skip empty '', which exist in case of two separaters of once
                                            group.rules.push({
                                                data: parts[j],
                                                op: rule.op,
                                                field: rule.field
                                            });
                                        }
                                    }
                                    rules.splice(i, 1);
                                    i--; // to skip i++
                                }
                            }
                        }
                        this.p.postData.filters = JSON.stringify(filters);
                    }
                },
                dataInitMultiselect = function (elem) {
                    setTimeout(function () {
                        var $elem = $(elem), id = elem.id,
                            inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
                            options = {
                                selectedList: 2,
                                height: "auto",
                                checkAllText: "all",
                                uncheckAllText: "no",
                                noneSelectedText: "Any",
                                open: function () {
                                    var $menu = $(".ui-multiselect-menu:visible");
                                    $menu.width("auto");
                                    return;
                                }
                            },
                            $options = $elem.find("option");
                        if ($options.length > 0 && $options[0].selected) {
                            $options[0].selected = false; // unselect the first selected option
                        }
                        if (inToolbar) {
                            options.minWidth = 'auto';
                        }
                        //$elem.multiselect(options);
                        $elem.multiselect(options).multiselectfilter({ placeholder: '' });
                        $elem.siblings('button.ui-multiselect').css({
                            width: inToolbar ? "98%" : "100%",
                            marginTop: "1px",
                            marginBottom: "1px",
                            paddingTop: "3px"
                        });
                    }, 50);

                };

            jQuery("#listTableSupply").jqGrid({
                url: 'HttpHandler/SupplyHandler.ashx',
                ajaxSelectOptions: { cache: false },
                postData: { ActionPage: 'TransportType', Action: 'Fill' },
                datatype: 'json',
                mtype: 'GET',
                colNames: ['SupplyId', 'Account', 'AccountPOC', 'COE', 'Type', 'Location', 'EmpId', 'EmpName', 'Designation', 'AvailabilityDate', 'AvailabilityMonth', 'Exp', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'Role', 'VisaStatus', 'Country', 'Comments'],
                colModel: [
                                { name: 'SupplyId', index: 'SupplyId', width: '5%', align: 'center', sortable: true, resizable: true, hidden: true },
                                {
                                    name: 'Account', index: 'Account', width: '10%', sortable: true, resizable: true, stype: 'select'
                                },
                                { name: 'AccountPOC', index: 'AccountPOC', width: '5%', sortable: true, resizable: true, hidden: true },
                                {
                                    name: 'COE', index: 'COE', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'Type', index: 'Type', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'Location', index: 'Location', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                { name: 'EmpId', index: 'EmpId', width: '5%', sortable: true, resizable: true, hidden: true },
                                { name: 'EmpName', index: 'EmpName', width: '5%', sortable: true, resizable: true, hidden: true },
                                {
                                    name: 'Designation', index: 'Designation', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'AvailabilityDate', index: 'AvailabilityDate', width: '5%', sortable: true, search: true, resizable: true, stype: 'select'
                                },
                                { name: 'AvailabilityMonth', index: 'AvailabilityMonth', width: '5%', sortable: true, resizable: true, hidden: true },
                                {
                                    name: 'Experience', index: 'Experience', width: '5%', sortable: true, resizable: true, search: true, stype: 'select'
                                },
                                {
                                    name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'PrimarySkill', index: 'PrimarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'SecondarySkill', index: 'SecondarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'OtherSkill', index: 'OtherSkill', width: '5%', sortable: true, resizable: true, stype: 'select'
                                },
                                {
                                    name: 'CurrentRole', index: 'CurrentRole', width: '5%', sortable: true, resizable: true,
                                    stype: 'select'
                                },
                                {
                                    name: 'VisaStatus', index: 'VisaStatus', width: '5%', sortable: true, resizable: true,
                                    stype: 'select'
                                },
                                {
                                    name: 'Country', index: 'Country', width: '5%', sortable: true, resizable: true,
                                    stype: 'select'
                                },
                                { name: 'Comments', index: 'Comments', width: '5%', search: false, sortable: false, resizable: true },
                ],
                width: '1192',
                height: '300',
                loadonce: true,
                pager: '#pagerSupply',
                gridview: true,
                rowNum: 15,
                rowList: [15, 30, 45],
                rowTotal: 5000,
                sortorder: 'asc',
                ignoreCase: true,
                sortname: 'Account',
                viewrecords: true,
                rownumbers: true,
                toppager: true,
                caption: 'Supply',
                emptyrecords: "No records to view",
                loadtext: "Loading...",
                refreshtext: "Refresh",
                refreshtitle: "Reload Grid",
                loadComplete: loadCompleteHandler1,
                ondblClickRow: function (rowid) {
                    jQuery(this).jqGrid('viewGridRow', rowid);
                },
                beforeRequest: function () //loads the jqgrids state from before save
                {
                    modifySearchingFilter.call(this, ',');
                }
            }).jqGrid('bindKeys');
            $('#listTableSupply').bind('keydown', function (e) {
                if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
            });
            //setSearchSelect("SkillCategory");
            $('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
                cloneToTop: true,
                refresh: true, refreshtext: "Clear Filter", edit: false, add: false, del: true, search: false
            }, {}, {}, {//Del
                closeOnEscape: true, //Closes the popup on pressing escape key
                drag: true,
                recreateForm: true,
                //closeAfterEdit: true,
                url: 'HttpHandler/SupplyHandler.ashx',
                delData: {
                    ActionPage: 'TransportType', Action: 'Delete',
                    SupplyId: function () {
                        var sel_id = $('#listTable').jqGrid('getGridParam', 'selrow');
                        var value = $('#listTable').jqGrid('getCell', sel_id, 'SupplyId');
                        return value;
                    }
                },
                afterShowForm: function ($form) {
                    $form.closest(".ui-jqdialog").position({ of: window, my: "center center", at: "center center" });
                    //$form.closest(".ui-jqdialog").position({of: window,at: "center center",my: "left top"});
                },
                afterSubmit: function (response, postdata) {
                    if (response.responseText == "") {
                        //$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after del
                        return [true, '']
                    }
                    else {
                        if (response.responseText == "Record Successfully Deleted!!!") {
                            //$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                            var myInfo = '<div class="ui-state-highlight ui-corner-all">' +
                                            '<span class="ui-icon ui-icon-info" ' +
                                            'style="float: left; margin-right: .3em;"></span>' +
                                            '<span>Record Successfully Deleted!!!</span></div>';
                            var infoTR = $("table#TblGrid_listTable>tbody>tr.tinfo");
                            infoTD = infoTR.children("td.topinfo");
                            infoTD.html(myInfo);
                            infoTR.show();

                            setTimeout(function () {
                                infoTD.children("div").fadeOut('slow',
                                    function () {
                                        infoTR.hide();
                                    });
                            }, 8000);
                            initializeGridFilterValueSupply();
                            return [true, '']
                        }
                        else {
                            return [false, response.responseText]//Captures and displays the response text on th Del window
                        }
                    }
                }
            }, {
                multipleSearch: true,
                multipleGroup: true,
                recreateFilter: true
            });
            jQuery("#listTableSupply").jqGrid('navButtonAdd', '#listTableSupply_toppager_left', { // "#list_toppager_left"
                caption: "Refresh",
                buttonicon: 'ui-icon-refresh',
                onClickButton: function () {
                    $("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
                    initializeGridFilterValueSupply();
                }
            });
            jQuery("#listTableSupply").jqGrid('navButtonAdd', '#pagerSupply', { // "#list_toppager_left"
                caption: "Refresh",
                buttonicon: 'ui-icon-refresh',
                onClickButton: function () {
                    $("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
                    initializeGridFilterValueSupply();
                }
            });
        });
        //]]>
    </script>

<script type="text/javascript">
initializeGridFilterValueSupply = function () {

            jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
            setSearchSelect("Account", jQuery("#listTableSupply"));
            setSearchSelect("COE", jQuery("#listTableSupply"));
            setSearchSelect("AccountPOC", jQuery("#listTableSupply"));
            setSearchSelect("Type", jQuery("#listTableSupply"));
            setSearchSelect("Location", jQuery("#listTableSupply"));
            setSearchSelect("Designation", jQuery("#listTableSupply"));
            setSearchSelect("EmpName", jQuery("#listTableSupply"));
            setSearchSelect("AvailabilityDate", jQuery("#listTableSupply"));
            setSearchSelect("Experience", jQuery("#listTableSupply"));
            setSearchSelect("SkillCategory", jQuery("#listTableSupply"));
            setSearchSelect("PrimarySkill", jQuery("#listTableSupply"));
            setSearchSelect("SecondarySkill", jQuery("#listTableSupply"));
            setSearchSelect("OtherSkill", jQuery("#listTableSupply"));
            setSearchSelect("CurrentRole", jQuery("#listTableSupply"));
            setSearchSelect("VisaStatus", jQuery("#listTableSupply"));
            setSearchSelect("Country", jQuery("#listTableSupply"));

            jQuery("#listTableSupply").jqGrid("filterToolbar", {
                stringResult: true,
                searchOnEnter: true,
                defaultSearch: myDefaultSearch,
                beforeClear: function () {
                    $(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
                        this.selected = false; // unselect all options
                    });

                    $(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
                        $(this).prev("select[multiple]").multiselect("refresh");
                    }).css({
                        width: "98%",
                        marginTop: "1px",
                        marginBottom: "1px",
                        paddingTop: "3px"
                    });
                }
            });
            jQuery("#listTableSupply").jqGrid('setGridHeight', 300);
        }
    </script>

enter image description here

enter image description here

enter image description here

enter image description here

1

There are 1 answers

0
Avijit On BEST ANSWER

I got my answer.

I need to use destroyFilterToolbar to destroy the filter toolbar and then create the toolbar one more time using filterToolbar.

initializeGridFilterValueDemand = function () {

            //jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
            setSearchSelect("AccountName", jQuery("#listTableDem"));
            setSearchSelect("COE", jQuery("#listTableDem"));
            setSearchSelect("DemandType", jQuery("#listTableDem"));
            setSearchSelect("Location", jQuery("#listTableDem"));
            setSearchSelect("Designation", jQuery("#listTableDem"));
            setSearchSelect("Experience", jQuery("#listTableDem"));
            setSearchSelect("ExpectedRole", jQuery("#listTableDem"));
            setSearchSelect("SkillCategory", jQuery("#listTableDem"));
            setSearchSelect("PrimarySkill", jQuery("#listTableDem"));
            setSearchSelect("SecondarySkill", jQuery("#listTableDem"));
            setSearchSelect("OtherSkill", jQuery("#listTableDem"));
            setSearchSelect("RequiredDate", jQuery("#listTableDem"));
            setSearchSelect("CriticalFlag", jQuery("#listTableDem"));
            setSearchSelect("ConfidenceFactor", jQuery("#listTableDem"));
            setSearchSelect("HiringSOId", jQuery("#listTableDem"));

            **jQuery("#listTableDem").jqGrid("destroyFilterToolbar");**


            jQuery("#listTableDem").jqGrid("filterToolbar", {
                stringResult: true,
                searchOnEnter: true,
                defaultSearch: myDefaultSearch,
                beforeClear: function () {
                    $(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
                        this.selected = false; // unselect all options
                    });

                    $(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
                        $(this).prev("select[multiple]").multiselect("refresh");
                    }).css({
                        width: "98%",
                        marginTop: "1px",
                        marginBottom: "1px",
                        paddingTop: "3px"
                    });
                }
            });
            jQuery("#listTableDem").jqGrid('setGridHeight', 300);
        }

And I am calling it in loadComplete event.

Update:

This will not going to work if we use destroyGroupHeader