Kendo UI Grid inline edit

Question

Hi I'm trying to do kendo grid and it doesn't work, shows the grid but no shows data. I don't know what is wrong. I don't know how parametersMap works. Please help me.

Controller

public ActionResult GetGeo(int id) 
{
    var list = data.getGeoList(id);
    return Json(new {list}, JsonRequestBehavior.AllowGet);
}

public ActionResult UpdateGeo(int id)
{
    var success = data.UpdatetGeo(id);
    return Json(new { Success = success }, JsonRequestBehavior.AllowGet);
}

public ActionResult DeleteGeo(int id)
{
    var success = data.DeletetGeo(id);
    return Json(new { Success = success }, JsonRequestBehavior.AllowGet);
}

public ActionResult CreateGeo(GeoContent model)
{
    var success = data.CreateGeo(model);
    return Json(new { Success = success }, JsonRequestBehavior.AllowGet);
}

Here is script

<script>
$(document).ready(function () {

        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/GetGeo/",
                    dataType: "json",
                    contentType: "application/json",
                    data: {id:5}

                },
                update: {
                    url:  "/Home/UpdateGeo",
                    dataType: "json",
                    contentType: "application/json"
                },
                destroy: {
                    url:  "/Home/DeleteGeo",
                    dataType: "json",
                    contentType: "application/json"
                },
                create: {
                    url:  "/Home/CreateGeo",
                    dataType: "json",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "GeoId",
                    fields: {
                        GeoId: { editable: false, nullable: true },
                        ContentId: { editable: false, nullable: true },
                        Latitude: { type: "number", validation: { required: true, min: 1 } },
                        Longitude: { type: "number", validation: { required: true, min: 1 } },

                    }
                }
            }
        });

    $("#grid4").kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        height: 550,
        toolbar: ["create", "save", "cancel"],
        columns: [
            { field: "Latitude", title: "Latitude", width: 120 },
            { field: "Longitude", title: "Longitude", width: 120 },
            { command: "destroy", title: "&nbsp;", width: 150 }],
        editable: true
    });
});

Json data return: http://localhost:53232/Home/GetGeo?id=5

{"list": [
  {
    "GeoId":1,
    "ContentId":5,
    "Latitude":4.716168,
    "Longitude":-70.78373
  },{
    "GeoId":2,
    "ContentId":5,
    "Latitude":4.718171,
    "Longitude":-70.76253
  }
]}

OnaBai OnaBai · Accepted Answer · 2015-07-27T10:59:18

Since your data is actually nested on list element, you need to add to your schema data: "list". It should look something like:

schema: {
    data:"list",
    model: {
        id: "GeoId",
        fields: {
            GeoId: { editable: false, nullable: true },
            ContentId: { editable: false, nullable: true },
            Latitude: { type: "number", validation: { required: true, min: 1 } },
            Longitude: { type: "number", validation: { required: true, min: 1 } }

        }
    }
}

Kendo UI Grid inline edit

1 Answers