How do I configure a Kendo Grid dataSource to use the parameterMap functionality?

Question

I have a Kendo Grid and I want to pass a parameter to my Controller Action. I am able to use the transports read.data successfully but I'm trying to learn how to use the parameterMap functionality.

Here is what I have that works:

<script>
$(document).ready(function () {
    var employeeNumber = @(ViewBag.EmployeeNumber);  //passed in from controller
    $("#ShoppingCartGrid").kendoGrid({

        dataSource: {
            dataType: "json",
            type:"GET",
            transport: {
                read: {
                    url:"../Requisitions/GetShoppingCartSummary/",
                    data: {
                        employeeNumber:employeeNumber  //passing param this way works
                    },
                }

            },
            schema: {  
 ...... //omitted for brevity
 </script>

Here is what does not work but I don't know what I should put here:

<script>
$(document).ready(function () {
    var employeeNumber = @(ViewBag.EmployeeNumber);
    $("#ShoppingCartGrid").kendoGrid({

        dataSource: {
            dataType: "json",
            type:"GET",
            transport: {
                read: {
                    url:"../Requisitions/GetShoppingCartSummary/"

                },
                parameterMap:function(options,operation){  // here is where I'm 
                    if (operation == "read") {            // running into issues- even  
                        return employeeNumber:"140412"; // hard coding param- no joy
                    }
                };

            },
            schema: {
  ...... //omitted for brevity
  </script>

I have looked for hours for a solution but I can't seem to find a post that explains this concept well enough for me to grasp. Please don't send links to Kendo's documentation, been there, have the mental scars to prove it. Thanks for any suggestions.

Answer 1

Your transport datatype is Json, therefore you need to return valid Json parameters. Kendo appends result of function provided in parameterMap to the method name you defined in your url.

In your case - employeeNumber:"140412" is not a valid Json, you need to provide parmas in following format { paramname : value , otherparamname : value }.

It is very handy to use JSON.stringify(o) to get your params correct.

Below structure for parameterMap works for me:

parameterMap: function (o, operation) {
                        var output = null;
                        switch (operation) {
                            case "create":
                                output = '{ id: ' + JSON.stringify(o) + ' }';
                                break;
                            case "read":
                                output = '{ id: ' + globalVariable + ' ,  filters: ' + JSON.stringify(o) + '}';
                                break;
                            case "update":
                                output = '{ id:' + JSON.stringify(o) + '}';
                                break;
                            case "destroy":
                                output = '{ id : ' + o.param+ ' }';
                                break;
                        }
                        return output;
                    }

Bit more detail as per your comment :

 parameterMap: function (o, operation) {
                        var output = null;
                        switch (operation) {
                             case "read":
                             var txt1 = $('#myTextBox1').val();
                             var txt2 = $('#myTextBox2').val();
                             var txt3 = $('#myTextBox3').val();
                             output = '{ textBoxValue1: ' + txt1  + ', textBoxValue2: ' + txt2 + ',textBoxValue3: ' + txt3 + '}';
                              break;
                            }
                            return output;
                        }

Server side method signature should look like :

GetShoppingCartSummary(string textBoxValue1, string textBoxValue2, textBoxValue3);

Answer 2

OK, I figured it out. I had to enclose the return statement in curly brackets.

Here is what I ended up with that works:

 <script>
$(document).ready(function () {
    var employeeNumber = @(ViewBag.EmployeeNumber);
     $("#ShoppingCartGrid").kendoGrid({
        dataSource: {
            dataType: "json",
            type:"GET",
            transport: {
                read: {
                    url:"../Requisitions/GetShoppingCartSummary/"

                    },
                parameterMap:function(options,operation){
                    if (operation == "read") {
                       return{
                            employeeNumber:employeeNumber
                          };
                     };
                   }  //parameterMap
                }, //transport

        schema: {
....Omitted for Brevity
</script>

I would still like to figure out some other options like how to build an array of optional parameters and then return the array. But this is the answer to the question I asked. Hope it helps someone else.