jQuery UI Widgets Forums Grid Nested grid data binding issue

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Nested grid data binding issue #101805

    jumpstart
    Participant

    We are using nested grid functionality. Entire data will be fetched from database only.
    Here, we are able to bind 1st table, but not able to bind nested grid data.
    We are following jqxgrid’s “nested grid” functionality ==>
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/nestedgrids.htm

    Here, we are going to pass “id” of parent table to child table to bind inner grid. Please find the code below.

    var url = “main_data.php”;
    var source =
    {
    datafields: [
    { name: ‘id’, type: ‘int’ },
    { name: ‘name’, type: ‘string’ },
    ],
    root: ‘ids’,
    id: ‘id’,
    datatype: ‘json’,
    async: false,
    url: url
    };
    var parentDataAdapter = new $.jqx.dataAdapter(source);
    var nesteddetailsurl = “nested_data.php”;
    var nestedSource =
    {
    datafields: [
    { name: ‘id’, type: ‘int’ },
    { name: ‘name’, type: ‘string’ },
    { name: ‘parent_id’, type: ‘int’ },
    ],

    root: ‘ids’,
    record: ‘id’,
    datatype: “json”,
    url: nesteddetailsurl,
    async: false
    };

    var childDataAdapter = new $.jqx.dataAdapter(nestedSource, { autoBind: true });
    c_records = childDataAdapter.records;

    var nestedGrids = new Array();
    var initrowdetails = function (index, parentElement, gridElement, record) {

    var id = parseInt(record.uid);
    var grid = $($(parentElement).children()[0]);
    nestedGrids[index] = grid;
    var filtergroup = new $.jqx.filter();
    var filtervalue = id;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(‘numericfilter’, filtervalue, filtercondition);

    // fill the c_records depending on the id.
    var recordsbyid = [];

    for (var a = 0; a < c_records.length; a++)
    {
    var result = filter.evaluate(c_records[a][“id”]);
    if (result)
    {
    recordsbyid.push(c_records[a]);
    }
    }

    var nestedSource = { datafields: [
    { name: ‘id’, type: ‘int’ },
    { name: ‘name’, type: ‘string’ },
    { name: ‘parent_id’, type: ‘int’ },
    ],
    // id: ‘id’,
    localdata: recordsbyid
    }
    var nestedGridAdapter = new $.jqx.dataAdapter(nestedSource);
    if (grid != null)
    {
    grid.jqxGrid(
    {
    source: nestedGridAdapter, width: 780, height: 100,
    columns: [
    { text: ‘ID’, datafield: ‘id’, width: 200 },
    { text: ‘NAME’, datafield: ‘name’, width: 200 },
    ]
    });
    }
    }

    // creage grid
    $(“#data_grid”).jqxGrid(
    {
    width: ‘70%’,
    height: ‘50%’,
    source: source,
    rowdetails: true,
    rowsheight: 30,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: true },
    columns: [
    { text: ‘ID’, datafield: ‘id’, width: 100 },
    { text: ‘NAME’, datafield: ‘name’, width: 200 },
    ]
    });

    Nested grid data binding issue #101830

    Hristo
    Participant

    Hello jumpstart,

    Is there any error message in the console?
    Could you clarify it?

    Also, I would like to suggest you look at this topic, that could be helpful:
    https://www.jqwidgets.com/community/topic/multi-level-nested-grid/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.