Telerik Extensions for ASP.NET MVC

This help topic explains how to configure the various editing settings of Telerik Grid for ASP.NET MVC.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Important

The editing feature of Telerik Grid for ASP.NET MVC is available only for ASP.NET MVC 2.0 or later. Make sure you are using the right version of Telerik.Web.Mvc.Dll.

This topic contains the following sections.

Specifying the editing mode of Telerik Grid for ASP.NET MVC

Telerik Grid for ASP.NET MVC supports three editing modes:
  1. In-line (default)

    The editing UI is displayed in every cell of the row.

  2. In-form

    The row which is being edited is replaced with the edit form.

  3. Pop-up

    A pop-up window is displayed showing the edit form.

Here is how to set the editing mode of the grid:
CopySetting the editing mode
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Editable(editing => editing.Mode(GridEditMode.PopUp)) // <-- Setting the edit mode
        .DataKeys(keys => {/* code omitted for brevity */})
        .Columns(columns => {/* code omitted for brevity */})
        .DataBinding(dataBinding => {/* code omitted for brevity */})
%>
Important

In in-line mode Telerik Grid for ASP.NET MVC is creating an editor for each column. As a result only the properties which are displayed as columns are editable.

In in-forms or pop-up mode Telerik Grid for ASP.NET MVC is creating an editor for the bound object (using Html.EditorFor<T>). As a result all editable properties of the bound object are displayed in the edit form. This behavior differs from in-line mode where only the bound properties (properties for which a column is defined) are editable. To hide properties from the grid edit form use the ScaffoldColumnAttribute:

CopyHiding properties of the model from the grid edit form
public class Product
{
    [ScaffoldColumn(false)]
    public int ProductID
    {
        get;
        set;
    }
}

Enabling/disabling the delete confirmation

By default Telerik Grid for ASP.NET MVC displays a confirmation dialog when the user clicks the "delete" button. This feature can be toggled easily:
CopyDisabling delete confirmation
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Editable(editing => editing.DisplayDeleteConfirmation(false)) // <-- Disable delete confirmation
        .DataKeys(keys => {/* code omitted for brevity */})
        .Columns(columns => {/* code omitted for brevity */})
        .DataBinding(dataBinding => {/* code omitted for brevity */})
%>
Note
The confirmation text can be customized by changing the value of the "DeleteConfirmation" string in the grid localization. Check the localization help topic for more info.

Specifying the button display type

Telerik Grid for ASP.NET MVC supports three button display types:
  1. Text (default)

    The button shows only text.

  2. Image

    The button shows only icon.

  3. TextAndImage

    The button shows text and icon.

Here is how to specify the button type of the grid:
CopySetting the editing mode
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .DataKeys(keys => {/* code omitted for brevity */})
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))) // <-- Setting the button type
        .Columns(columns => {
             /* code omitted for brevity */
             columns.Command(commands =>
             {
                 commands.Edit().ButtonType(GridButtonType.Image);   // <-- Setting the button type
                 commands.Delete().ButtonType(GridButtonType.Image); // <-- Setting the button type
             })
        })
        .DataBinding(dataBinding => {/* code omitted for brevity */})
%>