KendoGridBinderEx - No property or field exists in type

Question

I am using AngularJS along with KendoUI to create a grid, which gets its data from a WebAPI webservice. For the grid, I want to allow server-side sorting, paging, filtering, and grouping. For this purpose, I am trying to use the KendoGridBinderEx library.

I have downloaded the KendoGridBinderEx source, run the example project, and it works fine. However, when I do the exact same thing in my project, I get the following error when I try to do a filter on a column in the grid:

System.Linq.Dynamic.ParseException: No property or field 'test' exists in type 'MyEntity'

"test" is what I am typing into the filter, so it should be the filter text; it should not be looking for a property or field called "test".

I have debugged and used Fiddler to see that the filter part of the request being sent over in the request is exactly the same as the working request in the examples, so I don't think the problem is on the request side.

For all my code blocks, I am simplifying everything to save space, and to cut out things that are not relevant. For instance, I am cutting out my database code, and generating a list of entities on the fly, since doing so still exhibits the problem, hence I know that it is not a problem with my Entity Framework code.

Here is my JS code:

    var myDataSource = {
        transport: {
            read: {
                url: function () {
                    return url;
                },
                type: 'post',
                dataType: 'json'
            },
            parameterMap: function (options, operation) {
                if (options.filter) {
                    KendoGrid_FixFilter(myDataSource, options.filter);
                }

                if (operation === "read") {
                    // convert the parameters to a json object
                    return kendo.stringify(options);
                }

                return options;
            }
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        serverGrouping: true
        schema: {
            data: 'data',
            groups: 'groups',
            aggregates: 'aggregates',
            total: 'total',
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    name: { type: "string" },
                    description: { type: "string" }
                }
            }
        },
    };

And here is my WebAPI Controller code:

    [System.Web.Http.Route("api/MyEntity")]
    [System.Web.Http.HttpPost]
    public KendoGridEx<MyEntity, MyEntity> GetMyEntities(KendoGridApiRequest request)
    {
        var entList = new List<MyEntity>();
        for (int i = 0; i < 10; i++)
        {
            var newEntity = new MyEntity
            {
                Id = i,
                Name = "test",
                Description = "description"
            };
            entList.Add(newEntity);
        }
        return entList.AsQueryable().ToKendoGridEx<MyEntity, MyEntity>(request);
    }

So if I set a "contains" filter on the "Name" column with a value of "test" I get the above-mentioned error. Any ideas as to why?

Answer 1

No property or field 'test' exists in type 'MyEntity'..

I think only the values Id,Name,Description can be found.. the message sais "i search for properties and fields.."

And Id,Name,Description are the only 'property or fields'.

--'test' is a value, not a property or field--

Answer 2

After a day of struggling with this, I finally posted on SO today. And of course, mere minutes after asking the question, I stumbled upon the answer!

The problem ended up being that there is a difference in casing of column names between my client-side JS code and my entities. In my WebApiConfig, I am using

        // Web API configuration and services
        var settings = config.Formatters.JsonFormatter.SerializerSettings;
        settings.Formatting = Formatting.Indented;
        settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

This code makes it so that when my WebAPI returns data, all field names are converted to camel case. This is because I wanted to code with everything in camel case on the JS side, but Pascal case on the C# side.

The first thing that threw me off was that other KendoGridApiRequest operations, such as Sort, appear to be case-insensitive when it comes to property names. The other thing was that the error message says it's looking for the filter value as a property; it should have said "No property or field 'name' exists in type 'MyEntity'"; then I would have probably known immediately that it was the casing throwing it off.

Now I need to figure out how I'm going to convert the request properties back to Pascal case. Worst case scenario I have to convert everything to the same case, but that would be a lot of work (the entities are way more complex than my sample here indicates).

Answer 3

What you can do is modify the property names before kendo-grid sends these to the server.

So the filter.field value 'name' is converted to 'Name'.

See this modified KendoGrid_FixFilter javascript function:

// kendoDataSource = kendo.data.DataSource
// filter = kendo filter
function KendoGrid_FixFilter(kendoDataSource, kendoFilter, depth) {
    if ((!kendoDataSource) || (!kendoFilter)) return;

    if (!depth) depth = 0;
    // console.log(depth + " - FixDatesInFilter:" + JSON.stringify(kendoFilter));

    $.each(kendoFilter.filters, function (idx, filter) {
        //console.log("filter = " + idx + " = " + JSON.stringify(filter));

        if (filter.hasOwnProperty("filters")) {
            depth++;
            KendoGrid_FixFilter(kendoDataSource, filter, depth);
        }
        else {
            $.each(kendoDataSource.schema.model.fields, function (propertyName, propertyValue) {

                if (filter.field == propertyName) {
                    // console.log("before = " + filter.field);
                    filter.field = filter.field.toPascalCase();
                    // console.log("after = " + filter.field);
                }

                if (filter.field == propertyName && propertyValue.type == 'date') {
                    filter.value = kendo.toString(filter.value, _DefaultDateFormat); // "MM/dd/yyyy"
                    // console.log("changed = " + filter.value);
                }
            });
        }
    });
}

You do already use this function in the datasource.

Example code for CamelCase/PascalCase could be something like this:

String.prototype.toCamelCase = function () {
    console.log("String.prototype.toCamelCase");
    return this
        .replace(/\s(.)/g, function ($1) { return $1.toUpperCase(); })
        .replace(/\s/g, '')
        .replace(/^(.)/, function ($1) { return $1.toLowerCase(); });
};

String.prototype.toUpperCaseFirstChar = function () {
    console.log("String.prototype.toUpperCaseFirstChar");
    return this.substr(0, 1).toUpperCase() + this.substr(1);
};


String.prototype.toPascalCase = function () {
    console.log("String.prototype.toPascalCase");
    return this.toCamelCase().toUpperCaseFirstChar();
};