jQWidgets Forums

jQuery UI Widgets Forums Grid N-Nested jqxgrids

This topic contains 8 replies, has 3 voices, and was last updated by  ali.kakhan 10 years, 1 month ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • N-Nested jqxgrids #25678

    ssp
    Participant

    Hi,

    I got the solution posted in http://www.jqwidgets.com/community/topic/filter-n-tier-nested-grid/#post-26101

    But right now my issue is, in initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

    Do you see anything wrong with the code?

    N-Nested jqxgrids #25825

    Peter Stoev
    Keymaster

    Hi Sandhya S P,

    “getrowdata” does not return information about the row details. Row details can be initialized only in the “initrowdetails” callback function. If you want to store some information about the details and your initialization, then you will have to store that information in some custom variables or arrays. You may define these before the “initrowdetails” callback and will your custom Array in that function.

    Best Regards,
    Peter Stoev

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

    N-Nested jqxgrids #25937

    ssp
    Participant

    Hi Peter,

    Thanks & Regards,

    Sandhya S P

    N-Nested jqxgrids #25957

    ssp
    Participant

    Hi Peter,

    I was facing the same issue posted in http://www.jqwidgets.com/community/topic/filter-n-tier-nested-grid/#post-25956 and glad the working solution was posted which helped me a lot!!!

    Perhaps, now I am facing an weird issue in one scenario, plz suggest if you could rectify my mistake!

    Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
    grid21 has subgrid grid31 and
    grid22 has subgrid grid32 at initlevel3,

    If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
    but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

    // create third nested grid.
    var initlevel3 = function (index,parentElement, gridElement, datarecord) {
    var row3 = index;
    alert(“index:” +index);

    var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
    alert(“projectNumber:” +id1);
    var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
    alert(“projectRevisionId:” +id2);
    var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
    alert(“location:” +id3);

    thirdGrid = $($.find(‘#jqxThirdGrid’ + index));

    thirdGrid.bind(‘bindingcomplete’, function (event) {
    if (event.target.id == “jqxThirdGrid” + index) {
    thirdGrid.jqxGrid(‘beginupdate’);
    var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
    for (var i = 0; i < datainformation.rowscount; i++) {
    var hidden = true;
    thirdGrid.jqxGrid('setrowdetails', i, "

    “, 220, hidden);
    }
    thirdGrid.jqxGrid(‘endupdate’);
    }
    });

    if (thirdGrid != null) {

    var sourceThirdGrid =
    {
    //data: {ProjectRevisionid: id1},
    datatype: “json”,
    cache: false,
    datafields: [
    { name: ‘projectNumber’ },
    {name: ‘projectRevisionId’},
    { name: ‘location’ },
    { name: ‘jobName’ },
    { name: ‘hours’ },
    { name: ‘hoursDifference’ },
    { name: ‘total’ },
    { name: ‘costDiff’ },
    { name: ‘jobId’}
    ],
    cache: false,
    url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id1 +’&projectRevisionId=’+id2+’&location=’+id3
    };
    var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);

    // init Orders Grid
    thirdGrid.jqxGrid(
    {
    width : 859,
    height : 235,
    source : thirdGridAdapter,
    theme : ‘classic’,
    rowdetails: true,
    initrowdetails: initlevel4,
    showstatusbar : true,
    statusbarheight : 00,
    showaggregates : true,
    rendergridrows: function () {
    return thirdGridAdapter.records;
    },
    selectionmode : ‘multiplecellsadvanced’,
    columns: [
    { text: ‘Location’, datafield: ‘location’, cellsformat: ‘d’, width: 150 },
    { text: ‘Global Skill’, datafield: ‘jobName’, width: 150 },
    { text: ‘Hours’, datafield: ‘hours’, width: 100 },
    { text: ‘Hour Difference’, datafield: ‘hoursDifference’, width: 100 },
    { text: ‘Total Cost(KEuro)’, datafield: ‘total’, width: 100 },
    { text: ‘Cost Difference’, datafield: ‘costDiff’, width: 100 },
    { text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

    ]
    });
    }
    };

    var initlevel2 = function (index) {
    var row2 = index;
    alert(“index:” +index);
    var id = $(“#jqxFirstgridHistory”).jqxGrid(‘getrowdata’, row2)[‘projectNumber’];
    alert(“jqxprojectNumber:”+id);

    secGrid = $($.find(‘#jqxSecGrid’ + index));

    secGrid.bind(‘bindingcomplete’, function (event) {

    if (event.target.id == “jqxSecGrid” + index) {
    secGrid.jqxGrid(‘beginupdate’);
    var datainformation = secGrid.jqxGrid(‘getdatainformation’);
    for (var i = 0; i < datainformation.rowscount; i++) {
    var hidden = true;
    secGrid.jqxGrid('setrowdetails', i, "

    “, 220, hidden);
    }
    secGrid.jqxGrid(‘endupdate’);
    }
    });

    Thanks & Regards,

    Sandhya S P

    N-Nested jqxgrids #26100

    ssp
    Participant

    Hi,

    In my following code, after the alert messages are displayed, it is calling the URL twice!!
    I am Not able to rectify the problem behind this..
    plz suggest if its gridElement responsible for causing this issue?

    // create third nested grid.
    var initlevel3 = function (index,parentElement, gridElement, datarecord) {
    var row3 = index;
    alert(“index:” +index);

    var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
    alert(“projectNumber:” +id1);
    var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
    alert(“projectRevisionId:” +id2);
    var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
    alert(“location:” +id3);

    thirdGrid = $($.find(‘#jqxThirdGrid’ + index));

    thirdGrid.bind(‘bindingcomplete’, function (event) {
    if (event.target.id == “jqxThirdGrid” + index) {
    thirdGrid.jqxGrid(‘beginupdate’);
    var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
    for (var i = 0; i < datainformation.rowscount; i++) {
    var hidden = true;
    thirdGrid.jqxGrid('setrowdetails', i, "
    “, 220, hidden);
    }
    thirdGrid.jqxGrid(‘endupdate’);
    }
    });

    if (thirdGrid != null) {

    var sourceThirdGrid =
    {
    //data: {ProjectRevisionid: id1},
    datatype: “json”,
    cache: false,
    datafields: [
    { name: 'projectNumber' },
    {name: 'projectRevisionId'},
    { name: 'location' },
    { name: 'jobName' },
    { name: 'hours' },
    { name: 'hoursDifference' },
    { name: 'total' },
    { name: 'costDiff' },
    { name: 'jobId'}
    ],
    cache: false,
    url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id1 +’&projectRevisionId=’+id2+’&location=’+id3
    };
    var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);

    // init Orders Grid
    thirdGrid.jqxGrid(
    {
    width : 859,
    height : 235,
    source : thirdGridAdapter,
    theme : ‘classic’,
    rowdetails: true,
    initrowdetails: initlevel4,
    showstatusbar : true,
    statusbarheight : 00,
    showaggregates : true,
    rendergridrows: function () {
    return thirdGridAdapter.records;
    },
    selectionmode : ‘multiplecellsadvanced’,
    columns: [
    { text: ‘Location’, datafield: ‘location’, cellsformat: ‘d’, width: 150 },
    { text: ‘Global Skill’, datafield: ‘jobName’, width: 150 },
    { text: ‘Hours’, datafield: ‘hours’, width: 100 },
    { text: ‘Hour Difference’, datafield: ‘hoursDifference’, width: 100 },
    { text: ‘Total Cost(KEuro)’, datafield: ‘total’, width: 100 },
    { text: ‘Cost Difference’, datafield: ‘costDiff’, width: 100 },
    { text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

    ]
    });
    }
    };

    Thanks & Regards,

    Sandhya S P

    N-Nested jqxgrids #26164

    ssp
    Participant

    Hi,

    I got the solution posted in http://www.jqwidgets.com/community/topic/filter-n-tier-nested-grid/#post-26101

    But right now my issue is, in initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

    Do you see anything wrong with the code?

    N-Nested jqxgrids #26551

    ssp
    Participant

    ssp

    Hi,

    I am facing an weird issue in one scenario, plz suggest if you could rectify my mistake!

    Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
    grid21 has subgrid grid31 and
    grid22 has subgrid grid32 at initlevel3,

    If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
    but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

    In my following code, after the alert messages are displayed, it is calling the URL twice!!
    I am Not able to rectify the problem behind this..
    plz suggest if its gridElement responsible for causing this issue?

    // create third nested grid.
    var initlevel3 = function (index,parentElement, gridElement, datarecord) {
    var row3 = index;
    alert(“index:” +index);
    var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)['projectNumber'];
    alert(“projectNumber:” +id1);
    var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)['projectRevisionId'];
    alert(“projectRevisionId:” +id2);
    var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)['location'];
    alert(“location:” +id3);
    thirdGrid = $($.find(‘#jqxThirdGrid’ + index));
    thirdGrid.bind(‘bindingcomplete’, function (event) {
    if (event.target.id == “jqxThirdGrid” + index) {
    thirdGrid.jqxGrid(‘beginupdate’);
    var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
    for (var i = 0; i < datainformation.rowscount; i++) {
    var hidden = true;
    thirdGrid.jqxGrid('setrowdetails', i, "
    “, 220, hidden);
    }
    thirdGrid.jqxGrid(‘endupdate’);
    }
    });
    if (thirdGrid != null) {
    var sourceThirdGrid =
    {
    //data: {ProjectRevisionid: id1},
    datatype: “json”,
    cache: false,
    datafields: [
    { name: 'projectNumber' },
    {name: 'projectRevisionId'},
    { name: 'location' },
    { name: 'jobName' },
    { name: 'hours' },
    { name: 'hoursDifference' },
    { name: 'total' },
    { name: 'costDiff' },
    { name: 'jobId'}
    ],
    cache: false,
    url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id1 +’&projectRevisionId=’+id2+’&location=’+id3
    };
    var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);
    // init Orders Grid
    thirdGrid.jqxGrid(
    {
    width : 859,
    height : 235,
    source : thirdGridAdapter,
    theme : ‘classic’,
    rowdetails: true,
    initrowdetails: initlevel4,
    showstatusbar : true,
    statusbarheight : 00,
    showaggregates : true,
    rendergridrows: function () {
    return thirdGridAdapter.records;
    },
    selectionmode : ‘multiplecellsadvanced’,
    columns: [
    { text: 'Location', datafield: 'location', cellsformat: 'd', width: 150 },
    { text: 'Global Skill', datafield: 'jobName', width: 150 },
    { text: 'Hours', datafield: 'hours', width: 100 },
    { text: 'Hour Difference', datafield: 'hoursDifference', width: 100 },
    { text: 'Total Cost(KEuro)', datafield: 'total', width: 100 },
    { text: 'Cost Difference', datafield: 'costDiff', width: 100 },
    { text: 'ProjectRevisionId', datafield: 'projectRevisionId', width: 150 }
    ]
    });
    }
    };

    Thanks & Regards,

    Sandhya S P

    N-Nested jqxgrids #70390

    ali.kakhan
    Participant

    I am currently having issue regarding nested jqxgrid. I am using JSON as a data source. I am getting empty nested grid. bellow is my code.

    var source =
    {
    datafields: [
    { name: ‘ID’, type: ‘string’ },
    { name: ‘ProductID’, type: ‘string’ },
    { name: ‘ProductNumber’, type: ‘string’ },
    { name: ‘ProductDesc’, type: ‘string’ },
    { name: ‘OwnerCompanyID’, type: ‘string’ },
    { name: ‘Status’, type: ‘string’ },
    { name: ‘Operation’, type: ‘string’ },
    { name: ‘Date’, type: ‘string’ },
    { name: ‘Comments’, type: ‘string’ }
    ],
    datatype: ‘json’,
    localdata: data

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

    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();

    var grid = $($(parentElement).children()[0]);

    var nestedSource =
    {
    datafields: [
    { name: ‘ProductREFID’, map: ‘ProductREFID’, type: ‘string’ },
    { name: ‘IngredientName’, map: ‘IngredientName’, type: ‘string’ },
    { name: ‘ID’, map: ‘ID’, type: ‘string’ }
    ],
    datatype: ‘json’,
    root: ‘_refListID’,
    async:true,
    localdata: data[index]._refListID

    };

    var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
    if (grid != null) {
    grid.jqxGrid({
    source: nestedAdapter, width: 600, height: 200,
    columns: [
    { text: “ProductREFID”, datafield: “ProductREFID” },
    { text: “IngredientName”, datafield: “IngredientName” },
    { text: “ID”, datafield: “ID” }
    ]
    });
    }
    }
    // creage jqxgrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    height: 365,
    source: source,
    rowdetails: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    ready: function () {
    $(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
    },
    columns: [
    { text: ‘ID’, datafield: ‘ID’, width: 150 },
    { text: ‘ProductID’, datafield: ‘ProductID’, width: 150 },
    { text: ‘ProductNumber’, datafield: ‘ProductNumber’, width: 150 },
    { text: ‘ProductDesc’, datafield: ‘ProductDesc’, width: 150 },
    { text: ‘OwnerCompanyID’, datafield: ‘OwnerCompanyID’, width: 150 },
    { text: ‘Status’, datafield: ‘Status’, width: 150 },
    { text: ‘Operation’, datafield: ‘Operation’, width: 150 },
    { text: ‘Date’, datafield: ‘Date’, width: 150 },
    { text: ‘Comments’, datafield: ‘Comments’, width: 150 },
    ]
    });

    });

    N-Nested jqxgrids #70393

    ali.kakhan
    Participant

    Hi all,
    I have managed to solve the problem.

    localdata:data[index][“_refListID”]

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

You must be logged in to reply to this topic.