Binding database with kendo UI grid in ASP.NET MVC

Question

I am trying to implement KendoUI Grid control in my ASP.NET MVC application. I know KendoUI guys have given numerous examples but its not working for me.

My Model code is :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Data;

namespace KendoGrid.Models
{
    public class status
    {
        public string SiteId { get; set; }
        public string SiteName { get; set; }
        public string SiteStatus { get; set; }

        public static List<status> StatusInfo()
        {    
            SqlConnection sconn = new SqlConnection(@"Data Source=DS-7071BC8FDEE6\SQLEXPRESS;Initial Catalog=AmanoTest;User ID=sa;Password=india@123");
            SqlCommand cmd = new SqlCommand("select * from SiteMaster", sconn);
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            status cstat;
            List<status> statlist = new List<status>();
            foreach (DataRow dr1 in dt.Rows)
            {
                cstat = new status();
                cstat.SiteId = dr1[0].ToString();
                cstat.SiteName = dr1[1].ToString();
                cstat.SiteStatus = dr1[2].ToString();

                statlist.Add(cstat);    
            }
            return statlist;
        }
    }
}

My Controller Code is :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoGrid.Models;
using Kendo.Mvc.UI;

namespace KendoGrid.Controllers
{
    public class statusController : Controller
    {
        //
        // GET: /status/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Site()
        {
            //List<status> status = status.GetStatus();
            List<status> temp = status.StatusInfo();
            ViewData["table"] = temp;
            return View();
        }    
    }
}

And my view (.cshtml page) is:

@model KendoGrid.Models.status
@using Kendo.Mvc.UI 

@*@{
    Layout = null;
 }
*@
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Site</title>
</head>
<body>
    <div>
        @(Html.Kendo().Grid(Model)()
                .Name("Grid")
                .Columns(columns =>
                    {
                        columns.Bound(p => p.siteID);
                        columns.Bound(p => p.siteID);
                        columns.Bound(p => p.siteID);
                    })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable() 
            .DataSource(dataSource => dataSource        
        .Ajax()
        .ServerOperation(false)
        )
     )
   </div>
</body>
</html>

On executing it says :

The best overloaded method match for 'Kendo.Mvc.UI.Fluent.WidgetFactory.Grid(System.Data.DataTable)' has some invalid arguments

You're passing it back as a List; but the Grid is looking for a DataTable. — George Stocker
– George Stocker, Commented Aug 10, 2012 at 11:02

dev · Accepted Answer · 2012-10-30 14:05:57Z

1

Look like you are missing couple step here. Please go through this step n this might resolve your problem

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

answered Oct 30, 2012 at 14:05

dev

9281 gold badge13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrea · Accepted Answer · 2013-12-16 07:43:08Z

You can use

var url = "/DesktopModules/MyServices/API/ATSManageClient/GetAllProjectsTechnologyBased?PortalId=210&tabid=95&Technology=" + selectedplatform;

var element = $("#grid").kendoGrid({
//debugger;
    type: "odata",
    dataSource: {
        transport: {
            read: url
        },
        schema: {
            model: {
                fields: {
                    RecievedDate: { type: "date" }
                }
            }
        },
        pageSize: 100
    },

    columnMenu: true,
    scrollable: true,
    filterable: true,
    resizable: true,
    sortable: true,
    detailTemplate: kendo.template($("#template").html()),
    detailInit: detailInit,
    dataBound: function () {
    },
    columns: [
{
    field: "ProjectID",
    title: "Action",
    template: "<a href='/Dashboard/Communication?ProjectID=#=ProjectID#'>View Communication</a>",
    width: "20%"
},
//s debugger;
 {
     field: "ClientName",
     width: "20%",
     title: "Client",
     template: "<a href='Accounts/UpdateClient.aspx?ClientId=#=ClientID#'> #= ClientName #</a>",
     attributes: {
         title: "#=ClientName#"
     }
 },
  {
      field: "ProjectTitle",
      width: "20%",
      title: "Project",
      template: "<a href='Project/EditProject.aspx?ProjectID=#=ProjectID#'> #= ProjectTitle #</a>",
      attributes: {
          title: "#=ProjectTitle#"
      }
  },
        {
            field: "ColorList",
            width: "20%",
            template: kendo.template($("#template2").html()),
            title: "Status"
        },
        {
            field: "RecievedDate",
            width: "20%",
            title: "Check List Status",
            template: ""
        },
        {
            field: "RecievedDate",
            width: "20%",
            title: "Opened Bugs",
            template: ""
        }

    ],
    pageable: {
        // we don't set any DataSource here
        pageSizes: [100, 150, 200]
    }
});

Collectives™ on Stack Overflow

Binding database with kendo UI grid in ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related