This is a migrated thread and some comments may be shown as answers.

[Solved] Edit Template for Grid Insert Command

0 Answers 61 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

George asked on 22 Jun 2012, 05:38 PM

Hi,

I have an MVC DataGrid that is bound to a DataTable and have overcome all the obstacles so for, including getting it to Edit using an Edit Template. The number and type of columns in the Data Table is dynamic thus an Edit Template must be generated in Razor. I have this working fine.

But, I have not yet found a way to specify the Edit Template that should be used for the Insert button. I get an input form that says "Add new record" and which has a check box and Close X box, but shows no input fields.

How do I get the form to show input fields? How do I tell it to use the same Edit Template that is used for the Edit button?

Here is the View code:

@using System.Data;
@using Telerik.Web.Mvc.UI;
@model HCMVC.WebUI.ViewModels.DataTableViewModel

@{
ViewBag.Title = "Telerik Grid -- Data Table";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
@{
    GridEditMode editMode = GridEditMode.PopUp;
    GridButtonType btnType = GridButtonType.Image;
}

<body>
    <h3>
        Grid columns created from DataTable columns. Cells contain DataTable data.
    </h3>
    @*column.Width = "100px"; does not work*@

    @(Html.Telerik().Grid(Model.Data)
        .Name("Grid")
        //This identifies the primary key or unique measure so that edit operations can be performed on it.
        .DataKeys(keys => keys.Add("Id"))
        .ToolBar(commands =>commands.Insert().ButtonType(btnType).ImageHtmlAttributes(new { style = "margin-left:0" }))
        .Columns(columns =>
        {
            var t = ViewData.ModelMetadata;

            foreach (DataColumn col in Model.Data.Columns)
            {
                columns.Bound(col.DataType, col.ColumnName).Width(100);
            }
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(btnType);
                commands.Delete().ButtonType(btnType);
            }).Width(180).Title("Commands");
        })
        // Below is not necessary unless Ajax is used.
        //.DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Home"))
        //
        // The args to .Select() etc are Name of controller method, name of controller, query string args
        .DataBinding(dataBinding => dataBinding.Server()
            .Select("Index", "MatrixViewDT", new { mode = editMode, type = btnType })
            .Insert("Insert", "MatrixViewDT", new { mode = editMode, type = btnType })
            .Update("Save", "MatrixViewDT", new { mode = editMode, type = btnType })
            .Delete("Delete", "MatrixViewDT", new { mode = editMode, type = btnType }))
        .Editable(editable => editable.TemplateName("PatientInfoForm").Mode(GridEditMode.PopUp))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Resizable(resizing => resizing.Columns(true))
        .Filterable()
        //.Groupable()
    )
</body>

I would like to have something for the Insert button like what I have for .Editable, immediately above.

Here's the code in the PatientInfoForm Edit Template:

@{
    // Convert the DataRowView into a virtual object by using the ViewData's virtual property feature, so that the
    // Html.Editor(), Html.TextBox() etc can be supplied with a reference to an object's property that they require.
    // Like Html.Editor(col.ColumnName).

    System.Data.DataColumnCollection dataCols = (Model as System.Data.DataRowView).DataView.Table.Columns;
    System.Data.DataRow row = (Model as System.Data.DataRowView).Row;
}

    <ul class="edit-form">
    @*TODO When loop is done, clean out ViewData of all the stuff put in it in this loop. How to do this?*@
    @foreach(System.Data.DataColumn col in dataCols)
    {
        ViewData[col.ColumnName] = row[col.ColumnName];
        string labelsForLabel = "for=" + @col.ColumnName;
        <li>
            <label @labelsForLabel>@col.ColumnName:</label> @Html.Editor(col.ColumnName)
        </li>
    }
    </ul>

Thanks in advance,
George