Adding sub-grid breaks cellsrender variables

[MatthewVParticipant]

In my main grid I have a custom rendered cell using:

            {
                cellsrenderer: function (row, columnField, value, defaultHTML, columnProperties, rowData)
                {
                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                },
                dataField: "WeekOfDate1",
                text: "Pay Period Date",
                width: 115
            },

And this works fine, until I add in the hierarchy command for my dataAdapter so I can have a subgrid, once I do that rowData becomes undefined. Here is the dataAdapter code:

    var firstLevelEmployees = new $.jqx.dataAdapter({
        dataFields: [
            { name: "Employee", type: "string" },
            { name: "WeekOfDate1", type: "date" },
            { name: "HoursWorked1", type: "number" },
            { name: "Status1", type: "string" },
            { name: "WeekOfDate2", type: "date" },
            { name: "HoursWorked2", type: "number" },
            { name: "Status2", type: "string" },
            { name: "HasDirectReport", type: "bool" },
        ],
        dataType: "json",
        hierarchy:
        {
            root: "HasDirectReport"
        },
        id: "EmployeeID",
        url: "TimeOverviewGrid"
    });

How do I get the rowData grid in the cellsrender call when using a sub-grid?

[ChristopherParticipant]

Hi MatthewV,

rowData is undefined because the hierarchy you’ve set is probably incorect. Please provide the full code so we can review it and give you a solution, preferebly you could share a link to jsFiddle or jsEditor with your code.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

Hi Christopher,
I can’t do this in Fiddle as I am using ASP.NET so I will just post up my code here for you.

Grid:

$(document).ready(function ()
{
    var firstLevelEmployees = new $.jqx.dataAdapter({
        dataFields: [
            { name: "Employee", type: "string" },
            { name: "WeekOfDate1", type: "date" },
            { name: "HoursWorked1", type: "number" },
            { name: "Status1", type: "string" },
            { name: "WeekOfDate2", type: "date" },
            { name: "HoursWorked2", type: "number" },
            { name: "Status2", type: "string" },
            { name: "HasDirectReport", type: "bool" },
        ],
        dataType: "json",
        hierarchy:
        {
            root: "HasDirectReport"
        },
        id: "EmployeeID",
        url: "TimeOverviewGrid"
    });

    $("#TimeOverviewGrid").jqxGrid({
        autoheight: true,
        columns: [
            { dataField: "Employee", text: "Employee", width: 175 },
            {
                cellsrenderer: function (row, columnField, value, defaultHTML, columnProperties, rowData)
                {
                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                },
                dataField: "WeekOfDate1",
                text: "Pay Period Date",
                width: 115
            },
            { dataField: "HoursWorked1", text: "Hours Worked", width: 105 },
            { dataField: "Status1", text: "Status", width: 75 },
            {
                cellsrenderer: function (row, columnField, value, defaultHTML, columnProperties, rowData)
                {
                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                },
                dataField: "WeekOfDate2",
                text: "Pay Period Date",
                width: 115
            },
            { dataField: "HoursWorked2", text: "Hours Worked", width: 105 },
            { dataField: "Status2", text: "Status", width: 75 },
        ],
        initrowdetails: function (index, parentElement, gridElement, record)
        {
            var container = $("#TimeOverviewSubGrid" + index);

            if (record.records.length != 0)
            {
                if (container != null)
                {
                    container.jqxGrid({
                        autoheight: true,
                        columns: [
                            { dataField: "Employee", text: "Employee", width: 175 },
                            {
                                cellsrenderer: function (row, columnField, value, defaultHTML, columnProperties, rowData)
                                {
                                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                                },
                                dataField: "WeekOfDate1",
                                text: "Pay Period Date",
                                width: 115
                            },
                            { dataField: "HoursWorked1", text: "Hours Worked", width: 105 },
                            { dataField: "Status1", text: "Status", width: 75 },
                            {
                                cellsrenderer: function (row, columnField, value, defaultHTML, columnProperties, rowData)
                                {
                                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                                },
                                dataField: "WeekOfDate2",
                                text: "Pay Period Date",
                                width: 115
                            },
                            { dataField: "HoursWorked2", text: "Hours Worked", width: 105 },
                            { dataField: "Status2", text: "Status", width: 75 },
                        ],
                        source: new $.jqx.dataAdapter({
                            dataFields: [
                                { name: "Employee", type: "string" },
                                { name: "WeekOfDate1", type: "date" },
                                { name: "HoursWorked1", type: "number" },
                                { name: "Status1", type: "string" },
                                { name: "WeekOfDate2", type: "date" },
                                { name: "HoursWorked2", type: "number" },
                                { name: "Status2", type: "string" },
                            ],
                            dataType: "json",
                            id: "EmployeeID",
                            url: "TimeOverviewGrid"
                        }),
                        width: "100%"
                    });
                }
            } else
            {
                container.html("No Direct Reports");
            }
        },
        rowdetails: true,
        rowdetailstemplate:
        {
            rowdetails: '<div id="TimeOverviewSubGrid" style="margin: 0px;"></div>',
            rowdetailsheight: 20,
            rowdetailshidden: true
        },
        source: firstLevelEmployees,
        width: 795,
    });
});

