jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Keshavan 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Master-Detail Grid – Filter not working. Posts

June 2, 2013 at 1:05 pm Master-Detail Grid – Filter not working. #22377

Participant

Hi,

I have implemented a master-detail grid. While all is ok, there is one issue, when i select a row in master grid,
the detail grid doesn\’t filter to show the corresponding detail grid records.

jqWidget Version – 2.8

Below is the explanation of my code,

i have implemented a filter method (addfilter) in detail grid as part of it\’s data soure. This will filter based on 1
column – \’GroupCompanyId\’ with an \’equal\’ condition.

  addfilter : function (gid) 
                {
                    $(\"#companyGrid\").jqxGrid(\'clearfilters\');
                    gidFilterGroup = new $.jqx.filter();
                    filtervalue = gid;
                    var filtercondition = \'equal\';
                    gidFilter = gidFilterGroup.createfilter(\'numericfilter\', filtervalue, filtercondition);
                    var filter_or_operator = 0;
                    gidFilterGroup.addfilter(gidFilter);
                    $(\"#companyGrid\").jqxGrid(\'addfilter\', \'GroupCompanyId\', gidFilterGroup);
                    $(\"#companyGrid\").jqxGrid(\'applyfilters\');
                }

I call the \’addfilter\’ method from the master grid, when a row is selected in the master grid to show only the corresponding
records in detail grid,


            $(\"#groupcompanyGrid\").on(\'rowselect\', function (event) {
                gid = event.args.row.GroupCompanyId;
                alert(\"Gid  \" + gid);
                $(\"#companyGrid\").jqxGrid(\'applyfilters\');
            })

The filter is not working, Please let me know the issue.

I have the full code below,


 <!DOCTYPE html>
<html lang=\"en\">
<head>
    <title id=\'Description\'>In order to enter in edit mode, click any of the \'Edit\' buttons. To save the changes, click the \'Save\' button in the popup dialog. To cancel the changes
    click the \'Cancel\' button in the popup dialog.</title>
    <link rel=\"stylesheet\" href=\"/Content/Site.css\" type=\"text/css\" />
    <link rel=\"stylesheet\" href=\"/jqWidgets/jqwidgets/styles/jqx.base.css\" type=\"text/css\" />
    <link rel=\"stylesheet\" href=\"/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css\" type=\"text/css\" />
    <script type=\"text/javascript\" src=\"/JqWidgets/scripts/gettheme.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/scripts/jquery-1.8.3.min.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxcore.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxdata.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.edit.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.selection.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.pager.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.sort.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.filter.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.grouping.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.aggregates.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.columnsresize.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxbuttons.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxscrollbar.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxmenu.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxwindow.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxlistbox.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxnumberinput.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxdropdownlist.js\"></script>
    <script type=\"text/javascript\" src=\"/JqWidgets/jqwidgets/jqxinput.js\"></script>
    <script type=\"text/javascript\" src=\"generatedata.js\"></script>
    <script type=\"text/javascript\">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var gid = 1;
            var gidFilterGroup;
            var filtervalue;
            var filtercondition;
            var gidFilter;
            var data = {};
            var n1 = 0;
            var generaterow = function (id) {
                var row = {};
                row[\"GroupCompanyId\"] = id;
                row[\"GroupName\"] = \" \";
                row[\"Miscellaneous1\"] = \" \";
                row[\"Culture\"] = \" \";
                return row;
            }
            var source =
            {
                datatype: \"json\",
                datafields:
                [
                   { name: \'GroupCompanyId\' },
                   { name: \'GroupName\', type: \'string\' },
                   { name: \'Miscellaneous1\', type: \'string\' },
                   { name: \'Culture\', type: \'string\' }
                ],
                id: \'GroupCompanyId\',
                url: \'Company/GetGroupCompanies\'
            }
            $(\"#groupcompanyGrid\").on(\'rowselect\', function (event) {
                gid = event.args.row.GroupCompanyId;
                alert(\"Gid  \" + gid);
                $(\"#companyGrid\").jqxGrid(\'applyfilters\');
            })
            var dataAdapter = new $.jqx.dataAdapter(source);
            $(\"#groupcompanyGrid\").jqxGrid(
                {
                    width: 870,
                    height: 105,
                    source: dataAdapter,
                    theme: \'ui-sunny\',
                    selectionmode: \'click\',
                    keyboardnavigation: false,
                    columns:
            [
                      { text: \'Name\', datafield: \'GroupName\', width: 400 },
                      { text: \'Other Info\', datafield: \'Miscellaneous1\', width: 350 },
                      { text: \'Culture\', datafield: \'Culture\', width: 120 }
            ]
            });
            var generaterow1 = function (id) {
                var row = {};
                row[\"CompanyId\"] = id;
                row[\"GroupCompanyId\"] = gid;
                row[\"CompanyName\"] = \" \";
                row[\"AdminTel\"] = \" \";
                row[\"AdminEmail\"] = \" \";
                row[\"OtherInfo1\"] = \" \";
                row[\"OtherInfo2\"] = \" \";
                row[\"OtherInfo3\"] = \" \";
                return row;
            }
            // Company Grid
            // prepare the data
            var source1 =
            {
                datatype: \"json\",
                dataFields:
                [
                    { name: \'CompanyId\' },
			        { name: \'GroupCompanyId\' },
                	{ name: \'CompanyName\' },
                    { name: \'AdminTel\' },
                    { name: \'AdminEmail\' },
                    { name: \'OtherInfo1\' },
				    { name: \'OtherInfo2\' },
		 		    { name: \'OtherInfo3\' }
                ],
                id: \'CompanyId\',
                url: \'Company/GetCompanies\',
                addrow: function (rowid, rowdata, position, commit)
                {
                    // synchronize with the server - send insert command
                    rowdata.GroupCompanyId = gid;
                    $.ajax
                        ({
                            cache: false,
                            dataType: \'json\',
                            url:\'Company/Add\',
                            data: rowdata,
                            type: \"POST\",
                            success: function (data, status, xhr) {
                                // insert command is executed.
                                commit(true);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert(\"err\" + errorThrown);
                                commit(false);
                            }
                        });
                },
                updaterow: function (rowid, rowdata, commit)
                {
                    // synchronize with the server - send update command
                    {
                        $.ajax(
                                 {
                                     cache: false,
                                     dataType: \'json\',
                                     url: \'Company/Update\',
                                     data: rowdata,
                                     type: \"POST\",
                                     success: function (data, status, xhr) {
                                         // update command is executed.
                                         //   alert(success);
                                         //      alert(xhr.responseText);
                                         alert(\"entry saved!\");
                                         console.log(xhr.rowdata);
                                         commit(true);
                                     },
                                     error: function (jqXHR, textStatus, errorThrown) {
                                         alert(\"Fails ... \");
                                         commit(false);
                                     }
                                 }
                             );
                    }
                }, 
                addfilter : function (gid) 
                {
                    $(\"#companyGrid\").jqxGrid(\'clearfilters\');
                    gidFilterGroup = new $.jqx.filter();
                    filtervalue = gid;
                    var filtercondition = \'equal\';
                    gidFilter = gidFilterGroup.createfilter(\'numericfilter\', filtervalue, filtercondition);
                    var filter_or_operator = 0;
                    gidFilterGroup.addfilter(gidFilter);
                    $(\"#companyGrid\").jqxGrid(\'addfilter\', \'GroupCompanyId\', gidFilterGroup);
                    $(\"#companyGrid\").jqxGrid(\'applyfilters\');
                }
            };
            var dataAdapter1 = new $.jqx.dataAdapter(source1);
         //   dataAdapter1.dataBind();
            var editrow = -1;
            // initialize the input fields.
            $(\"#companyid\").jqxInput({ theme: theme });
            $(\"#groupcompanyid\").jqxInput({ theme: theme });
            $(\"#companyname\").jqxInput({ theme: theme });
            $(\"#adminTel\").jqxInput({ theme: theme });
            $(\"#adminEmail\").jqxInput({ theme: theme });
            $(\"#otherInfo1\").jqxInput({ theme: theme });
            $(\"#otherInfo2\").jqxInput({ theme: theme });
            $(\"#otherInfo3\").jqxInput({ theme: theme });
            $(\"#companyid\").width(50);
            $(\"#companyid\").height(23);
            $(\"#groupcompanyid\").width(50);
            $(\"#groupcompanyid\").height(23);
            $(\"#companyname\").width(250);
            $(\"#companyname\").height(23);
            $(\"#adminTel\").width(250);
            $(\"#adminTel\").height(23);
            $(\"#adminEmail\").width(250);
            $(\"#adminEmail\").height(23);
            $(\"#otherInfo1\").width(250);
            $(\"#otherInfo1\").height(23);
            $(\"#otherInfo2\").width(250);
            $(\"#otherInfo2\").height(23);
            $(\"#otherInfo3\").width(250);
            $(\"#otherInfo3\").height(23);
            $(\"#companyGrid\").jqxGrid
            ({
                width: 1100,
                height: 250,
                source: dataAdapter1,
                selectionmode: \'multiplecellsextended\',
                theme: \'ui-sunny\',
             //   keyboardnavigation: false,
                filterable: true,
                sortable:true,
                ready: function () {
                    addfilter(gid);
                },
                autoshowfiltericon: true,
                columns:
                [
                    { text: \'Gid\', datafield: \'GroupCompanyId\', hidden: false, width: 200 } ,
                    { text: \'Name\', datafield: \'CompanyName\', width: 200 },
                    { text: \'Telephone\', datafield: \'AdminTel\', width: 110 },
                    { text: \'Email\', datafield: \'AdminEmail\', width: 180 },
                    { text: \'Other Info\', datafield: \'OtherInfo1\', width: 170 },
                    { text: \'Other Info\', datafield: \'OtherInfo2\', width: 170 },
                    { text: \'Other Info\', datafield: \'OtherInfo3\', width: 170 },
                    {
                        text: \'Select/Update\', datafield: \'select\', columntype: \'button\', cellsrenderer: function () {
                            return \"select\";
                        }, buttonclick: function (row) {
                            // open the popup window when the user clicks a button.
                            editrow = row;
                            var offset = $(\"#groupcompanyGrid\").offset();
                            $(\"#popupWindow\").jqxWindow({ position: { x: parseInt(offset.left) + 80, y: parseInt(offset.top) + (-70) } });
                            // get the clicked row\'s data and initialize the input fields.
                            var dataRecord = $(\"#companyGrid\").jqxGrid(\'getrowdata\', editrow);
                            $(\"#companyid\").val(dataRecord.CompanyId);
                            $(\"#groupcompanyid\").val(gid);
                            $(\"#companyname\").val(dataRecord.CompanyName);
                            $(\"#adminTel\").val(dataRecord.AdminTel);
                            $(\"#adminEmail\").val(dataRecord.AdminEmail);
                            $(\"#otherInfo1\").val(dataRecord.OtherInfo1);
                            $(\"#otherInfo2\").val(dataRecord.OtherInfo2);
                            $(\"#otherInfo2\").val(dataRecord.OtherInfo3);
                            // show the popup window.
                            $(\"#popupWindow\").jqxWindow(\'open\');
                        }
                    }
                ]
            });
            $(\"#GroupcompanyGrid\").jqxGrid(\'selectrow\', 0);
            // initialize the popup window and buttons.
            $(\"#popupWindow\").jqxWindow({
                width: 500, resizable: false, theme: \'ui-sunny\', isModal: true, autoOpen: false, cancelButton: $(\"#Cancel\"), modalOpacity: 0.01
            });
            $(\"#popupWindow\").on(\'open\', function () {
                $(\"#companyid\").jqxInput(\'selectAll\');
            });
            $(\"#Cancel\").jqxButton({ theme: \'ui-sunny\' });
            $(\"#Save\").jqxButton({ theme: \'ui-sunny\' });
            // update the edited row when the user clicks the \'Save\' button.
            $(\"#Save\").click(function () {
                if (editrow >= 0) {
                    var row =
                    { CompanyId: $(\"#companyid\").val(), GroupCompanyId: $(\"#gid\").val(), CompanyName: $(\"#companyname\").val(), AdminTel: $(\"#adminTel\").val(), AdminEmail: $(\"#adminEmail\").val(), OtherInfo1: $(\"#otherInfo1\").val(), OtherInfo2: $(\"#otherInfo2\").val(), OtherInfo3: $(\"#otherInfo3\").val() };
                    var rowID = $(\'#companyGrid\').jqxGrid(\'getrowid\', editrow);
                    $(\'#companyGrid\').jqxGrid(\'updaterow\', rowID, row);
                    $(\"#popupWindow\").jqxWindow(\'hide\');
                }
            });
            //    $(\"#companyGrid\").jqxGrid(\'selectrow\', 0);
            $(\"#addrowbutton\").jqxButton({ width: \'90\', height: \'30\', theme: \'ui-sunny\' });
            $(\"#updaterowbutton\").jqxButton({ width: \'90\', height: \'25\', theme: \'ui-sunny\' });
            $(\"#deleterowbutton\").jqxButton({ width: \'90\', height: \'30\', theme: \'ui-sunny\' });
            // update row.
            // create new row.
            $(\"#addrowbutton\").bind(\'click\', function () {
                var datainformation = $(\"#companyGrid\").jqxGrid(\'getdatainformation\');
                var rowscount = datainformation.rowscount;
                editrow = rowscount + 1;
                var datarow = generaterow1(rowscount + 1);
                alert(\"CompanyId \" + datarow.CompanyId);
                datarow.GroupCompanyId = gid;
                $(\"#companyGrid\").jqxGrid(\'addrow\', rowscount + 1, datarow, \'top\'); 
            //    alert(\"rowcount \" + rowcount);
            });
            $(\"#updaterowbutton\").bind(\'click\', function () {
                var selectedrowindex = $(\"#companyGrid\").jqxGrid(\'getselectedrowindex\');
                var rowscount = $(\"#companyGrid\").jqxGrid(\'getdatainformation\').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $(\"#companyGrid\").jqxGrid(\'getrowid\', selectedrowindex);
                    $(\"#companyGrid\").jqxGrid(\'updaterow\', id, datarow);
                }
            });
        });
    </script>
</head>
<body class=\'default\'>
    <div id=\'jqxWidget\' style=\"font-size:  13px; font-family: Verdana; float: left;\">
        <h3>Group Company Info</h3>
        <br/>
        <div id=\"groupcompanyGrid\"  >
        </div>
        <h3>Company Info</h3>
        <br/>
        <div>
            <input id=\"addrowbutton\" type=\"button\" style=\"margin-top: 1px;\"   value=\" (+) record\" />
            <input id=\"deleterowbutton\" type=\"button\" style=\"margin-top: 1px;\" value=\" (-) record\" />
        </div>
        <br/>
        <div id=\"companyGrid\">
        </div>
        <div style=\"margin-top: 30px;\">
            <div id=\"cellbegineditevent\"></div>
            <div style=\"margin-top: 10px;\" id=\"cellendeditevent\"></div>
        </div>
        <div id=\"popupWindow\">
            <div>Update Company Information</div>
            <div style=\"overflow: hidden;\">
                <table>
                    <tr>
                        <td align=\"right\">CompanyId:</td>
                        <td align=\"left\">
                            <input id=\"companyid\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">GroupCompanyId:</td>
                        <td align=\"left\">
                            <input id=\"groupcompanyid\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Company Name:</td>
                        <td align=\"left\">
                            <input id=\"companyname\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Telephone:</td>
                        <td align=\"left\">
                            <input id=\"adminTel\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Email:</td>
                        <td align=\"left\">
                            <input id=\"adminEmail\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Other Info:</td>
                        <td align=\"left\">
                            <input id=\"otherInfo1\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Other Info:</td>
                        <td align=\"left\">
                            <input id=\"otherInfo2\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\">Other Info:</td>
                        <td align=\"left\">
                            <input id=\"otherInfo3\" /></td>
                    </tr>
                    <tr>
                        <td align=\"right\"></td>
                        <td style=\"padding-top: 1px;\" align=\"right\">
                            <input style=\"margin-right: 5px;\" type=\"button\" id=\"Save\" value=\"Save\" /><input id=\"Cancel\" type=\"button\" value=\"Cancel\" /></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Thanks,

Keshavan

June 2, 2013 at 4:46 pm Master-Detail Grid – Filter not working. #22381

Peter Stoev

Keymaster

Hi,

The code will not work because the custom function – addfilter should not be part of the source object and also the code that tries to call that function actually does not call it. Please, look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/masterdetails.htm?web. It shows how Master-Details is expected to be implemented with jqxGrid.

Best Regards,
Peter Stoev

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

June 3, 2013 at 3:26 am Master-Detail Grid – Filter not working. #22382

Keshavan

Participant

Hi Peter,

Thanks for the quick response, will go through the sample code you have sent and complete it.

Thanks,

Keshavan

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.