Reload data in Grid based off datepicker event

[MatthewVParticipant]

I am trying to reload the data in the grid based off the onSelect event of the jQuery UI DatePicker. I have tried using both .jqxGrid(“refresh”); and .jqxGrid(“updatebounddata”); but it does not appear to be firing since the grid still displays no data even though I know the date I pick has data and if I hardcode the date into the source URL the data shows. What is the correct way of refreshing the grid?

Here is my JS code:

    $("#TimesheetDatePicker").datepicker(
    {
        onSelect: function (date)
        {
            $("#SelectedDate").val(date);
            $("#TimesheetOverviewGrid").jqxGrid("updatebounddata");
        }
    }).datepicker("setDate", $("#SelectedDate").val());

    var timesheetOverviewSource =
{
    datatype: "json",
    datafields:
    [
        { name: "ID", type: "int" },
        { name: "StartTime", type: "string" },
        { name: "EndTime", type: "string" },
        { name: "ProjectDescription", type: "string" },
        { name: "TaskDescription", type: "string" },
        { name: "WorkDescription", type: "string" },
        { name: "TimeWorked", type: "string" },
        { name: "Day", type: "string" }
    ],
    url: '/Timesheet/GetTimesheetOverview?selectedDate=' + $("#SelectedDate").val()
};

    var timesheetOverviewDataAdapter = new $.jqx.dataAdapter(timesheetOverviewSource);

    $("#TimesheetOverviewGrid").jqxGrid(
    {
        autoheight: true,
        columns:
        [
            { text: "Day", datafield: "Day", width: 85 },
            { text: "Start Time", datafield: "StartTime", width: 80 },
            { text: "End Time", datafield: "EndTime", width: 80 },
            { text: "Time Worked", datafield: "TimeWorked", width: 100 },
            { text: "Project", datafield: "ProjectDescription", width: 225 },
            { text: "Task", datafield: "TaskDescription", width: 225 },
            { text: "Work Description", datafield: "WorkDescription" }
        ],
        enablebrowserselection: true,
        pageable: false,
        source: timesheetOverviewDataAdapter,
        width: 1000
    });

[Peter StoevKeymaster]

Hi MatthewV,

We have not worked with that date picker so we do not know how to use it. If you use our jqxDateTimeInput, then you can bind to its “change” event which is raised when the date is changed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

Hello Peter,
The reload really has nothing to do with the DAteTimePicker code, I have tried binding it to a normal button click on an HTML button but the data is not refreshed. As you can see in my code I am using a dynamic URL as the source so the question is how do I regenerate that source URL and pull the new data and load it into the grid? The code as it stands now works, and when a new date is picked I can see the grid go to the “loading” screen but it pulls data for the wrong date since the URL is not regenerated.

Thank you,
Matthew

[Author]

Posts