[Solved] Grid inline editing

[sebrojas]

Hello Telerik MVC community,

I wanna know how can I do an inline editing, when there are relationships. For example, I have an entity customer, the entity that I list in the grid. I going to edit un row of the grid, but one of the columns is Type, and i want that the type only can take the values from the entity Type, so I wanna show a dropdownlist istead of a textbox.

thank you!

[Simon Hazelton]

If you download the latest beta Q2 2010, there's an example of this, which after installation will be available to you at

http://localhost:8301/grid/displayandedittemplates

Bear in mind the port number may be different for your machine.

[sebrojas]

Thank you!

But I have a problem. i'm using the Entity Framework with my app. In the example you said, it tells: Decorate your model with metadata attributes to specify its data type, UI hint (name of the ASCX to use) etc. So I do it in my entity class, but when I update the model, I have to put the annotatiosn again. How can I decorate my model to work with the grid without have to decorate each time I upsate the model?
thank you

[Simon Hazelton]

No Problem!

Just a bit of code to write but once you've done it, you'll love the results!

Data Annotations with EF

[sebrojas]

Thank you again Simon Hazelton, I'm going to read uit and try it

[sebrojas]

Not apply

[sebrojas]

Hello, my inline editing is working! but I have a problem with the UI: the columns in edito mode are not displayed correctly. The width of the columns in the editable row is differente to the rest of the grid. This only happens when I include a DetailView forthe rows!

Normal mode: http://alt24si.net/telerik/normal.jpg

Edit mode: http://alt24si.net/telerik/edit-mode.jpg

There id my view:

<% Html.Telerik().Grid(Model)
            .Name("Grid")
            .DataKeys(keys =>
            {
                keys.Add(g => g.GrupoID);
            })
            .ToolBar(commands => commands.Insert())

            .Columns((IEnumerable<GridColumnSettings>)ViewData["Columns"])
            .DataBinding(dataBinding => dataBinding.Server()
                .Select("Index", "Grupos")
                .Insert("Crear", "Grupos")
                .Update("Editar", "Grupos")
                .Delete("Eliminar", "Grupos"))

            .CellAction(cell =>
            {
                // "DataItem" is the Order object to which the current row is bound to
                if (cell.Column.Title == "Estado" && cell.DataItem.Estado != null)
                {
                    //Set the background of the entire row
                    if (cell.DataItem.Estado.EstadoID == 2)
                        cell.HtmlAttributes["style"] = "color:#CC0000;";
                    else
                        cell.HtmlAttributes["style"] = "color:green;";
                }
            })
            .DetailView(perfilesDetailView => perfilesDetailView.Template(g =>
            {
                %>
                    <% Html.Telerik().Grid(g.Perfiles)
                            .Name("Periles_" + g.GrupoID)
                            .DataKeys(keys =>
                            {
                                keys.Add(p => p.PerfilID);
                            })
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.Aplicacion.Nombre);
                                columns.Bound(p => p.Estado);
                                columns.Bound(p => p.Nombre);
                                columns.Bound(p => p.Descripcion);
                            })
                            .CellAction(cell =>
                            {
                                // "DataItem" is the Order object to which the current row is bound to
                                if (cell.Column.Title == "Estado" && cell.DataItem.Estado != null)
                                {
                                    //Set the background of the entire row
                                    if (cell.DataItem.Estado.EstadoID == 2)
                                        cell.HtmlAttributes["style"] = "color:#CC0000;";
                                    else
                                        cell.HtmlAttributes["style"] = "color:green;";
                                }
                            })
                            .Pageable(settings => settings.Style(GridPagerStyles.NextPreviousAndNumeric))
                            .Sortable()
                            .Render();
                    %>
                <%
            }
            ))
            .RowAction(row =>
            {
                if (row.Index == 1)
                {
                    row.DetailRow.Expanded = true;
                }
            })
            .Pageable(settings => settings.Style(GridPagerStyles.NextPreviousAndNumeric))
            .Sortable()
            .Filterable()
            .Groupable()
            .Editable(editing => editing.Mode(GridEditMode.InLine))
            .Resizable(resizing => resizing.Columns(true))
            .Render();
    %>

There is my controller:

[GridAction]
        public ActionResult Index()
        {
            var columns = new[]
            {
                new GridColumnSettings
                {
                    Member = "Aplicacion",
                    Width = "130px"
                },
                new GridColumnSettings
                {
                    Member = "Estado",
                    Width = "130px",
                    Format = "{0:c}",
                },
                new GridColumnSettings
                {
                    Member = "Nombre",
                    Width = "130px"
                },
                new GridColumnSettings
                {
                    Member = "Descripcion",
                    Width = "300px"
                },
                new GridCommandColumnSettings
                {
                    Commands =
                    {
                        new GridEditActionCommand(),
                        new GridDeleteActionCommand()
                    },
                    Width = "180px",
                    Title = "Acciones"
                }
            };
            ViewData["Columns"] = columns;
            ViewData["aplicaciones"] = serviciosGrupos.getAplicaciones();
            ViewData["estados"] = serviciosGrupos.getEstados();
            return View(serviciosGrupos.getGrupos());
        }

thank you

[Atanas Korchev]

Hi sebrojas,

You need to set the width of your columns in order to have the same column width with inline editing.

Regards,
Atanas Korchev
the Telerik team

[sebrojas]

Hello, in my actual code I have seted the widht of the colums, but as soon as I put the DetailView, the redendering is not correct:

<% Html.Telerik().Grid(Model)
            .Name("Grid")
            .DataKeys(keys =>
            {
                keys.Add(g => g.GrupoID)/*.RouteKey("Id")*/;
            })
            .ToolBar(commands => commands.Insert())
            .Columns(columns =>
            {
                columns.Bound(g => g.Aplicacion).Width(130).Sortable(true).Groupable(false);
                columns.Bound(g => g.Estado).Width(130).Sortable(false).Groupable(false);
                columns.Bound(g => g.Nombre).Width(150);
                columns.Bound(g => g.Descripcion).Width(300);
                columns.Command(commands =>
                {
                    commands.Edit();
                    commands.Delete();
                }).Title("Acciones").Width(150);
            })
            .DataBinding(dataBinding => dataBinding.Server()
                .Select("Index", "Grupos")
                .Insert("Crear", "Grupos")
                .Update("Editar", "Grupos")
                .Delete("Eliminar", "Grupos"))
            .CellAction(cell =>
            {
                // "DataItem" is the Order object to which the current row is bound to
                if (!cell.InEditMode && cell.Column.Title == "Estado" && cell.DataItem.Estado != null)
                {
                    //Set the background of the entire row
                    if (cell.DataItem.Estado.EstadoID == 2)
                        cell.HtmlAttributes["style"] = "color:#CC0000;";
                    else
                        cell.HtmlAttributes["style"] = "color:green;";
                }
            })
            .DetailView(perfilesDetailView => perfilesDetailView.Template(g =>
            {
                %>
                    <% Html.Telerik().TabStrip()
                           // Make the Name unique
                           .Name("TabStrip_" + g.GrupoID)
                           .SelectedIndex(0)
                           .Items(items =>
                            {
                                items.Add().Text("Perfiles").Content(() =>
                                {
                                    // First tab will show the Orders collection
                                    %>
                                        <% Html.Telerik().Grid(g.Perfiles)
                                                .Name("Periles_" + g.GrupoID)
                                                .DataKeys(keys =>
                                                {
                                                    keys.Add(p => p.PerfilID);
                                                })
                                                .Columns(columns =>
                                                {
                                                    columns.Bound(p => p.Aplicacion);
                                                    columns.Bound(p => p.Estado);
                                                    columns.Bound(p => p.Nombre);
                                                    columns.Bound(p => p.Descripcion);
                                                })
                                                .CellAction(cell =>
                                                {
                                                    // "DataItem" is the Order object to which the current row is bound to
                                                    if (cell.Column.Title == "Estado" && cell.DataItem.Estado != null)
                                                    {
                                                        //Set the background of the entire row
                                                        if (cell.DataItem.Estado.EstadoID == 2)
                                                            cell.HtmlAttributes["style"] = "color:#CC0000;";
                                                        else
                                                            cell.HtmlAttributes["style"] = "color:green;";
                                                    }
                                                })
                                                .Pageable(settings => settings.Style(GridPagerStyles.NextPreviousAndNumeric))
                                                .Sortable()
                                                .Render();
                                        %>
                                    <%
                                    });
                                items.Add().Text("Users").Content(() =>
                                {
                                    // Second tab will show Employee details
                                    %>
                                    Under cosntruction
                                    <%
                                });
                            })
                           .Render();
                    %>
                <%
            }
            ))
           .RowAction(row =>
           {
               if (row.Index == 1)
               {
                   row.DetailRow.Expanded = true;
               }
           })
            .Pageable(settings => settings.Style(GridPagerStyles.NextPreviousAndNumeric))
            .Sortable()
            .Filterable()
            .Groupable()
            .Editable(settings => settings.Mode(GridEditMode.InLine))
            .Resizable(settings => settings.Columns(true))
            .Render();
    %>

If I comment the code of DetailView, the rendering is just fine

[sebrojas]

Hello, I attach some images of what is happening, thank you

[Atanas Korchev]

Hello sebrojas,

Could you please provide a sample project which shows the erroneous behavior? Since the forums do not allow attaching anything but images you could use a public file hosting service such as dropbox.com or skydrive.live.com.

Regards,
Atanas Korchev
the Telerik team