CODEWITHSUNDEEP
user-interfacemodel-view-controllerkendo-uigrid
user1397128
user1397128

Reputation: 29

Kendo Ui Grid Not calling the Read Action in MVC

My read action in the kendo UI grid is not getting called. Can someone please help.

FYI : Please don't worry about the synctactical errors if any. I have just typed in the snippet. The concern is in the javascript where the Transport read action is done.

Here is my code snippet.

********* HTML *********

<html>
<head>
<link rel="stylesheet" href="~/Content/kendo/kendo.common.min.css" />
<link rel="stylesheet" hre="~/Content/kendo/kendo.default.min.css" />

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">  </script>


<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

<script src="~/Scripts/test.js" type="text/javascript"></script>

</head>
<body>
<div id="grid"></div>
</body>
</html>

********************* Code Behind **********

[HttpGet]
    public JsonResult GetMyData()
    {int testId=1;
        TestManager mana = new TestManager();
        List<MyTestDataModel> retVal = mana.GetMyTestData(testId);
        return Json(retVal, JsonRequestBehavior.AllowGet);`
    }

************************* Javascript test.js **********************

   function PopulateWellGrid(level) {
    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: '/Home/GetMyData',
                    //url: '@Url.Action("GetMyData", "Home")'
                    dataType: "json",
                    type: "GET"
                }
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
        },
        height: 600,
        sortable: true,
        pageable: true,
        //detailInit: detailInit,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [
            {
                field: "Id",
                title: "ID",
                width: "110px"
            },
            {
                field: "TestId",
                title: "Test Id",
                width: "110px"
            },
            {
                field: "Name",
                title: "First Name",
                width: "110px"
            },
            {
                field: "Status",
                width: "110px"
            },
            {
                field: "StartDate",
                width: "110px"
            }
        ]
    });
}

Upvotes: 1

Views: 1035

Answers (1)

Mitul
Mitul

Reputation: 9854

Try following to see if it works for you. I will show what is working for me in a similar setup. I have type: 'aspnetmvc-ajax' and type:'POST' and the method I have decorated with it [HttpPost] on the server side. However, I have two methods on the server side first returns the view and the second method returns the data. 

function PopulateWellGrid(level) {
    $("#grid").kendoGrid({
        dataSource: {
            type: 'aspnetmvc-ajax',
            transport: {
                read: {
                    url: '/Home/GetMyData',
                    //url: '@Url.Action("GetMyData", "Home")'
                    dataType: "json",
                    type: "POST"
                }
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
        },
        height: 600,
        sortable: true,
        pageable: true,
        //detailInit: detailInit,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [
            {
                field: "Id",
                title: "ID",
                width: "110px"
            },
            {
                field: "TestId",
                title: "Test Id",
                width: "110px"
            },
            {
                field: "Name",
                title: "First Name",
                width: "110px"
            },
            {
                field: "Status",
                width: "110px"
            },
            {
                field: "StartDate",
                width: "110px"
            }
        ]
    });
}

[HttpGet]
public ActionResult Index(){

return View();
}
[HttpPost]
    public JsonResult GetMyData()
    {int testId=1;
        TestManager mana = new TestManager();
        List<MyTestDataModel> retVal = mana.GetMyTestData(testId);
        return Json(retVal);`
    }

Upvotes: 0

Related Questions