Formating date inside cellsrenderer

[MatthewVParticipant]

I have a date I want to show in MM/dd/yyyy format and this works fine until I need to do a custom render to make the date clickable to link to another page. When I add the cellsrenderer function it removes my formatting, I understand this is intentional but I still need to format the date. Is this possible to do in the cellsrenderer function?

$(document).ready(function () {
    $("#TimeOverviewGrid").jqxGrid({
        autoheight: true,
        width: 900,
        source: 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"
        }),
        columns: [
            { text: "Employee", dataField: "Employee", width: 200 },
            {
                text: "Week Of",
                dataField: "WeekOfDate1",
                cellsFormat: "MM/dd/yyyy",
                width: 100,
                cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                    return '<a href="/TimeCard/TimeEntry/">' + value + '</a>';
                }
            },
            { text: "Hours Worked", dataField: "HoursWorked1", width: 100 },
            { text: "Status", dataField: "Status1", width: 75 },
            {
                text: "Week Of",
                dataField: "WeekOfDate2",
                cellsFormat: "MM/dd/yyyy",
                width: 100,
                cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                    return '<a href="/TimeCard/TimeEntry/">' + value + '</a>';
                }
            },
            { text: "Hours Worked", dataField: "HoursWorked2", width: 100 },
            { text: "Status", dataField: "Status2", width: 75 },
            { text: "Estimated PTO", dataField: "PTO" }
        ]
    });
});

[DimitarParticipant]

Hello MatthewV,

Please try the following solution using the formatDate function:

$(document).ready(function() {
    var dataAdapter = 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: dataAdapter,
        columns: [{
            text: "Employee",
            dataField: "Employee",
            width: 200
        }, {
            text: "Week Of",
            dataField: "WeekOfDate1",
            cellsFormat: "MM/dd/yyyy",
            width: 100,
            cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
                return '<a href="/TimeCard/TimeEntry/">' + dataAdapter.formatDate(value, "MM/dd/yyyy") + '</a>';
            }
        }, {
            text: "Hours Worked",
            dataField: "HoursWorked1",
            width: 100
        }, {
            text: "Status",
            dataField: "Status1",
            width: 75
        }, {
            text: "Week Of",
            dataField: "WeekOfDate2",
            cellsFormat: "MM/dd/yyyy",
            width: 100,
            cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
                return '<a href="/TimeCard/TimeEntry/">' + dataAdapter.formatDate(value, "MM/dd/yyyy") + '</a>';
            }
        }, {
            text: "Hours Worked",
            dataField: "HoursWorked2",
            width: 100
        }, {
            text: "Status",
            dataField: "Status2",
            width: 75
        }, {
            text: "Estimated PTO",
            dataField: "PTO"
        }]
    });
});

Best Regards,
Dimitar

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

[MatthewVParticipant]

Thank you that did the trick.

[Author]

Posts