Question

I hope my title isn’t too confusing. An example first. I have the following code that configures the read operation for a Kendo UI data source. I am trying to filter all reads based on the selected company id, but my getSelectedCompanyId function is only ever called once, when the page loads. The code below is too long to include all here, so just an excerpt.

$(function () {
    function getSelectedCompanyId() {
        var id = $("#CompanyId").val();
        return id;
    }

    $("#CompanyId").kendoDropDownList({
        change: function () {
            grid.dataSource.read();
        }
    });
    var departmentIndexDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("ListForCompanyIdJson", "Department")' + '?companyId=' + getSelectedCompanyId(),
                type: "GET"
            },

The ListForCompanyIdJson action is always called with the value selected in the dropdown when $("#CompanyId").kendoDropDownList() is called. I want this function to be called whenever I call grid.dataSource.read().

I realize this might be highly specific to the Kendo stuff, but maybe it’s something I can solve with plain JavaScript closures and some help.

Answer 1

You could install a replacement function for grid.dataSource.read() that always calls your function first and then calls grid.dataSource.read().

For example:

grid.dataSource.oldRead = grid.dataSource.read;
grid.dataSource.read = function() {
    // call your function here
    return grid.datasource.oldRead.apply(this, arguments);
}

Or, if you want to be able to call one sometimes and one other times, you can just make a new method that provides the new behavior and use it when you want to:

grid.dataSource.myread = function() {
    // call your function here
    return grid.datasource.read.apply(this, arguments);
}