Setting params in Kendo UI Grid when calling a rest service [Workaround]

Question

I have a Kendo UI Grid that is calling a rest service. It works fine, as long as I do not try to use any params.

I know the the rest service is correct, as I can call it from a browser, and get correct results [depending on the param I send]. Also, when I look the server log I see that it is calling the rest service with no params.

My code is below:

document).ready( function() {


         var crudServiceBaseUrl = "rsPC.xsp",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: crudServiceBaseUrl + "/PCByStatus",
                                filter: {field: "status", value: "2" }                                  
                                dataType: "json",
                            update: {
                                url: crudServiceBaseUrl + "/PC/Update",
                                dataType: "json"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/PC/Destroy",
                                dataType: "json"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/PC/Create",
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        scrollable: {
                        virtual: true
                          },
                        height: 543,
                        schema: {
                            model: {
                                id: "PCId",
                                fields: {
                                    PCId: {type:"string"},
                                    serialNumber: {type: "string"},
                                    officeLoc: {type: "string"},
                                    unid: {type:"string"},
                                    model: {type:"string"},
                                    checkInDate: {type: "string"}
                                                }
                            }
                        }
                    });


    // Grid
    grid = $("#grid").kendoGrid( {   
        dataSource: dataSource,
        columns : [ {
            field : "serialNumber",
            title : "Serial Number"
        }, {
            field : "model",
            title : "Model"
        }, {
            field : "officeLoc",
            title : "Office Location"
        }, {
            field : "checkInDate",
            title : "Check In Date",
            template: "#= kendo.toString(kendo.parseDate(checkInDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"


        } ],

        pageable: {
             refresh: true,
             pageSizes: true,
             buttonCount: 5
         },
        dataBound : addExtraStylingToGrid,  
        reorderable : true,
        filterable : true,
        scrollable : true,
        selectable : true,
        sortable : true,            
    });

I still cannot get this to work and am a bit stumped.

I have two rest services, one returns all data, one takes "status" as a part and return a subset of the data that equals the parm.

The URL is:

http://localhost/scoApps/PC/PCApp.nsf/rsPC.xsp/PCByStatus?status=2

When entered into browser I get the correct number of records.

So I changed the code (see below). I have included all of the code for the CSJS:

$(document).ready( function() {
    // Double Click On row
    $("#grid").on(
            "dblclick",
            " tbody > tr",
            function() {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.dataItem($(this));
                window.location.replace("xpFormPC.xsp" + "?key=" + row.unid + "target=_self");                  
            });

    // Add hover effect
    addExtraStylingToGrid = function() {
        $("table.k-focusable tbody tr ").hover( function() {
            $(this).toggleClass("k-state-hover");
        });
    };

    // Search
    $("#search").keyup( function() {
        var val = $('#search').val();
        $("#grid").data("kendoGrid").dataSource.filter( {
            logic : "or",
            filters : [ {
                field : "serialNumber",
                operator : "contains",
                value : val
            }, {
                field : "officeLoc",
                operator : "contains",
                value : val
            }, {
                field : "model",
                operator : "contains",
                value : val
            } ]
        });
    });

    var crudServiceBaseUrl = "rsPC.xsp",
    dataSource = new kendo.data.DataSource({
        transport: {
        read:  {
        url: crudServiceBaseUrl + "/PCByStatus",
        dataType: "json"
    },
    update: {
        url: crudServiceBaseUrl + "/PC/Update",
        dataType: "json"
    },
    destroy: {
        url: crudServiceBaseUrl + "/PC/Destroy",
        dataType: "json"
    },
    create: {
        url: crudServiceBaseUrl + "/PC/Create",
        dataType: "json"
    },
    parameterMap: function(options, operation) {
        if (operation == "read"){
            options.field = "status"
                options.value = "2"
                    return options;
        }
        if (operation !== "read" && options.models) {
            return {models: kendo.stringify(options.models)};
        }
    }
    },
    batch: true,
    pageSize: 20,
    scrollable: {
        virtual: true
    },
    height: 543,
    schema: {
        model: {
        id: "PCId",
        fields: {
        PCId: {type:"string"},
        serialNumber: {type: "string"},
        officeLoc: {type: "string"},
        unid: {type:"string"},
        model: {type:"string"},
        checkInDate: {type: "string"}
    }
    }
    }
    });

    // Grid
    grid = $("#grid").kendoGrid( {   
        dataSource: dataSource,
        columns : [ {
            field : "serialNumber",
            title : "Serial Number"
        }, {
            field : "model",
            title : "Model"
        }, {
            field : "officeLoc",
            title : "Office Location"
        }, {
            field : "checkInDate",
            title : "Check In Date",
            template: "#= kendo.toString(kendo.parseDate(checkInDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"


        } ],
        pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    dataBound : addExtraStylingToGrid,  
    reorderable : true,
    filterable : true,
    scrollable : true,
    selectable : true,
    sortable : true     
    });

    // Edit
    function onEdit(e) {
    }

    // Change
    function onChange(args) {
        var model = this.dataItem(this.select());
        ID = model.ID;
    }
    ;

});

What am I doing wrong?

=========================================

I have a workaround. Or possibly this is the way it is supposed to be done.

var crudServiceBaseUrl = "rsPC.xsp", dataSource = new kendo.data.DataSource(
        {
            transport : {
            read : {
            url : crudServiceBaseUrl
            + "/PCByStatus?status=2",
            dataType : "json"
        },

Now I just construct the URL I want. Not so elegant I suppose, but it works.

Answer 1

I have a workaround. Or possibly this is the way it is supposed to be done.

var crudServiceBaseUrl = "rsPC.xsp", dataSource = new kendo.data.DataSource(
        {
            transport : {
            read : {
            url : crudServiceBaseUrl
            + "/PCByStatus?status=2",
            dataType : "json"
        },

Answer 2

Filter is used for client side data unless you set serverFiltering to true.

Here is the filter kendo documentation and the serverFiltering documentation.

I use parameterMap when I need to send parameters that are not created by filtering the control that I'm using. The kendo documentation provides an example using parameterMap.

Here is an example of how I've used it in the past:

var appsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: apiUrl + "App"
        },
        parameterMap: function (data, action) {
            if (action === "read") {
                data.lobid = lobId;
                data.parent = isParent;
                return data;
            } else {
                return data;
            }
        }
    }
});

Try changing the parameterMap:

parameterMap: function(options, operation) {
    if (operation == "read"){
        options.field = "status";
        options.value = "2";
        return options;
    }
    if (operation !== "read" && options.models) {
        return {models: kendo.stringify(options.models)};
    }
}

and update the read definition to remove filter. One thing to consider is that you are not returning anything from the read method if it doesn't meet the criteria of not being a read and options is not null. That leaves out any other combination that isn't obviously handled in your existing code.