Why doesn't parameter map transform my data?

3 posts, 0 answers
  1. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 26 Sep Link to this post

    $("#groups-no-dropdown").kendoComboBox({
                    filter: "contains",
                    ignoreCase: true,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    minLength: 3,
                    enforceMinLength: true,
                    footerTemplate: 'Total #: instance.dataSource.total() # items found',
                    template: '<span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.Id #</p></span>',
                    placeholder: "Enter a Group Name...",
                    filtering: function(e) {
                        console.log(e);
                    },
                    dataSource: {
                        transport: {
                            read: {
                                dataType: "json",
                                url: '@Url.Action("GetData", "Groups")',
                                type: "POST"
                            }
                        },
                        parameterMap: function (data, type) {
                            console.log(data);
                            data = kendo.stringify({ request: { filter: data.filter.field + "~" + data.filter.operator + "~'" + data.filter.value + "'" } });
                            console.log(data);
                            return data;
     
                        },
                        serverFiltering: true,
                        schema: {
                            type: "json",
                            data: "Data",
                            total: "Total",
                            model: {
                                fields: {
                                    Id: { field: "Id", type: "guid" },
                                    Name: { field: "Name", type: "string" }
                                }
                            }
                        },
                        sort: { field: "Name", dir: "asc" }
                    },
                    height: 400
                });ue

     

    The above is my combobox. You can see parameter map, but regardless if I remove parameter map or not. The data gets posted as:

    filter[logic]:and
    filter[filters][0][value]:eng
    filter[filters][0][field]:Name
    filter[filters][0][operator]:contains
    filter[filters][0][ignoreCase]:true

    Also why is the posted data different from data in the parameter map function? It seems like additional processing is happening. Here is what is spit out to console inside parameterMap function:

    {filter: {…}, sender: init, _defaultPrevented: false, preventDefault: ƒ, isDefaultPrevented: ƒ}
    filter:{value: "eng", field: "Name", operator: "contains", ignoreCase: true}
    isDefaultPrevented:ƒ ()
    preventDefault:ƒ ()
    sender:init {ns: ".kendoComboBox", element: I.fn.init(1), _events: {…}, options: {…}, _isSelect: false, …}
    _defaultPrevented:false
    __proto__: Object

     

    Which is structured differently than what is being posted.
  2. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 26 Sep Link to this post

    Well I realize my console.log command was from filtering: property. So maybe the data is formatted the same, but why can't I console.log or debugger; in the parameterMap function then too?
  3. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 28 Sep Link to this post

    Hello Andrew,

    The problem comes from the parameterMap location in the DataSource definition. The parameterMap has to be declared as a property of the transport:
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: '@Url.Action("GetData", "Groups")',
                type: "POST"
            },
            parameterMap: function (data, type) {
                console.log(data);
                data = kendo.stringify({ request: { filter: data.filter.field + "~" + data.filter.operator + "~'" + data.filter.value + "'" } });
                console.log(data);
                return data;
     
            },
        },
        serverFiltering: true,
        schema: {
            type: "json",
            data: "Data",
            total: "Total",
            model: {
                fields: {
                    Id: { field: "Id", type: "guid" },
                    Name: { field: "Name", type: "string" }
                }
            }
        },
        sort: { field: "Name", dir: "asc" }
    }


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top