Parent Child Grid and Filtering

[raroccoParticipant]

Following the example linked here http://www.jqwidgets.com/assembling-n-nested-jquery-grid/ I have been creating a parent child grid. I am running into a problem where when I enable the filter on the children rows the filtering is not behaving properly. Ex: I have a list of numbers in one column ranging from 9000 to 10000, but when I do a filter with less than and put a 9 in nothing filters.

[raroccoParticipant]

is this due to a filter is already being set in the example??

var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);

[DimitarParticipant]

Hello rarocco,

Please note that parts of this example are now obsolete. You can find an updated version here: http://www.jqwidgets.com/community/topic/getting-error-with-assembling-n-nested-jquery-grid/#post-56402. Please also specify how exactly you apply the filter to the nested grid (share your complete filter-related code) and make sure you are using the latest version of jQWidgets (3.8.1).

Best Regards,
Dimitar

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

[raroccoParticipant]

this is my original code.

$(document).ready(function() {

$(“#LoadGridButton”).click(function() {
//********************** NO TOUCHIE***************************************************
var temp = “that”;
var dataJson = { “temp”: temp };
var url = “/PcsMvcAppTemplate_Responsive/home/GetEmployees”;
var valJson = JSON.stringify(dataJson);
var ajax = ajaxReturn(url, valJson);
var url2 = “/PcsMvcAppTemplate_Responsive/home/GetStormsForAdjusters”;
var valJson2 = JSON.stringify(dataJson);
var ajax2 = ajaxReturn(url2, valJson2);
var dataAdapter1;
var ordersDataAdapter;
var theme = “classic”;

ajax.success(function(json) {
var source = {
datatype: “json”,
localdata: json,
datafields:
[
{ name: “AdjusterId”, value: “AdjusterId” },
{ name: “Name”, value: “Name” },
],
id: “AdjusterId”,
async: false
};
dataAdapter1 = new $.jqx.dataAdapter(source);
});

ajax2.success(function(json2) {
var source2 = {
datatype: “json”,
localdata: json2,
datafields:
[
{ name: “AdjusterId”, value: “AdjusterId” },
{ name: “Storm”, value: “Storm” },
],
// id: “AdjusterId”
async: false
};
ordersDataAdapter = new $.jqx.dataAdapter(source2, { autoBind: true });

});
orders = ordersDataAdapter.records;
//******************END NO TOUCHIE***************************************************
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“AdjusterId”]);
if (result)
ordersbyid.push(orders[m]);
}
var orderssource = {
datafields: [
{ name: “AdjusterId”, value: “AdjusterId” },
{ name: “Storm”, value: “Storm” }
],

localdata: ordersbyid,
async: false
}
if (grid != null) {
grid.jqxGrid({
source: orderssource, theme: theme, width: “80%”, height: “80%”, pageable: true, filterable: true, sortable: true, //showfilterrow: true,
columns: [
{ text: ‘Adjuster ID’, datafield: ‘AdjusterId’, width: 200 },
{ text: ‘Storm’, datafield: ‘Storm’, width: 200 }
]
});
}
}

// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: “100%”,
height: “100%”,
source: dataAdapter1,
theme: theme,
pageable: true,
rowdetails: true,
rowsheight: 35,
sortable: true,
filterable: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘Adjuster ID’, datafield: ‘AdjusterId’, width: 200 },
{ text: ‘Full Name’, datafield: ‘Name’, width: 200 }
]
});

});
});

function ajaxReturn(url, valJson) {
return $.ajax({
type: “POST”,
async:false,
url: url,
data: valJson,
contentType: “application/json; charset=utf-8”,
dataType: “json”
});
}

I have updated my code to the example given in above article

