Update Kendo Grid based On Search Form Post

[Lonnie]

I've been doing alot of searching but haven't found a clear answer for this. I have a set up textboxes that and a submit button and a Kendo UI grid. I want to post the data to the grid's datasource so that it will return the results based on the criteria. I am not using the MVC wrappers.

I've gotten closer but I can't seem to get the datasource to send the post data when I click submit. I've debugged and in my $("#fmSearch").submit it is hitting the jquery plugin and I've confirmed that it is converting the form data to JSON properly, but it seems as though it it not sending the updated information to the server so that the Action can read it.

JavaScript

var dsGalleryItem = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Content("~/Intranet/GalleryItem/SearchGalleryItems")',
                type: "POST",
                data: $("#fmSearch").serializeFormToJSON(),
                cache: false
            }
        },
        schema: {
            model: {
                id: "galleryItemID",
                fields: {
                    galleryItemID: {
                        nullable: true
                    },
                    imageName: {},
                    collectionName: {},
                    categoryName: {},
                    lastUpdatedOn: { type: "date" }
                }
            }
        }
    });




    var gvResults = $("#gvResults").kendoGrid({
        autoBind:false,
            columns: [{
                field: "imageName",
                title: "Item Name",
                template: "<a href='@Url.Content("~/Intranet/GalleryItem/Details/")#=galleryItemID#'> #=imageName#</a>"
            }, {
                field: "collectionName",
                title: "Collection"
            }, {
                field: "categoryName",
                title: "Category"
            }, {
                field: "lastUpdatedOn",
                title: "Last Updated",
                format: "{0:M/d/yyyy}"
            }
            ],
            selectable: "row",
            change: onRowSelect,
            dataSource: dsGalleryItem
        });






    $("#fmSearch").submit(
        function (event) {
            event.preventDefault();
            dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });
    });

MVC Action

[HttpPost]
    public JsonResult SearchGalleryItems(string keyword, int? category, int? collection, DateTime? startDate, DateTime? endDate)
    {

        var galleryItemList = (from g in db.GalleryItems
                               //where g.imageName.Contains(keyword)
                               select new GalleryItemViewModel
                               {
                                   galleryItemID = g.galleryItemID,
                                   imageName = g.imageName,
                                   collectionName = g.collection.collectionName,
                                   categoryName = g.category.categoryName,
                                   lastUpdatedOn = g.lastUpdatedOn
                               });

        var galleryItemCount = Json(galleryItemList.ToList());

        return Json(galleryItemList.ToList()); ;
    }

The action is not setup to retrieve different data right now. I am just using the debugger so that I can see that it is getting the values .

The controller is called. But the postdata is not being sent to it. Example: I have a dropdown that defaults to 1. When the page is loaded the 1 gets sent to the controller as category. Debug shows its value as 1. I enter a keyword into the a text box and hit submit but the keyword never gets there. The category is still sent as 1 though. Its like it is posting the old data and never posting the new data from the form.

[Nikolay Rusev]

Hello Lonnie,

Here is what I thing is the reason for the behavior which you observer. 
 You have read.data defined in the DataSource configuration which send an object in the following format /I'm using dummy data/: { foo: "bar" }.
 But you call the read method of the DataSource with additional data in the format: { data: { foo: "bar" } }.

I believe that calling the read method in the following manner will send the correct data to the action method: dsGalleryItem.read( $("#fmSearch").serializeFormToJSON() ); - this is the same as in the configuration


Regards,
Nikolay Rusev
Telerik