Garbage Value is getting displayed in my nested Grid

[akramParticipant]

First post. Let me begin with saying, these widgets are awesome,I am planning to buy it but before that I am trying to check the flexibility of the widgets.

So my question is,
I have a nested grid implemented,the values of the nested grid is an array which comes from a ajax call. Like so,

$.ajax({
        type: 'GET'
        , url: urlToGetTheResponse
        , data: {
            tableName: 'Module'
        }
        , success: function (tableData) {
            tableDataOutside = tableData;
            //call the
            tableRenderModule(tableData);
        }
        //if the ajax call fails!
        , error: function (req, status, err) {
            console.log("error" + err + status + req);
        }
    });

tableRenderModule(tableData); this is my function which get all the data for my grid and nested grid.

So now coming for the actual code.

function tableRenderModule(tableData){

    var moduleColumnsNames = [];
    var moduleData = [];

    var moduleCategoryColumnsNames = [];
    var moduleCategoryData = [];

    /*cn -> columnName*/
    //loop through and assign the column names
    for(var cn=0; cn<tableData[0].length; cn++){
        var setColumnNames = {
            text: tableData[0][cn].COLUMN_NAME.replace(/[_]/g, " "),
            datafield: tableData[0][cn].COLUMN_NAME
        };
        moduleColumnsNames.push(setColumnNames);
    }

    //loops through all the array and assign them correctly
    for (var i = 0; i < tableData[1].length; i++) {
        var moduleRow = {};
        for (var j = 0; j < tableData[0].length; j++) {
            var moduleColumnValue  = tableData[1][i][tableData[0][j].COLUMN_NAME];
            moduleRow[tableData[0][j].COLUMN_NAME] = moduleColumnValue;
        }
        //take the value of each column and push it to table for display
        moduleData[i] = moduleRow;
    }
    //jqxGrid source properties
    //local is the variable from which the data has to be fetched to dusplay in the table
    //datatype is the datatype of the localdata variable
    var moduleSource =
        {
            id: 'id',
            localdata: moduleData,
            datatype: "array"

        };
    //new object of jqxGrid dataadapter
    var dataAdapter = new $.jqx.dataAdapter(moduleSource, {
        autoBind: true
    });
    orders = dataAdapter.records;
    var editrow = -1;

    var setModuleColumnNamesEdit = {
        text: "Edit",
        datafield: "Edit",
        columntype:"button",
        cellsrenderer: function () {
            return "Edit";
        },
        buttonclick: function (row) {
            editrow = row;
            // open the popup window when the user clicks a button.
            var dataRecord = $("#module_management_table").jqxGrid('getrowdata', editrow);
            for(var cn=0; cn<tableData[0].length; cn++){
                var colName = tableData[0][cn].COLUMN_NAME;
                $('#'+colName).val(dataRecord[colName]);
            }
            $("#addNewModulePopUp").jqxWindow('open');
        }
    };
    //pushing the edit button to the column name for the column name as edit
    moduleColumnsNames.push(setModuleColumnNamesEdit);
    var nestedGrids = new Array();
    var initrowdetails = function(index, parentElement, gridElement, record)
    {
        var id = record.uid.toString();
        var grid = $($(parentElement).children()[0]);
        nestedGrids[index] = grid;
        var filtergroup = new $.jqx.filter();
        var filtervalue = id;
        var filtercondition = 'equal';
        var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        // fill the orders depending on the id.

       /*cn -> columnName*/
        //loop through and assign the column names
        moduleCategoryColumnsNames = [];
        for(var cn=0; cn<tableData[2].length; cn++){
            var setColumnNamesModuleCategory = {
                text: tableData[2][cn].COLUMN_NAME.replace(/[_]/g, " "),
                datafield: tableData[2][cn].COLUMN_NAME
            };
            moduleCategoryColumnsNames.push(setColumnNamesModuleCategory);
        }

        moduleCategoryData = [];
        for (var i = 0; i < tableData[3].length; i++) {
            var moduleRowMc = {};
            for (var j = 0; j < tableData[2].length; j++) {
                    var moduleColumnValue = tableData[3][i][tableData[2][j].COLUMN_NAME];
                    moduleRowMc[tableData[2][j].COLUMN_NAME] = moduleColumnValue;
                if (filter.evaluate(tableData[3][i].module_id))
                    moduleCategoryData[i] = moduleRowMc;
            }

            //take the value of each column and push it to table for display
        }
        var orderssource = {
            localdata: moduleCategoryData,
            datatype: "array"
        };
        var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

        if (grid !== null) {
            grid.jqxGrid({
                source: nestedGridAdapter,
                width: 780,
                height: 200,
                columns: moduleCategoryColumnsNames
            });
        }
    };

    //jqxGrid initializing
    $("#module_management_table").jqxGrid(
        {
            width: 'calc(100% - 20%)',
            source: dataAdapter,
            rowdetails: true,
            initrowdetails: initrowdetails,
            rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
            columnsresize: true,
            ready: function() {
                $("#module_management_table").jqxGrid('showrowdetails', 1);
            },
            columns: moduleColumnsNames
        });
}

