Inline/Batch CRUD fails with datatable model

[Anamika]

Hello,

I am using Kendo Grid and the model is a dynamic one where i have a list of column names from an XML file and table Name and so i have to use a datatable model which varies depending on table Name and fields specified in XML file. i would like to have Inline editing in place, but when i add .Editable(editable => editable.Mode(GridEditMode.InLine)) i get error.
"Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions."

If i try creating custon button and try to make selected row editable in jquery i canot successfully acieve that using grid.editRow. It just makes first cell editable .

Is it possible to use Inline editing with datatable model? If now how else can i achieve with custom button Edit which changes to update cancel and does the required function.

Thanks

Anamika

[Alexander Popov]

Hi Anamika,

InLine and InCell editing is not supported out of the box when the using DataTables. This happens because the Grid cannot resolve the types of the columns and therefore cannot create proper editor templates. You could check the type and assign templates manually as a workaround. For example: 

.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        switch (column.DataType.ToString())
        {
            case "System.Int16":
            case "System.Int32":
            case "System.Int64":
                columns.Bound(column.ColumnName).EditorTemplateName("Integer");
                break;
            case "System.Decimal":
            case "System.Double":
            case "System.Float":
                columns.Bound(column.ColumnName).EditorTemplateName("Number");
                break;
            case "System.String":
                columns.Bound(column.ColumnName).EditorTemplateName("String");
                break;
            default:
                //etc etc
                break;
        }
    }
})

Regards,
Alexander Popov
Telerik

 

 

[Christoph]

Hi All,
I am also interested in using Kendo MVC grid with a datatable. And inline editing is important. Is it possible to provide us with a simple working solution?

[Alexander Popov]

Hi Christoph,

I would recommend checking this example and modifying it as I suggested in my previous reply.

Regards,
Alexander Popov
Telerik

 

 

[Christoph]

Hi Alexander, I did what you suggest and I got an error "'object' does not contain a definition for 'ProductID'"
My View is as follows

@model System.Data.DataTable


@(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                switch (column.DataType.ToString())
                {
                    case "System.Int16":
                    case "System.Int32":
                    case "System.Int64":
                        columns.Bound(column.ColumnName).EditorTemplateName("Integer");
                        break;
                    case "System.Decimal":
                    case "System.Double":
                    case "System.Float":
                        columns.Bound(column.ColumnName).EditorTemplateName("Number");
                        break;
                    case "System.String":
                        columns.Bound(column.ColumnName).EditorTemplateName("String");
                        break;
                    default:
                        //etc etc
                        break;
                }



            }
            columns.Command(cmd => cmd.Edit());
        })
        .Pageable()
    .Sortable()
    .Editable(ed=>ed.Mode(GridEditMode.InLine))
    .Filterable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                var id = Model.PrimaryKey[0].ColumnName;
                model.Id(id);
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    var field = model.Field(column.ColumnName, column.DataType);
                    if (column.ColumnName == id)
                    {
                        field.Editable(false);
                    }

                }
            })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

[Alexander Popov]

Hello Christoph,

You can use an editor template that actually does not allow editing as a workaround. For example: 

@model System.Data.DataTable

@functions{
    public string FormatTitle(string input)
    {
        string result = "";
        result = input.Replace(" ", ".");
        return result + "asdasd";
    }
}
@{
    var id = Model.PrimaryKey[0].ColumnName;
    var templateName = "String";
}
@(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
    .ToolBar(x=>x.Create())
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            switch (column.DataType.ToString())
            {
                case "System.Int16":
                case "System.Int32":
                case "System.Int64":
                    templateName = "Integer";
                    break;
                case "System.Decimal":
                case "System.Double":
                case "System.Float":
                    templateName = "Number";
                    break;
                case "System.String":
                    templateName = "String";
                    break;
                default:
                    //etc etc
                    break;
            }
            if (column.ColumnName == id)
            {
                templateName = "NotEditable";
            }
            columns.Bound(column.ColumnName).EditorTemplateName(templateName).EditorViewData(new {name = id});
        }
    })
    .Pageable()
    .Sortable()
    .Editable(ed=>ed.Mode(GridEditMode.InCell))
    .Filterable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {

                model.Id(id);
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    var field = model.Field(column.ColumnName, column.DataType);
                }
        })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

Views\Shared\EditorTemplates\NotEditable.cshtml: 

@model dynamic

<span data-bind="text: @ViewData["name"]"></span>

Regards,
Alexander Popov
Telerik

 

 

[Kiran]

Hi Alexander,

Can you share the Update action method with bulk process?

 

[Tsvetomir]

Hi, Kiran,

I am pasting the updated example that demonstrates how to handle batch updates:

      public ActionResult Update([DataSourceRequest] DataSourceRequest request, FormCollection model)
        {
                foreach (var key in model.Keys)
                {
                    //Build you update query here. You need to create logic, which finds the separate rows of data in the form collection and updates the db with them
                }
                return Json(new object());
        }

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

[Kiran]

Thank you Tsvetomir!