jQuery UI Widgets Forums Grid Nested grid add row

This topic contains 11 replies, has 2 voices, and was last updated by  Hristo 8 years, 5 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Nested grid add row #80079

    deyavirup
    Participant

    How can I add a row dynamically in a nested grid on click of a button?
    I was trying this
    $(“#addBtn”).on(‘click’, function () {
    $(“#jqxgrid”).jqxGrid(‘addrow’, {}, {});
    });
    But got this error :
    Unable to get property ‘constraints’ of undefined or null reference

    Nested grid add row #80092

    Hristo
    Participant

    Hello deyavirup,

    In your code second parameter is incorrect it should be – $("#jqxgrid").jqxGrid('addrow', null, {}); (for empty row)
    We have similar theme: http://www.jqwidgets.com/community/topic/add-row-to-nested-grid/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Nested grid add row #80096

    deyavirup
    Participant

    Hello Hristo,

    I did the same as you have said but still getting the same error.
    Can you tell how to set the data for the inner grid(constraints) here?

    Nested grid add row #80117

    Hristo
    Participant

    Hello deyavirup,

    Please take a look this example:
    https://www.jseditor.io/?key=jqwidgets-nested-grid-new-row

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Nested grid add row #80226

    deyavirup
    Participant

    Hello Hristo,

    In your example I can’t find where a new row is added in the grid.
    I have tried it doing like this
    https://www.jseditor.io/?key=nested-grid-add-row-1

    but its giving the above mentioned error.
    Can you tell me where I am going wrong in my code?

    Nested grid add row #80231

    Hristo
    Participant

    Hello deyavirup,

    Your example is not shared.
    Could you make settings below:
    – Login
    – From menu Share select “Everyone”
    – And save the project

    About my example – when click on “Add row to nested grid”. This add new row (empty) in the end of nested grid.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Nested grid add row #80241

    deyavirup
    Participant

    Here is my code:

    $(document).ready(function () {

    var value=””;
    var gridId = “”;
    var currentDivID = “”;

    var data = [
    {
    “ruleid”: “1001”,
    “size”: “51”,
    “ZScore”: “”,
    “complexity”: “8”,
    “constraints”: {
    “constraint”: [
    {
    “varName”: “BirthWeight”,
    “Min”: “2.500000”,
    “Max”: “2.500000”
    },
    {
    “varName”: “AgeMother”,
    “Min”: “39.000000”,
    “Max”: “39.000000”
    },
    {
    “varName”: “AgeFather”,
    “Min”: “35.000000”,
    “Max”: “39.000000”
    }
    ]
    }
    },
    {
    “ruleid”: “1002”,
    “size”: “92”,
    “ZScore”: “”,
    “complexity”: “2”,
    “constraints”: {
    “constraint”: [
    {
    “varName”: “AgeFather”,
    “Min”: “32.000000”,
    “Max”: “45.000000”
    },
    {
    “varName”: “Age AD Start (weeks)”,
    “Min”: “14.000000”,
    “Max”: “30.000000”
    }
    ]
    }
    },
    {
    “ruleid”: “1003”,
    “size”: “62”,
    “ZScore”: “”,
    “complexity”: “2”,
    “constraints”: {
    “constraint”: [
    {
    “varName”: “AgeFather”,
    “Min”: “32.000000”,
    “Max”: “45.000000”
    },
    {
    “varName”: “Age AD Start (weeks)”,
    “Min”: “14.000000”,
    “Max”: “30.000000”
    }
    ]
    }
    }
    ];
    var source1 =
    {
    datafields: [
    { name: ‘ruleid’, type: ‘string’ },
    { name: ‘size’, type: ‘string’ },
    { name: ‘ZScore’, type: ‘string’ },
    { name: ‘complexity’, type: ‘string’ }
    ],
    datatype: ‘json’,
    /* sortcolumn: ‘ruleid’,
    sortdirection: ‘asc’, */
    localdata: data
    };
    var adapter = new $.jqx.dataAdapter(source1);
    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    var nestedSource =
    {
    datafields: [
    { name: ‘varName’, map: ‘varName’, type: ‘string’ },
    { name: ‘Min’, map: ‘Min’, type: ‘string’ },
    { name: ‘Max’, map: ‘Max’, type: ‘string’ }
    ],
    datatype: ‘json’,
    root: ‘constraint’,
    theme: ‘darkblue’,
    localdata: data[index].constraints
    };
    var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
    if (grid != null) {
    grid.jqxGrid({
    source: nestedAdapter, width: 600, height: 100,
    columns: [
    { text: “varName”, datafield: “varName” },
    { text: “Min”, datafield: “Min” },
    { text: “Max”, datafield: “Max” }
    ]
    });
    }
    };

    var column1 = [
    { text: ‘ruleid’, datafield: ‘ruleid’, width: 150 },
    { text: ‘size’, datafield: ‘size’, width: 150 },
    { text: ‘ZScore’, datafield: ‘ZScore’, width: 150 },
    { text: ‘complexity’, datafield: ‘complexity’, }
    ];

    $(“#jqxgrid”).jqxGrid(
    {
    width: 625,
    height: 600,
    source: source1,
    theme: “lsjqwidget-custom”,
    rowdetails: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: false, theme: “lsjqwidget-custom”},
    /*ready: function () {
    $(“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);
    },*/
    columns: column1
    });

    $(“#addRow”).click(function () {
    //console.log(nestedGrids);
    $(“#jqxgrid”).jqxGrid(‘addrow’, null, {} );
    });
    });

    <!DOCTYPE html>
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <div id=”” style=”overflow:scroll; width: 49%; height: 650px; float: left; margin: 3px;”>

    <button id=”addRow”>
    Add row to nested grid
    </button>
    <div id=”jqxgrid” style=”float: left; margin: 3px;”>
    </div>
    </div>
    </BODY>
    </HTML>

    Can you tell me where I am going wrong in this code?

    Nested grid add row #80287

    Hristo
    Participant

    Hello deyavirup,

    Error message shows in initrowdetails function.
    In this row localdata: data[index].constraints. Without .constraints it will work.
    I make small changes in code below:

    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
        <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" />
    
        <script src="../../libs/jquery-1.11.3-dev.js"></script>
    
        <script src="../../libs/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js"></script>
    
        <script>
            $(document).ready(function () {
                var value = "";
                var gridId = "";
                var currentDivID = "";
                var data = [
                    {
                        "ruleid": "1001",
                        "size": "51",
                        "ZScore": "",
                        "complexity": "8",
                        "constraints": {
                            "constraint": [
                            {
                                "varName": "BirthWeight",
                                "Min": "2.500000",
                                "Max": "2.500000"
                            },
                            {
                                "varName": "AgeMother",
                                "Min": "39.000000",
                                "Max": "39.000000"
                            },
                            {
                                "varName": "AgeFather",
                                "Min": "35.000000",
                                "Max": "39.000000"
                            }
                            ]
                        }
                    },
                    {
                        "ruleid": "1002",
                        "size": "92",
                        "ZScore": "",
                        "complexity": "2",
                        "constraints": {
                            "constraint": [
                            {
                                "varName": "AgeFather",
                                "Min": "32.000000",
                                "Max": "45.000000"
                            },
                            {
                                "varName": "Age AD Start (weeks)",
                                "Min": "14.000000",
                                "Max": "30.000000"
                            }
                            ]
                        }
                    },
                    {
                        "ruleid": "1003",
                        "size": "62",
                        "ZScore": "",
                        "complexity": "2",
                        "constraints": {
                            "constraint": [
                            {
                                "varName": "AgeFather",
                                "Min": "32.000000",
                                "Max": "45.000000"
                            },
                            {
                                "varName": "Age AD Start (weeks)",
                                "Min": "14.000000",
                                "Max": "30.000000"
                            }
                            ]
                        }
                    }
                ];
                var source1 =
                {
                    datafields: [
                    { name: 'ruleid', type: 'string' },
                    { name: 'size', type: 'string' },
                    { name: 'ZScore', type: 'string' },
                    { name: 'complexity', type: 'string' }
                    ],
                    datatype: 'json',
                    localdata: data
                };
                var adapter = new $.jqx.dataAdapter(source1);
    
                var nestedGrids = new Array();
                // create nested grid.
                var initrowdetails = function (index, parentElement, gridElement, record) {
                    var id = record.uid.toString();
                    var grid = $($(parentElement).children()[0]);
                    nestedGrids.push(grid);
                    var nestedSource =
                    {
                        datafields: [
                        // not need to set (map: ...) because there are with same name
                        { name: 'varName', type: 'string' },
                        { name: 'Min', type: 'string' },
                        { name: 'Max', type: 'string' }
                        ],
                        datatype: 'json',
                        root: 'constraint',
                        theme: 'darkblue',
                        localdata: data[index]//.constraints
                    };
                    var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
                    if (grid != null) {
                        grid.jqxGrid({
                            source: nestedAdapter, width: 600, height: 100,
                            columns: [
                            { text: "varName", datafield: "varName" },
                            { text: "Min", datafield: "Min" },
                            { text: "Max", datafield: "Max" }
                            ]
                        });
                    }
                };
    
                var column1 = [
                    { text: 'ruleid', datafield: 'ruleid', width: 150 },
                    { text: 'size', datafield: 'size', width: 150 },
                    { text: 'ZScore', datafield: 'ZScore', width: 150 },
                    { text: 'complexity', datafield: 'complexity', }
                ];
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 725,
                    height: 800,
                    source: source1,
                    theme: "lsjqwidget-custom",
                    rowdetails: true,
                    rowsheight: 35,
                    initrowdetails: initrowdetails,
                    rowdetailstemplate: { rowdetails: "<div id='grid' class='innergrid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: false, theme: "lsjqwidget-custom" },
                    columns: column1
                });
    
                // $("#addRow").click(function () {
                //     $("#jqxgrid").jqxGrid('addrow', null, {});
                // });
    
                // Add row in [first] Nested grid
                $("#add").click(function () {
                    // Special in first nested grid
                    nestedGrids[0].jqxGrid('addrow', null, {});
                });
            });
        </script>
    </head>
    <body>
        <div id="" style="overflow:scroll; width: 49%; height: 650px; float: left; margin: 3px;">
            <!-- <button id="addRow">
                Add row to grid
            </button> -->
            <button id="add">
                Add row to nested grid
            </button>
            <div id="jqxgrid" style="float: left; margin: 3px;">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Nested grid add row #80311

    deyavirup
    Participant

    But I need this row localdata: data[index].constraints.
    As I need to implement an on click function, where the data will be deleted from the innergrid and gets populated onto another grid.

    Nested grid add row #80315

    Hristo
    Participant

    Hello deyavirup,

    Could you give us more detailed information.
    We generate this view.
    http://postimg.org/image/49njt5039/
    Please take a look this example: http://jsfiddle.net/txhi/9v8eb5k2/
    (this is used to create the picture above)

    If you would like could read more about dataAdapter in this articles:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm
    Especially about root and record this could be helpful to use second dataAdapter generated from same data.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 8 years, 5 months ago by  Hristo.
    Nested grid add row #80317

    deyavirup
    Participant

    Hi Hristo,

    This is my entire code:
    https://jsfiddle.net/5ad60wpy/

    Now what I wanted/tried to do is that if I click on the add button, a row (having an outer row and an inner row inside it) will get populated in the #jqxgrid table.

    Now the issue in this code is that if I don’t use .constraints, a row is getting populated but the below mentioned code functionality is not working

    $(“.innergrid”).on(‘mouseenter’, function ()
    {
    currentDivID = this.id;
    //alert(currentDivID);
    value = “”;

    $(“#”+currentDivID).on(‘rowselect’, function (event)
    {
    var row = event.args.rowindex;
    //var datarow = $(“#grid2”).jqxGrid(‘getrowdata’, row);
    value = $(“#”+currentDivID).jqxGrid(‘getrowdata’, row);
    ROWSS = ROWSS + value;
    var id = $(“#gamegrid2”).jqxGrid(‘getdatainformation’).rowscount;

    DELETE_ROW_ID = $(“#”+currentDivID).jqxGrid(‘getrowid’, row);

    //alert(value);
    if(COUNTER <= 0)
    {
    $(“#gamegrid2”).jqxGrid(‘addrow’, id, value);

    COUNTER = 1;
    $(“#”+currentDivID).jqxGrid(‘deleterow’, DELETE_ROW_ID);
    COUNTER = 0;
    }

    });

    $(“#”+currentDivID).on(‘mouseup’, function (event)
    {
    $(“#”+currentDivID).jqxGrid(‘clearselection’);
    });
    });

    It would be of great help, if you can point out where I am going wrong.

    Nested grid add row #80356

    Hristo
    Participant

    Hello deyavirup,

    If Your issue is with how to get ‘constraints’.
    Could you transform json data to like this:

    
    {
       "ruleid": "1003",
       "size": "62",
       "ZScore": "",
       "complexity": "2",
       "constraint": [
          {
             "varName": "AgeFather",
             "Min": "32.000000",
             "Max": "45.000000"
          }, {
             "varName": "Age AD Start (weeks)",
             "Min": "14.000000",
             "Max": "30.000000"
          }
       ]
    }
    

    If you receive data from a server could use beforeLoadComplete in dataAdapter.
    Could read more about this in arcticle below:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm
    and here:
    http://www.jqwidgets.com/jquery-widgets-demo/documentation/jqxdataadapter/jqxdataadapter-api.htm

    I noticed something wrong in this code.
    Binding an event to ‘mouseenter’ event.
    I speak about these lines below:

    
    $(".innergrid").on('mouseenter', function () {
       currentDivID = this.id;
       //alert(currentDivID);
       value = "";
    
       $("#" + currentDivID).on('rowselect', function (event) {
       	var row = event.args.rowindex;
       	//var datarow = $("#grid2").jqxGrid('getrowdata', row);
       	value = $("#" + currentDivID).jqxGrid('getrowdata', row);
       	ROWSS = ROWSS + value;
       	var id = $("#gamegrid2").jqxGrid('getdatainformation').rowscount;
    
       	DELETE_ROW_ID = $("#" + currentDivID).jqxGrid('getrowid', row);
    
       	//alert(value);
       	if (COUNTER <= 0) {
          	$("#gamegrid2").jqxGrid('addrow', id, value);
    
          	COUNTER = 1;
          	$("#" + currentDivID).jqxGrid('deleterow', DELETE_ROW_ID);
               COUNTER = 0;
       	}
       });
    
       $("#" + currentDivID).on('mouseup', function (event) {
          $("#" + currentDivID).jqxGrid('clearselection');
       });
    });
    

    This ‘rowselect’ and ‘mouseup’ and will be invoke too many times and may result in an error.
    This approach is incorrect.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.