ASP.Net to get data:

                    var TimeOverviewData = (from th1 in db.TimeCardHeaders
                                            join e in db.Employees on th1.EmployeeID equals e.ID
                                            join so1 in db.StatusOptions on th1.CurrentStatusID equals so1.ID
                                            join leftth2 in db.TimeCardHeaders.Where(timeCardHeader => timeCardHeader.WeekEndingDate == PayPeriod)
                                            on th1.EmployeeID equals leftth2.EmployeeID into leftjointh2
                                            from th2 in leftjointh2.DefaultIfEmpty()
                                            join so2 in db.StatusOptions on th2.CurrentStatusID equals so2.ID into leftjoinso2
                                            from th2Final in leftjoinso2.DefaultIfEmpty()
                                            where th1.WeekEndingDate == WeekBeforePayPeriod && (e.ID == EmployeeID || e.ManagerID == EmployeeID)
                                            orderby e.FirstName
                                            select new DashboardTimeOverviewVM()
                                            {
                                                EmployeeID = e.ID,
                                                Employee = string.Concat(e.FirstName, " ", e.LastName),
                                                WeekOfDate1 = th1.WeekEndingDate,
                                                HoursWorked1 = th1.TotalHoursWorked,
                                                Status1 = so1.Name,
                                                WeekOfDate2 = (th2 == null) ? PayPeriod : th2.WeekEndingDate,
                                                HoursWorked2 = (th2 == null) ? 0 : th2.TotalHoursWorked,
                                                Status2 = (th2Final == null) ? "New" : th2Final.Name,
                                                HasDirectReport = db.Employees.Where(employee => employee.ManagerID == EmployeeID).Any()
                                            }).ToList();

                    return Json(TimeOverviewData, JsonRequestBehavior.AllowGet);

`

JSON data returned:

[{"EmployeeID":89,"Employee":"Matthew Verstraete","WeekOfDate1":"\/Date(1475899200000)\/","HoursWorked1":40.00,"Status1":"Submitted","WeekOfDate2":"\/Date(1476504000000)\/","HoursWorked2":8.00,"Status2":"New","HasDirectReport":true}]

I set the hierarchy as a bool since I want to be able to dynamically pull the data for the subgrid when it is expanded. This actually works in the currnet code but when I have hierarchy enabled the rowData becomes undefined.

[MatthewVParticipant]

Based off another answer to another question I was able to use the row value to get this working with the following code:

cellsrenderer: function (row, columnField, value)
                {
                    var rowData = $("#TimeOverviewGrid").jqxGrid("getrowdata", row);
                    return '<div class="jqx-grid-cell-left-align" style="margin-top: 6px"><a href="/TimeCard/TimeEntry?selectedDate=' + firstLevelEmployees.formatDate(value, "MM-dd-yyyy") + '&selectedEmployeeID=' + rowData.EmployeeID + '">' + firstLevelEmployees.formatDate(value, "MM/dd/yyyy") + '</a></div>';
                },

[Author]

Posts