Refresh data in table from button click.

[MatthewVParticipant]

I want to have my users be able to select a new date then hit the “refresh” button and have the data inside my table reloaded with the new info based off the date provided. I have tried having the button call both the $("#TimesheetWeeklyOverview").jqxDataTable("refresh"); and $("#TimesheetWeeklyOverview").jqxDataTable("updateBoundData"); commands but there is no effect even though I know the date given is good and has a different data set. I can run an alert before and after the jqx command and those work fine. What command do I use to refresh the data?

$("#TimesheetWeeklyOverview").jqxDataTable(
    {
        width: 850,
        pagerButtonsCount: 10,
        source: new $.jqx.dataAdapter({
            dataType: "json",
            dataFields: [
                { name: "HoursWorked", type: "number" },
                { name: "ProjectCode", type: "string" },
                { name: "ProjectDescription", type: "string" },
                { name: "TaskCode", type: "string" },
                { name: "TaskDescription", type: "string" },
                { name: "WeekdayName", type: "string" },
                { name: "WorkDescription", type: "string" }
            ],
            id: "ID",
            url: "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val()
        }),
        columnsResize: true,
        columns: [
            { text: "Project Code", dataField: "ProjectCode" },
            { text: "Project Description", dataField: "ProjectDescription" },
            { text: "Task Code", dataField: "TaskCode" },
            { text: "Task Description", dataField: "TaskDescription" },
            { text: "Day Worked", dataField: "WeekdayName" },
            { text: "Hours Worked", dataField: "HoursWorked" },
            { text: "Work Description", dataField: "WorkDescription" }
        ]
    });

[DimitarParticipant]

Hello MatthewV,

Please try the following approach:

var source = {
    dataType: "json",
    dataFields: [{
        name: "HoursWorked",
        type: "number"
    }, {
        name: "ProjectCode",
        type: "string"
    }, {
        name: "ProjectDescription",
        type: "string"
    }, {
        name: "TaskCode",
        type: "string"
    }, {
        name: "TaskDescription",
        type: "string"
    }, {
        name: "WeekdayName",
        type: "string"
    }, {
        name: "WorkDescription",
        type: "string"
    }],
    id: "ID",
    url: "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val()
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#TimesheetWeeklyOverview").jqxDataTable({
    width: 850,
    pagerButtonsCount: 10,
    source: dataAdapter,
    columnsResize: true,
    columns: [{
        text: "Project Code",
        dataField: "ProjectCode"
    }, {
        text: "Project Description",
        dataField: "ProjectDescription"
    }, {
        text: "Task Code",
        dataField: "TaskCode"
    }, {
        text: "Task Description",
        dataField: "TaskDescription"
    }, {
        text: "Day Worked",
        dataField: "WeekdayName"
    }, {
        text: "Hours Worked",
        dataField: "HoursWorked"
    }, {
        text: "Work Description",
        dataField: "WorkDescription"
    }]
});

$('#refreshButton').click(function() {
    source.url = "/Timesheet/TimesheetWeeklyOverview?selectedEmployeeId=" + $("#SelectedEmployeeID").val() + "&selectedDate=" + $("#SelectedDate").val();
    dataAdapter.dataBind();
    $("#TimesheetWeeklyOverview").jqxDataTable("updateBoundData");
});

Best Regards,
Dimitar

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

[Author]

Posts