I have pasted the whole code. I hope it is not overwhelming to you guys. Basically what I am trying hear is keeping as dynamic as possible the grid and it’s content. So you wont see any text and datatype assigned individually because I have done it in the loop itself.

The problem : Everything according to me works correctly at least all the data’s are coming correctly as I have coded in the console. The problem is in only this part of the code I believe.

 moduleCategoryData = [];
        for (var i = 0; i < tableData[3].length; i++) {
            var moduleRowMc = {};
            for (var j = 0; j < tableData[2].length; j++) {
                    var moduleColumnValue = tableData[3][i][tableData[2][j].COLUMN_NAME];
                    moduleRowMc[tableData[2][j].COLUMN_NAME] = moduleColumnValue;
                if (filter.evaluate(tableData[3][i].module_id))
                    moduleCategoryData[i] = moduleRowMc;
            }

            //take the value of each column and push it to table for display
        }

Because the data in the moduleCategoryData is getting pushed correctly in the array but when displaying it give me only garbage values in the id and the rest of the column are empty.

I hope you guys can help me solve this or I am doing it wrong. I am not sure of that.

This is data which is coming in the ajaxResponse. Check out the image.
First post. Let me begin with saying, these widgets are awesome,I am planning to buy it but before that I am trying to check the flexibility of the widgets.

So my question is,
I have a nested grid implemented,the values of the nested grid is an array which comes from a ajax call. Like so,

$.ajax({
        type: 'GET'
        , url: urlToGetTheResponse
        , data: {
            tableName: 'Module'
        }
        , success: function (tableData) {
            tableDataOutside = tableData;
            //call the
            tableRenderModule(tableData);
        }
        //if the ajax call fails!
        , error: function (req, status, err) {
            console.log("error" + err + status + req);
        }
    });

tableRenderModule(tableData); this is my function which get all the data for my grid and nested grid.

So now coming for the actual code.

