CODEWITHSUNDEEP
asp.net-mvcdatagridviewkendo-ui
user2334753
user2334753

Reputation: 7

How to display data on datagridview of Kendoui?

How to display data on datagridview of kendo using my dataLayer (DL) ?, I also look on the documentation of telerik kendo, but I found it confusing?

when I run the code below, it only shows the column's title.

View

    @(Html.Kendo().Grid<sampleProj.Model>() // Specify the type of the grid
    .Name("Grid")
    .BindTo((IEnumerable<sampleProj.Model>)ViewBag.Products)
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.MName);
        columns.Bound(p => p.Name);
    })
)

Updated code with error

@(Html.Kendo().Grid((List<MDL.Employee>)ViewData["oEmployees"])  
.Name("Grid")    
.Columns(columns => 
{        
    columns.Bound(p => p.Code).Title("Code");
    columns.Bound(p => p.FirstName).Title("First Name").Width(140);
    columns.Bound(p => p.LastName).Title("Last Name").Width(140);
    columns.Bound(p => p.Position).Title("Position").Width(100);
})

When I add the following properties this error depicts

HttCompileException was unhandled by user code External component has thrown an exception and when I remove the code below, it displays the data grid view but no Action method

.ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
        toolbar.Custom();      
    })

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource        
       .Ajax()         
       .Batch(true)
       .ServerOperation(false)
       .Events(events => events.Error("error_handler"))
       .Model(model => model.Id(p => p.Code))
       .Read(read => read.Action("dialogEmp_read", "MasterData"))
       .Create(update => update.Action("dialogEmp_Create", "MasterData"))
       .Update(update => update.Action("dialogEmp_Update", "MasterData"))
       .Destroy(update => update.Action("dialogEmp_Destroy", "MasterData"))

    )

Upvotes: 0

Views: 655

Answers (1)

Prince
Prince

Reputation: 328

You just have to follow this Process In the above process you are missing your read method of Kendo Grid. so see following code in Cshtml Page

  @(Html.Kendo().Grid<sampleProj.Model.ListWhichYouAreBinding/StoredProcedure/ModelName>()
          .Name("GridName")
          .Columns(columns =>
          {
 columns.Bound(p => p.Name).Title("Name");
 columns.Bound(p => p.Phone).Title("Phone");
 columns.Bound(p => p.OtherValue).Title("Balance").Format({0:c}").HtmlAttributes(new
 {
  style = "text-align:right; padding-right: 11%;"
 });
 columns.Command(command => 
 { command.Destroy(); 
   command.Edit();
         }).Width(150);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Add New"))
        .Editable(editable => editable.Mode(0))
        .Sortable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.GivePrimaryKeyFieldNAme);
            model.Field(p => p.GivePrimaryKeyFieldNAme).Editable(false);
        })

        .Create(update => update.Action("CreateRow", "ControllerName"))
       .Read(read => read.Action("GetData", "ControllerName", ))
        .Update(update => update.Action("UpdateRow", "ControllerName"))
      .Destroy(update => update.Action("DeleteRow", "ControllerName"))
         ))

Now , In controller you have to create all the above methods for Read, Update, Delete and Create. I will only tell you about read. Go in your controller and do this. Remember Name of the function should be same which is written in

Read(read=>read.action in above)

i.e GetData So, in controller make a function like this

[HttpPost]
 public ActionResult GetData ([DataSourceRequest] DataSourceRequest request)
 {
 var YourData=Get Your List Here From Datatbase;
 return Json(YourData.ToDataSourceResult(request));
 }

Hope This Will work For You.

Upvotes: 1

Related Questions