kendo ui grid row filterable 不会过滤复杂的对象

Question

iam trying to row filter the column Mid which is an complex object containg two properties { Id: 0, Name: "Select MID" }

now when i type some value in the filter input iam gettig this exeption

VM1033:3 Uncaught TypeError: (d.Mid || "").toLowerCase is not a function

iam geussing this is because Mid is an object and not a premetive type

any ideas ?

thank u

this is my grid:

$("#grid_1").kendoGrid({
    dataSource: {
        dataType: "d",
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/Read",

            },
            update: {
                url: crudServiceBaseUrl + "/Update",
                type: "post",
                contentType: "application/json; charset=utf-8",
                complete: function (e) {

                    jQuery("#load_balancer_grid").data("kendoGrid").dataSource.read();

                }
            },
            create: {
                url: crudServiceBaseUrl + "/Create",
                type: "post",
                contentType: "application/json; charset=utf-8",
                complete: function (e) {

                    jQuery("#load_balancer_grid").data("kendoGrid").dataSource.read();

                }
            },
            destroy: {
                url: crudServiceBaseUrl + "/Delete",
                dataType: "d"
            },
            parameterMap: function (options, operation) {

            }

        },

        batch: true,
        pageSize: 100,
        schema: {
            model: {
                id: "MidGroupId",
                fields: {
                    MidGroupId: { validation: { required: true }, editable: true, type: "number" },
                    Mid: { validation: { required: true }, editable: true, defaultValue: { Id: 0, Name: "Select MID" } },

                    RouteSales: {
                        type: "boolean",
                        parse: function (value) {
                            if (value != null) {
                                return value || false;
                            }
                            return value;
                        },
                        nullable: true
                    },
                    RouteRebills: { type: "boolean" },
                    QueueRebills: { type: "boolean" },
                  //  ResetCounters: { type: "boolean" },
                    
                }
            }
        }
    },
    sortable: true,
    batch: true,

    groupable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },

        filterable: {
                    mode: "row"
                },
    toolbar: kendo.template($("#template").html()),

    edit: function(e) {
        if (e.model.isNew() == false) {
         
            $(e.container.find("input[name=MidGroupId]")).attr('disabled', 'disabled');
            $(e.container.find("input[name=Mid]")).attr('disabled', 'disabled');
            $(e.container.find("input[name=CardType]")).attr('disabled', 'disabled');
        }
    },
    columns: [
       {
           field: "MidGroupId", type: "number"
       },
              {
                  field: "Mid", editor: MidDropDownEditor, template: "#=Mid.Name#", title: "MID",
                  filterable: {
                      cell: {
                          dataSource: {
                              type: "d",
                              transport: {
                                  read: crudServiceBaseUrl + "/GetMidsOptions"
                              }
                          }
                           ,
                          dataValueField: "Id",
                          dataTextField: "Name"
                      }
                  }

              }

            
    ],
    editable: true
});

iam trying to filter a an object

Answer 1

PerdataSource API there is no dataType property directly on the dataSource, so below part is not correct, so this might be reason for your error:

dataSource: {
    dataType: "d",

dataType can be defined deeper inside transport CRUD of the dataSource transport, as you already have it there. I have not tried putting a complex object to grid column, why not to do it on the server? it would be most natural to create a primitive property on a server and just use it easily in the grid.

Answer 2

I ran into this problem too. The solution is updating model.dirtyFilds in the editor when the change handler fires. It looks like:

function MidDropDownEditor(container, options){
$(`<input id="MidEditor" name="Mid" data-bind="value:Mid" />`)
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            filter: "startswith",
            dataTextField: "Name",
            dataValueField: "Id",            
            enable: false,
            change: function(){
                if (options.model.dirtyFields['Mid']) {
                    options.model.dirtyFields['Mid.Name'] = true;
                }
            }
});

In column setting you should set property 'field' like "Mid.Name".

It works for me.