jQuery UI Widgets Forums Getting Started Nested Grid on a Nested Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 3 weeks, 1 day ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Nested Grid on a Nested Grid #104600

    kayceegan
    Participant

    Hi Team,

    I need your help. I have a nested grid on a grid, then a nested grid on a nested grid. I am using different dataAdapters on these grids. First grid is loading fine, when row is clicked nested grid (initrowdetails) will show and it loads fine, but when I click the nested grid for the other nested grid to show, it just keeps on loading and looping on my initrowdetails2. Please help. Here is my code.

    Note that dataTable_UsageByAgent() & dataTable_UsageByTeam() are located on a different cshtml file and returns a dataadapter.

    Hope to hear from you as soon as possible.

    var urlGridResults = ‘@Url.Content(“~/”)’ + ‘QBotReporting/GridResults’;
    var dateRange = $(‘#jqxDtiDateRange’).val().split(” – “);
    var report_name = $(“#jqxDdlReportName”).val();

    function dataTable_UsageBySite() {
    var source = {
    datatype: “json”,
    datafields: [
    { name: ‘Site’, type: ‘string’ },
    { name: ‘ConversationCount’, type: ‘string’ }
    ],
    id: null,
    url: urlGridResults,
    data: {
    startDate: dateRange[0],
    endDate: dateRange[1],
    reportName: report_name
    },
    root: ‘Rows’
    }

    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {
    if (dataAdapter.records.length == 0) {
    $(“#errorMessage”).text(“No data found!”);
    $(“#gridUsageBySite”).hide();
    $(“#GridToolbars”).hide();
    }
    else {
    $(“#errorMessage”).text(“”);
    $(“#gridUsageBySite”).show();
    $(“#GridToolbars”).show();
    }
    },

    loadError: function (xhr, status, error) {
    $(“#gridUsageBySite”).hide();
    $(“#errorMessage”).text(error);
    }
    });
    return dataAdapter;

    }

    var initrowdetails2 = function (index, parentElement, gridElement, record) {
    //var gridAgent = $($(parentElement).children()[0]);
    var gridAgent = $($.find(‘#subgrid’ + index))
    debugger;
    if (gridAgent != null) {
    gridAgent.jqxGrid({
    source: dataTable_UsageByAgent(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
    columns: [
    { text: ‘Agent Name’, dataField: ‘AgentName’ },
    { text: ‘Department’, dataField: ‘Department’, hidden: true },
    //{ text: ‘Site’, dataField: ‘Site’ },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });
    gridAgent.on(‘bindingcomplete’, function (event) {
    $(“#errorMessage”).text(“”);
    var filtergroup3 = new $.jqx.filter();
    var filter3 = filtergroup3.createfilter(‘stringfilter’, record.Department.toString(), ‘EQUAL’);
    filtergroup3.addfilter(1, filter3);
    try { gridAgent.jqxGrid(‘addfilter’, ‘Department’, filtergroup3); } catch (e) {
    alert(e);
    }// add the filters.
    gridAgent.jqxGrid(‘applyfilters’);// apply the filters.
    return;
    });

    }
    }

    var initrowdetails = function (index, parentElement, gridElement, record) {
    var gridTeam = $($(parentElement).children()[0]);
    if (gridTeam != null) {
    gridTeam.jqxGrid({
    source: dataTable_UsageByTeam(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
    initrowdetails: initrowdetails2,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    columns: [
    { text: ‘Department’, dataField: ‘Department’ },
    { text: ‘Site’, dataField: ‘Site’, hidden: true },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });
    gridTeam.on(‘bindingcomplete’, function (event) {
    $(“#errorMessage”).text(“”);
    var filtergroup2 = new $.jqx.filter();
    var filter2 = filtergroup2.createfilter(‘stringfilter’, record.Site.toString(), ‘EQUAL’);
    filtergroup2.addfilter(1, filter2);
    try { gridTeam.jqxGrid(‘addfilter’, ‘Site’, filtergroup2); } catch (e) {
    alert(e);
    }// add the filters.
    gridTeam.jqxGrid(‘applyfilters’);// apply the filters.
    });

    }
    }

    $(“#gridUsageBySite”).jqxGrid({
    source: dataTable_UsageBySite(),
    width: ‘99%’,
    enabletooltips: true,
    autoheight: true,
    sortable: true,
    filterable: true,
    pageable: true,
    showfilterrow: false,
    filtermode: ‘default’,
    initrowdetails: initrowdetails,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    columns: [
    { text: ‘Site’, dataField: ‘Site’ },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });

    Nested Grid on a Nested Grid #104622

    Peter Stoev
    Keymaster
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.