kendoUi - Grid doesn't call controler

Question

I have a little problem with my KendoUi-grid. It's very simple :

JS File

 $("#gridPlannif").kendoGrid({
    datasource: ds_VEHICULE_SANSDATEFIN,
    height: 200,
    toolbar: ["create"],
    sortable: true,
    filterable: true,
    scrollable: true,
    columns: [{
        field: "sDateArriveePrevue",
        title: "Arrivée à partir du",
    }, {
         [... some columns... ]
    },{
        command: ["edit", "destroy"], title: " ", width: "200px" }
    ],
    editable: {
        mode: "popup",
        [... some configurations ... ]
    }
});

Controler

 public ActionResult UpdateVehicule([DataSourceRequest]DataSourceRequest request, Planification vehicule)
    { 
        try
        {
            if (this.ModelState.IsValid)
            {
              [...]
            }
            else
            {
               [...]
            }
            return Json(new[] { vehicule }.ToDataSourceResult(request, ModelState));
        }
        catch (Exception e)
        {
            return Json(new[] { vehicule });
        }
    }

View (.ascx)

[...]
<script>
 ds_VEHICULE_SANSDATEFIN = new kendo.data.DataSource({
            autoSync: true,
            transport: {
                read: {
                    url: '<%= Url.Action("GetVehicules_SansDateFin", "Plannification") %>'
                },
                update: {
                    url: '<%= Url.Action("UpdateVehicule", "Plannification") %>'
                },
                destroy: {
                    url: '<%= Url.Action("DeleteVehicule", "Plannification") %>'
                },
                create: {
                    url: '<%= Url.Action("AddVehicule", "Plannification") %>'
                }

            }
        });

</script>
[...]

Problems

-> First problem : the datasource definition doesn't works.. I must do that instructions after grid initialisation :

$("#gridPlannif").data("kendoGrid").setDataSource(ds_VEHICULE_SANSDATEFIN);
$("#gridPlannif").data("kendoGrid").dataSource.read();
$("#gridPlannif").data("kendoGrid").refresh();

Thanks to that, grid display data correctly.

-> Second problem, the most important : "add", "edit" and "destroy" doesn't call controller. With firebug, I see no call to the controller, I don't know why. I use on the same page a Scheduler component and it works, it uses the same functions on the controller to add / update / delete.

Someone has a suggestion ?

Thank you.

Answer 1

It sounds like your JavaScript library code for " $("#gridPlannif").kendoGrid({ " is not wrapped by a document.ready (assuming you are also using jQuery) and loading before the View's JavaScript code (class libraries load before View code, unless told otherwise).

So, be sure to wrap your JavaScript library code like this:

$(function() {  // This is jQuery shorthand for document.ready
    $("#gridPlannif").kendoGrid({
        datasource: ds_VEHICULE_SANSDATEFIN,
        height: 200,
        toolbar: ["create"],
        sortable: true,
        filterable: true,
        scrollable: true,
        columns: [{
            field: "sDateArriveePrevue",
            title: "Arrivée à partir du",
        }, {
             [... some columns... ]
        },{
            command: ["edit", "destroy"], title: " ", width: "200px" }
        ],
    editable: {
        mode: "popup",
        [... some configurations ... ]
    }
});

What this will do is allow all of the View page code to render, including the inline <script> blocks defined before it tries to wire up the Kendo Grid. All of this to make sure the Data Source exists prior to trying to call it from the Kendo Grid initialization.