Reputation:

Unable to bind JSON data to KendoUI Grid

I am facing a certain issue while trying to bind the KendoUi Grid with the Json data from the controller. Things seem fine and my Json object contains data but still grid is not showing any thing:

And I am getting this error in chrome JavaScript console:

GET http://localhost:8084/Records?take=5&skip=0&page=1&pageSize=5 500 (Internal Server Error)

In View:

<div id="grid">
</div>
<div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    serverPaging: true,
                    pageSize: 5,
                    groupable: true,
                    selectable: "row",
                    transport: { read: { url: "Records", dataType: "json"} }
                },
                height: 400,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: true,
                columns: [
                        { field: "No", title: "No" },
                        { field: "Desc", title: "Description" },
                        { field: "priority", title: "Priority" },
                        { field: "decision", title: "Decision" }
                    ],
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                }
            });
        });
    </script>

In Controller:

    public ActionResult GetRecords()
    {
       var obj = new User();
        var jsnRslt = obj.GetResult(Session["id"].ToString());
//return Json(jsnRslt);

        return Json(jsnRslt, JsonRequestBehavior.AllowGet); //Changed as suggested by Dismissile
    }

In Model:

public object GetResult(string usrId)
    {
…
….
…..            try
        {
            int i = 0;
            if (rcrds != null || rcrds.HasRows)
            {
                jsonWriter.WriteStartObject();
                while (rcrds.Read())
                {
                    for (int j = 0; j < rcrds.FieldCount; j++)
                    {
jsonWriter.WritePropertyName(rcrds.GetName(j));
jsonWriter.WriteValue(rcrds.GetValue(j));
                    }
                    i++;
                }
                jsonWriter.WriteEndObject();
            }

        }

        catch (Exception ex) { }
        return jsonWriter;
    }
}

Kindly help.

Upvotes: 3

Answers (5)

Seichi

Reputation: 273

You are returning an ActionResult, it should be a JsonResult instead.

Upvotes: 0

Jaimin

Reputation: 8020

Try this

 transport: { read: { url: "Records", dataType: "jsonp"} }

try with jsonp instead of json.

Upvotes: 0

Badhon Jain

Reputation: 1007

Try to use the transport attribute within dataSource, something like this:

 <script type="text/javascript">



    var dataSource = new kendo.data.DataSource({
        batch: true,
        schema: {
            model: {
                id: "EmployeeID",
                fields: {
                    EmployeeID: { editable: true, validation: { required: true } },
                    EmployeeName: { validation: { required: true } }

                }
            }
        },
        transport: {
            read: {
                url: "/Home/GetData",
                type: "GET"

            },
            update: {
                url: "/Home/Update",
                type: "POST",
                contentType: 'application/json'


            },
            destroy: {
                url: "/Home/Destroy",
                type: "POST",
                contentType: 'application/json'

            },


            create: {
                url: "/Home/Create",
                type: "POST",
                contentType: 'application/json'

            },


            pageSize: 1,





            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return kendo.stringify(options.models) ;
                }
            }

        }




    });





    $(document).ready(function () {


        $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            height: 430,
            sortable: true,
            toolbar: ["create", "save", "cancel"],
            columns: [

                { field: "EmployeeID", title: "Employee ID", width: 110 },
                { field: "EmployeeName", title: "Employee Name", width: 110 },

                { command: "destroy", title: "Delete", width: 90 }],
            editable: true,
            selectable: "multiple row",
            groupable: true,
            navigatable: true,
            filterable: true
        });
    });



</script>

The controller:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        var employee = new Employee().GetEmployeeList();

        return View(employee);
    }

    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult GetData()
    {
        var obj = new Employee();


        return Json(obj.GetEmployeeList(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Update(List<Employee> model)
    {
        var obj = new Employee();

        //return View();
        return Json(obj);
    }

    [HttpPost]
    public JsonResult Create(List<Employee> model)
    {
        var obj = new Employee();

        return Json(obj);
    }

    public ActionResult Destroy(Employee model)
    {
        return View();
    }

}

Return a html view from index method to hold the grid &

Upvotes: 1

Kai CriticallyAcclaimed Cooper

Reputation: 978

I think you also need to add a datasource request in your ActionMethod Parm

 public ActionResult GetResult([DatasourceRequest]request, string usrId)
 return Json(jsnRslt.ToDatasourceResult(request), JsonRequestBehavior.AllowGet);

Every kendogrid needs this

Upvotes: 0

Dismissile

Reputation: 33071

You probably need this in your JSON call:

return Json(jsnRslt, JsonRequestBehavor.AllowGet);

It looks like you are doing a GET call, and by default GET is not allowed on a JSON call.

Upvotes: 1

Unable to bind JSON data to KendoUI Grid

Answers (5)

Related Questions