function tableRenderModule(tableData){

    var moduleColumnsNames = [];
    var moduleData = [];

    var moduleCategoryColumnsNames = [];
    var moduleCategoryData = [];

    /*cn -> columnName*/
    //loop through and assign the column names
    for(var cn=0; cn<tableData[0].length; cn++){
        var setColumnNames = {
            text: tableData[0][cn].COLUMN_NAME.replace(/[_]/g, " "),
            datafield: tableData[0][cn].COLUMN_NAME
        };
        moduleColumnsNames.push(setColumnNames);
    }

    //loops through all the array and assign them correctly
    for (var i = 0; i < tableData[1].length; i++) {
        var moduleRow = {};
        for (var j = 0; j < tableData[0].length; j++) {
            var moduleColumnValue  = tableData[1][i][tableData[0][j].COLUMN_NAME];
            moduleRow[tableData[0][j].COLUMN_NAME] = moduleColumnValue;
        }
        //take the value of each column and push it to table for display
        moduleData[i] = moduleRow;
    }
    //jqxGrid source properties
    //local is the variable from which the data has to be fetched to dusplay in the table
    //datatype is the datatype of the localdata variable
    var moduleSource =
        {
            id: 'id',
            localdata: moduleData,
            datatype: "array"

        };
    //new object of jqxGrid dataadapter
    var dataAdapter = new $.jqx.dataAdapter(moduleSource, {
        autoBind: true
    });
    orders = dataAdapter.records;
    var editrow = -1;

    var setModuleColumnNamesEdit = {
        text: "Edit",
        datafield: "Edit",
        columntype:"button",
        cellsrenderer: function () {
            return "Edit";
        },
        buttonclick: function (row) {
            editrow = row;
            // open the popup window when the user clicks a button.
            var dataRecord = $("#module_management_table").jqxGrid('getrowdata', editrow);
            for(var cn=0; cn<tableData[0].length; cn++){
                var colName = tableData[0][cn].COLUMN_NAME;
                $('#'+colName).val(dataRecord[colName]);
            }
            $("#addNewModulePopUp").jqxWindow('open');
        }
    };
    //pushing the edit button to the column name for the column name as edit
    moduleColumnsNames.push(setModuleColumnNamesEdit);
    var nestedGrids = new Array();
    var initrowdetails = function(index, parentElement, gridElement, record)
    {
        var id = record.uid.toString();
        var grid = $($(parentElement).children()[0]);
        nestedGrids[index] = grid;
        var filtergroup = new $.jqx.filter();
        var filtervalue = id;
        var filtercondition = 'equal';
        var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        // fill the orders depending on the id.

       /*cn -> columnName*/
        //loop through and assign the column names
        moduleCategoryColumnsNames = [];
        for(var cn=0; cn<tableData[2].length; cn++){
            var setColumnNamesModuleCategory = {
                text: tableData[2][cn].COLUMN_NAME.replace(/[_]/g, " "),
                datafield: tableData[2][cn].COLUMN_NAME
            };
            moduleCategoryColumnsNames.push(setColumnNamesModuleCategory);
        }

        moduleCategoryData = [];
        for (var i = 0; i < tableData[3].length; i++) {
            var moduleRowMc = {};
            for (var j = 0; j < tableData[2].length; j++) {
                    var moduleColumnValue = tableData[3][i][tableData[2][j].COLUMN_NAME];
                    moduleRowMc[tableData[2][j].COLUMN_NAME] = moduleColumnValue;
                if (filter.evaluate(tableData[3][i].module_id))
                    moduleCategoryData[i] = moduleRowMc;
            }

            //take the value of each column and push it to table for display
        }
        var orderssource = {
            localdata: moduleCategoryData,
            datatype: "array"
        };
        var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

        if (grid !== null) {
            grid.jqxGrid({
                source: nestedGridAdapter,
                width: 780,
                height: 200,
                columns: moduleCategoryColumnsNames
            });
        }
    };

    //jqxGrid initializing
    $("#module_management_table").jqxGrid(
        {
            width: 'calc(100% - 20%)',
            source: dataAdapter,
            rowdetails: true,
            initrowdetails: initrowdetails,
            rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
            columnsresize: true,
            ready: function() {
                $("#module_management_table").jqxGrid('showrowdetails', 1);
            },
            columns: moduleColumnsNames
        });
}

I have pasted the whole code. I hope it is not overwhelming to you guys. Basically what I am trying hear is keeping as dynamic as possible the grid and it’s content. So you wont see any text and datatype assigned individually because I have done it in the loop itself.

The problem : Everything according to me works correctly at least all the data’s are coming correctly as I have coded in the console. The problem is in only this part of the code I believe.

 moduleCategoryData = [];
        for (var i = 0; i < tableData[3].length; i++) {
            var moduleRowMc = {};
            for (var j = 0; j < tableData[2].length; j++) {
                    var moduleColumnValue = tableData[3][i][tableData[2][j].COLUMN_NAME];
                    moduleRowMc[tableData[2][j].COLUMN_NAME] = moduleColumnValue;
                if (filter.evaluate(tableData[3][i].module_id))
                    moduleCategoryData[i] = moduleRowMc;
            }

            //take the value of each column and push it to table for display
        }

Because the data in the moduleCategoryData is getting pushed correctly in the array but when displaying it give me only garbage values in the id and the rest of the column are empty.

I hope you guys can help me solve this or I am doing it wrong. I am not sure of that.

This is data which is coming in the ajaxResponse. Check out the image.
http://imgur.com/a/3hbtD

[HristoParticipant]

Hello akram,

Thi initialization of the Grid should be one (I mention this because you do this in function).
Also, I would like to ask you is there any error message?
If you want to change the data of the Grid I would suggest you use updatebounddata (please, visit the attached link).
In case, you want to change the columns, you could use simple column property – $("#module_management_table").jqxGrid({ columns: newColumns });
Please, take a look at this topic.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[akramParticipant]

I don’t have any error message. As I told you that the values in the data during debugging is correct,but it is not outputting on the screen correctly may be because of the grid init inside of the function. I will update the code and try it again,I will update you on that.

And as of your fiddle,I don’t understand what is happening there! I try to use that button after changing the column names but that doesn’t update the column names in the grid.

[HristoParticipant]

Hello akram,

Thank you for this message.
About “changing the column names” I would suggest you this topic.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts