jQuery UI Widgets Forums Grid Formating date inside cellsrenderer

This topic contains 2 replies, has 2 voices, and was last updated by  MatthewV 7 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Formating date inside cellsrenderer #87667

    MatthewV
    Participant

    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" }
            ]
        });
    });
    Formating date inside cellsrenderer #87716

    Dimitar
    Participant

    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/

    Formating date inside cellsrenderer #87730

    MatthewV
    Participant

    Thank you that did the trick.

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

You must be logged in to reply to this topic.