$(document).ready(function() {

$(“#LoadGridButton”).click(function() {
//********************** NO TOUCHIE***************************************************
var temp = “that”;
var dataJson = { “temp”: temp };
var url = “/PcsMvcAppTemplate_Responsive/home/GetEmployees”;
var valJson = JSON.stringify(dataJson);
var ajax = ajaxReturn(url, valJson);
var url2 = “/PcsMvcAppTemplate_Responsive/home/GetStormsForAdjusters”;
var valJson2 = JSON.stringify(dataJson);
var ajax2 = ajaxReturn(url2, valJson2);
var dataAdapter1;
var ordersDataAdapter;
var theme = “classic”;

ajax.success(function(json) {
var source = {
datatype: “json”,
localdata: json,
datafields:
[
{ name: “AdjusterId”, value: “AdjusterId” },
{ name: “Name”, value: “Name” },
],
id: “AdjusterId”,
async: false
};
dataAdapter1 = new $.jqx.dataAdapter(source);
});

ajax2.success(function(json2) {
var source2 = {
datatype: “json”,
localdata: json2,
datafields:
[
{ name: “AdjusterId”, value: “AdjusterId” },
{ name: “Storm”, value: “Storm” },
],
id: “Storm”,
async: false
};
ordersDataAdapter = new $.jqx.dataAdapter(source2);

});
orders = ordersDataAdapter.records;
//******************END NO TOUCHIE***************************************************

var initlevel2 = function (index) {
var grid = $($.find(‘#grid’ + index));
if (grid != null) {

grid.jqxGrid({
source: ordersDataAdapter, theme: theme, width: 600, height: 200, pageable: true, filterable: true, sortable: true,
rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
columns: [
{ text: ‘Adjuster ID’, dataField: ‘AdjusterId’, width: 100 },
{ text: ‘Storm’, dataField: ‘Storm’, width: 100 }
]
});
}
}

$(“#jqxgrid”).jqxGrid(
{
width: “100%”,
height: “100%”,
source: dataAdapter1,
pageable: true,
theme: theme,
rowdetails: true,
filterable: true,
sortable:true,
initrowdetails: initlevel2,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
columns: [
{ text: ‘Adjuster ID’, dataField: ‘AdjusterId’, width: 100 },
{ text: ‘Name’, dataField: ‘Name’, width: 100 }
]
});

});
});

function ajaxReturn(url, valJson) {
return $.ajax({
type: “POST”,
async:false,
url: url,
data: valJson,
contentType: “application/json; charset=utf-8”,
dataType: “json”
});
}

But with the new code I am running into an issue every child grid has all the adjuster IDs in every child grid. I would like them filtered so they only show adjuster id and storm for the parent adjuster id

Thanks,.

[raroccoParticipant]

I think an elaboration is in order. The main thing I need to know at this point is there an actual way to define a parent child realtionship between these two datasources without using code similar to:

var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);

The reason I am asking is a requirement for my project is to have filtering able to be performned by the user in the child rows of a nested grid, and when this code is enabled, filtering does not work properly on the child grid.

Thanks.

[DimitarParticipant]

Hi rarocco,

The following modification of the aforementioned example shows that filtering works fine on all three grid levels (when filtering using the filter menu):

<!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.11.1.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
	            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
	            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
	            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
	            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 10; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var initlevel2 = function (index) {
                var grid = $($.find('#grid' + index));
                if (grid != null) {
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter, theme: theme, width: 600, height: 200,
                        rowdetailstemplate: { rowdetails: "<div id='subgrid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                        filterable: true,
                        columns: [
			                { text: 'First Name', dataField: 'firstname', width: 100 },
			                { text: 'Last Name', dataField: 'lastname', width: 100 },
			                { text: 'Product', dataField: 'productname', width: 180 },
			                { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
			            ]
                    });
                }
            }

            var initlevel3 = function (index) {
                var grid = $($.find('#subgrid' + index));
                var dataAdapter = new $.jqx.dataAdapter(source);
                if (grid != null) {
                    grid.jqxGrid({ source: dataAdapter, theme: theme, width: 530, height: 200,
                        filterable: true,
                        columns: [
            			    { text: 'First Name', dataField: 'firstname', width: 100 },
            			    { text: 'Last Name', dataField: 'lastname', width: 100 },
            			    { text: 'Product', dataField: 'productname', width: 180 },
            			    { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
            			]
                    });
                }
            }

            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: dataAdapter,
                theme: theme,
                filterable: true,
                rowdetails: true,
                initrowdetails: initlevel2,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                columns: [
		            { text: 'First Name', dataField: 'firstname', width: 100 },
		            { text: 'Last Name', dataField: 'lastname', width: 100 },
		            { text: 'Product', dataField: 'productname', width: 180 },
		            { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
		            { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
		            { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
	            ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts