[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>';
                },

[MatthewVParticipant]

This is working, thank you.

[MatthewVParticipant]

I would like to request this a feature then.

[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]

Thanks, this is working now.

[MatthewVParticipant]

Ivailo, that does not give me the uid of the parent row that gives me the index. I need the uid to the parent row NOT the index. Please provide me with the proper command to get the uid as this is not documented any where I can find.

[MatthewVParticipant]

I have also tried this with the number in quotes but that does not work. How am I supposed to get the sub-grid to completely fill the container? Please show the proper command, this is not documented anywhere I can find.

[MatthewVParticipant]

When I do

        rowdetailstemplate:
        {
            rowdetails: '<div id="TimeOverviewSubGrid" style="margin: 10px;"></div>',
            rowdetailsheight: 100,
            rowdetailshidden: true,
            width: 100%
        },

I get a syntax error on the closing curly bracket. What is the correct code for specifying the width?

[MatthewVParticipant]

As stated in my first post, I want to make it so that when the row is expanded it does an AJAX call to get the JSON data for the sub grid. Is this possible and if so how?

[MatthewVParticipant]

[{“EmployeeID”:151,”Employee”:”Matthew Verstraete”,”WeekOfDate1″:”\/Date(1474689600000)\/”,”HoursWorked1″:40.00,”Status1″:”Submitted”,”WeekOfDate2″:”\/Date(1475294400000)\/”,”HoursWorked2″:17.50,”Status2″:”New”,”PTO”:0.00}]

That is the JSON for the first level of the grid.

[MatthewVParticipant]

That does not help at all, first off that is a very complex example and I am not doing anything that complex. Second that is using local array and I want to use JSON. I guess my question is not clear and since I can’t edit questions I will just start another one.

[MatthewVParticipant]

Based off another post I found about 30 minutes after making this one I have code that looks like it should work but the rows are not expanding when clicking on the blank column at the start of each row.

$(document).ready(function ()
{
    var firstLevelEmployees = new $.jqx.dataAdapter({
        dataType: "json",
        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: "PTO", type: "number" }
        ],
        id: "EmployeeID",
        url: "TimeOverviewGrid"
    });

    $("#TimeOverviewGrid").jqxGrid({
        autoheight: true,
        width: 900,
        source: firstLevelEmployees,
        rowdetails: true,
        initrowdetails: function (index, parentElement, gridElement, record)
        {
            var id = record.uid.toString();
            var grid = $($(parentElement).children()[0]);
            var secondLevelEmopyees = new $.jqx.dataAdapter({
                dataType: "json",
                dataFields: [
                    { name: "Employee", type: "string" },
                    { name: "WeekOfDate1", type: "date" },
                    { name: "HoursWorked1", type: "number" },
                    { name: "Status1", type: "string" },
                    { name: "WeekOfDate2", type: "number" },
                    { name: "HoursWorked2", type: "number" },
                    { name: "Status2", type: "string" },
                    { name: "PTO", type: "number" }
                ],
                id: "EmployeeID",
                url: "TimeOverviewGrid"
            });
            if (grid != null)
            {
                grid.jqx({
                    source: secondLevelEmopyees,
                    columns: [
            { text: "Employee", dataField: "Employee", width: 200 },
            { text: "Week Of", dataField: "WeekOfDate1" },
            { text: "Hours Worked", dataField: "HoursWorked1", width: 100 },
            { text: "Status", dataField: "Status1", width: 75 },
            { text: "Week Of", dataField: "WeekOfDate2", },
            { text: "Hours Worked", dataField: "HoursWorked2", width: 100 },
            { text: "Status", dataField: "Status2", width: 75 },
            { text: "Estimated PTO", dataField: "PTO" }
                    ]
                });
            }
        },
        columns: [
            { text: "Employee", dataField: "Employee", width: 200 },
            { text: "Week Of", dataField: "WeekOfDate1", },
            { text: "Hours Worked", dataField: "HoursWorked1", width: 100 },
            { text: "Status", dataField: "Status1", width: 75 },
            { text: "Week Of", dataField: "WeekOfDate2", },
            { text: "Hours Worked", dataField: "HoursWorked2", width: 100 },
            { text: "Status", dataField: "Status2", width: 75 },
            { text: "Estimated PTO", dataField: "PTO" }
        ]
    });
});

I know the sub-grid is calling into the same data as the top grid. I am doing this for simplicity at this point as I just want to get the grid working with data points I know work already

[MatthewVParticipant]

Thank you that did the trick.

[MatthewVParticipant]

Shame. I would rather not load a larger grid module just for access to the aggregates. I will look into the grid as well as other options that might reduce load on mobile users.

[MatthewVParticipant]

Thank you, I will take a look into those. Is there a way to access the Aggregate column (generated by ‘showAggregates: true’ value to use in the computer column?

[Author]

Posts