Kendo dataSource Parameter Map

Question

I am new to kendo. I'm having a problem with model binding. When i debug with firebug, it shows options.models is undefined. Because of that reason the "if" condition in parrameterMap is always false and grid doesn't populate the data. But when i remove the parrameterMap part, it works. I think, it's very helpful if somebody can explain about the parameter map in kendo dataSource. Thank you.

    function GetDataSource() {
    var PrjKy = $("#cmbPrjNm").val();
    if (PrjKy == "") { PrjKy = 1; }

    var PrcsDetKy = 1;
    if (PrcsDetKy == "") { PrcsDetKy = 1; }

    var PrcsTypKy = $("#toDotype").val();
    if (PrcsTypKy == "") { PrcsTypKy = 1; }

    var AprPrtyKy = $("#cmbPiority").val();
    if (AprPrtyKy == "") { AprPrtyKy = 1; }

    var AprStsKy = $("#status").val();
    if (AprStsKy == "") { AprStsKy = 1; }

    var OrginAdrKy = 1;
    if (OrginAdrKy == "") { OrginAdrKy = 1; }

    var AprUsrKy = 1;
    if (AprUsrKy == "") { AprUsrKy = 1; }

    var NxtActByAdrKy = $("#cmbEmployee").val();
    if (NxtActByAdrKy == "") { NxtActByAdrKy = 1; }

    var FrmNxtActEntDt = $("#FrmNextActEnt").val();
    var ToNxtActEntDt = $("#ToNextActEnt").val();

    var FrmNxtActDt = $("#rcdDt").val();
    var ToNxtActDt = $("#toDt").val();

    var FrmInsertDt = $("#insrtDt").val();
    var ToInsertDt = $("#InsrtToDt").val();

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Content("~/User/GetAllToDo")',
                data: {
                    'PrjKy': PrjKy,
                    'PrcsDetKy': PrcsDetKy,
                    'PrcsTypKy': PrcsTypKy,
                    'AprPrtyKy': AprPrtyKy,
                    'AprStsKy': AprStsKy,
                    'OrginAdrKy': OrginAdrKy,
                    'AprUsrKy': AprUsrKy,
                    'NxtActByAdrKy': NxtActByAdrKy,
                    'FrmNxtActEntDt': FrmNxtActEntDt,
                    'ToNxtActEntDt': ToNxtActEntDt,
                    'FrmNxtActDt': FrmNxtActDt, //changed on 2013-8-30
                    'ToNxtActDt': ToNxtActDt, //changed on 2013-8-30
                    'FrmInsertDt': FrmInsertDt, //changed on 2013-8-30
                    'ToInsertDt': ToInsertDt//changed on 2013-8-30
                },
                dataType: "json"
            },
            update: {
                url: "~/Home/UpdateToDo",
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST"
            },
            create: {
                url: '@Url.Content("~/Home/UpdateToDo")',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: '@Url.Content("~/User/DeleteToDo")',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return JSON.stringify({ models: options });
                }
            }
        },
        pageSize: 10
    , schema:
    {
        model:
        {
            id: "PrcsDetKy", //Primary key to uniquely identify the row.
            fields: //Relavent fields of the grid should be bind with following model items
                {
                ID: { editable: false, nullable: false },
                NxtActEntDt: { editable: true, nullable: false, validation: { required: true} },
                AprPrty: { editable: true, nullable: false, validation: { required: true} },
                AprUsr: { editable: true, nullable: true },
                AprSts: { editable: true, nullable: true },
                AprStsKy: { editable: true, nullable: true },
                AprPrtyKy: { editable: true, nullable: true },
                AprUsrKy: { editable: true, nullable: true },
                AprResnKy: { editable: true, nullable: true },
                PrjId: { editable: true, nullable: true },
                TaskId: { editable: true, nullable: true },
                TaskNm: { editable: true, nullable: false }, //validation: { required: true}
                PrcsDetKy: { editable: false, nullable: false },
                TaskTyp: { editable: true, nullable: false },
                PrcsTypKy: { editable: true, nullable: true },
                PrjKy: { editable: true, nullable: true },
                PrcsDetAprKy: { editable: true, nullable: true },
                PrjNm: { editable: true, nullable: false, validation: { required: true} },
                Des: { editable: true, nullable: false },
                NxtActByAdr: { editable: true, nullable: false, validation: { required: true} },
                NxtActByAdrKy: { editable: true, nullable: true },
                NxtActDt: { editable: true, nullable: true },
                Rem: { editable: true, nullable: true, type: "string" },
                OriginBy: { editable: false, nullable: true },
                Hyperlinks1: { editable: false, nullable: true },
                Hyperlinks2: { editable: false, nullable: true },
                Hyperlinks3: { editable: false, nullable: true },
                Hyperlinks4: { editable: false, nullable: true },
                OrginAdrKy: { editable: true, nullable: true },
                WrkStnKy: { editable: true, nullable: true },
                ObjKy: { editable: true, nullable: true },
                ObjCd: { editable: true, nullable: true },
                ObjNm: { editable: true, nullable: true },
                ItmKy: { editable: true, nullable: true },
                ItmCd: { editable: true, nullable: true },
                IsAct: { editable: true, nullable: true },
                IsApr: { editable: true, nullable: true },
                OrgEntDt: { editable: true, nullable: true }
            }
        }
    }
    });
    return dataSource;
}

Answer 1

You can find quite clear explanation in here parameterMap

You should use parametrMap to define custom set of parameters or perform additional operations during the call to remote service. Basically here you saying, if I am reading, updating or deleting (this is the operation variable of value "read" in your snippet) I want to add following parameter(s) to the methods I defined in "transport".

In your case you didn't defined options.models so it seems, which means your datasource doesn't have any variable/collection models. Well it doesn't have to. To me it looks like the read method you trying to call doesn't really need any parameters so you might just return empty string from the paramMap or not to have this configuration section at all.

NOTE: the way you defined the datasource is bit confusing, you should not provide the configuration "data" when you defined the "url", eg. you are getting the data of the url. See Local vs Remote.

Answer 2

ParameterMap, as defined in Kendo documentation, is a function which converts the request parameters to a format suitable for the remote service.

In the format of the function, ParameterMap: function (options, operation){...}, the options parameter is a tricky one. In Kendo documentation, it is called data. However, developers choose to rename it as options as per their liking. However, no difference because it is just a parameter name.

The value of the options parameter depends upon what the transport section is doing. If it is a read operation, then kendo automatically populates it with fields like skip, take, page, pagesize etc. However, it depends whether the kendo grid has paging set to true, sorting set to true etc. So, it is actually smart enough to take these parameters automatically and pass it to the service.

In service, the function must be named exactly as what kendo names the parameter. Like skip, take, page etc by default. However, the parameter names can be changed by writing something like this: $top: data.take, as given in the documentation.

I am new to the concept as well and this is what I could gather. I wish I could get the below information in this article then it would have been a complete set.

• What is the complete list of options in case of read is paging and sorting set to true.
• What is the complete list of options in case of delete and update.