Monday, May 25, 2015

Kendo UI MVC Grid Q&A

Q: the controller "add" action is triggered multiple times after add more than one records
A: need to set the Model.Id in the DataSource for the grid. otherwise all new record will have id=0 which causes the controller action be triggered multiple times.

Q: how to disable batch update
A: should not have command.Save() in the toolbar

Q: server bound vs ajax bound
A: server bound: default binding for Kendo Grid, to bind the grid with data you just need to set its data source and render the view
     ajax bound: Kendo Grid will make ajax requests when doing paging, sorting, filtering or saving data

Q: how to customize the way a property is displayed in a grid bound column
A: server bound: use the Template method
     Ajax bound: use the ClientTemplate method

Q: How to send values to the action method when binding the grid
A:
If the grid is server bound the overload method which accepts route values should be used.

Example: Send Additional Data In Server Bound Grid

// -- removed for brevity
.DataSource(dataSource => dataSource.Server()
    .Read(read => read.Action("Read", "Home", new { userID = (int)ViewData["UserID"] }))
)
// -- removed for brevity


If the grid is ajax bound the Data method should be used to specify the name of the JavaScript
 function which will return the additional data.

Example: Send Additional Data In Ajax Bound Grid

// -- removed for brevity
.DataSource(dataSource => dataSource.Ajax()
    .Read(read => read
        .Action("Read", "Home")
        .Data("additionalData")
    )
)
// -- removed for brevity  Q: During Edit mode, get error: An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user codeAdditional information: There is no DataSource Model Id property specified.
A: Editing requires to set an ID field via the DataSource Model configuration e.g.
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
        {
            model.Id(o => o.MyIDField);
        })
Please check the following documentations topics for information on how to setup the grid and the action methods in the different editing modes:

No comments: