Problem posting changes from the Grid

[Pierre]

Hi,

I'm trying to use the grid from MVC3 with no success.  I'm pretty new at mvc and kendoUI so this may be a really dumb mistake and I can't tell if it's a problem on my end or a bug in the beta grid.

Model:
 

public class InCartProduct

    {

        public string ProductId { get; set; }

        public string Fabric { get; set; }

        public string Pattern { get; set; }

        public string Color { get; set; }

        public string Description { get; set; }

        public double Qty { get; set; }

        public double UPrice { get; set; }

        public double Total { get; set; }

    }

View:

@model IEnumerable<pts.Models.InCartProduct>

 @{

    ViewBag.Title = "Shopping Cart";

}

 

<h2>Your Order</h2>

 <h3>Fabrics</h3>

 @(Html.Kendo().Grid(Model)

    .Name("FabricGrid")   

    .Columns(columns =>

    {       

        columns.Bound(p => p.Pattern).Groupable(false);

        columns.Bound(p => p.Description);

        columns.Bound(p => p.UPrice);

        columns.Bound(p => p.Qty).Width(150);

        columns.Bound(p => p.Total).ClientFooterTemplate("Order Total : ");

        columns.Command(command => command.Destroy()).Width(110);

    })

    .ToolBar(commands => { commands.Save().SaveText("Update Fabric Order"); })

    .Scrollable()

    .Sortable()

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Batch(true)

        .ServerOperation(false)

        .Model(model => model.Id(p => p.ProductId))

        .Events(events => events.Error("error_handler"))

        .Create(create => create.Action("Product_Create ", "ShoppingCart"))

        .Read(read => read.Action("Product_Read", "ShoppingCart"))

        .Update(update => update.Action("Product_Update", "ShoppingCart"))

        .Destroy(update => update.Action("Product_Delete", "ShoppingCart"))

     )

)

 
ShoppingCartControler:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Product_Update([DataSourceRequest] DataSourceRequest request, InCartProduct product)

{

     if (product != null)

    {

        // do something

    }

     return Json(ModelState.ToDataSourceResult());

}

I can load the data (not from SQL) to the grid with no problem but as soon as I change something on the grid and hit the "Update Fabric Order" button I get an "Invalid JSON primitive: sort." error (see attached).  The error occurs before it hits the controller.  A break point in the controller never gets hit. If I remove all the paramters from the controller i.e.: public ActionResult Product_Update() the program does hit the break point in the controller but  it's pretty useless at this point.

Please help.

Thanks,


Edit:
I just found out that the error was caused by the way I'm calling a webservice on the _Layout.cshtml page.  This code calls an aspx webservice to return the menu content and uses the Kendo menu control to build the menu.  I need this code to run on every page because it's the site's menu.

<script language="javascript" type="text/javascript">

    jQuery.support.cors = true;

 

    $.ajaxSetup({

        type: 'POST',

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        data: "{}",

        success: function (msg) {

            console.log(msg.d);

        },

        error: function (xhr, desc, ex) {

            alert("Web Service Error: " + xhr.responseText + ", " + desc + ": " + ex);

        }

    });

 

    function namespace(namespaceString) {

        var parts = namespaceString.split('.'), parent = window, currentPart = '';

        for (var i = 0, length = parts.length; i < length; i++) {

            currentPart = parts[i];

            parent[currentPart] = parent[currentPart] || {};

            parent = parent[currentPart];

        }

        return parent;

    }

 

    var myajax = namespace('myajax');

    myajax.WebService = {

        Url: 'ptsGenericService.asmx/',

        _Ajax: function (url, callback) {

            $.ajax({ url: url, success: callback });

        },

        GetMenu: function (callback) {

            var url = this.Url + 'GetMenu';

            this._Ajax(url, callback);

        }

    };

 

    $(document).ready(function () {

        myajax.WebService.GetMenu(function (menulist) {

            var menu = $("#menu").kendoMenu().data("kendoMenu");

            var parentItem = null;

            $(menulist.d).each(function (rec) {

                var parentItem = menu.element.children("li:contains('" + this.ParentTitle + "')");

                if (this.ParentTitle == '' || parentItem.length == 0) {

                    menu.append({ text: this.Title, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass });

                } else {

                    if (this.SubTitle == null || this.SubTitle == '') {

                        menu.append([{ text: this.Title, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass}], parentItem);

                    } else {

                        if (this.SubTitle != "") {

                            var subItem = parentItem.find("li:contains('" + this.Title + "')");

                            menu.append([{ text: this.SubTitle, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass}], subItem);

                        }

                    }

                }

            });

        });

    });                   

</script>

 think it's the $.ajaxSetup{...} piece that causes the problem.  If I remove the entire block of code the Update button on the grid works.  So I'm still clueless as to how to solve this thing! 

Anyone?

[Pierre]

Though the error is still a mystery, I've fixed the issue by replacing the kendo menu jQuery style with the kendo menu MVC wrapper style.  So it's all good again.