Don't show ID column when adding or editing item in MVC Grid

[Oliver]

My grid is showing the ID in a column. The ID however is coming from the database and can't be changed. Also, the database creates it when adding a new item.

In other words: editing the ID when adding or editing a new item makes no sense.

How can I achieve this?

 

Here is what I tried:

@(Html.Kendo().Grid<DepartmentModel>()
      .Name("departmentsGrid")
      .HtmlAttributes(new { @class = "controls-default" })
      .Columns(c =>
      {
          c.Bound(x => x.Id);
          c.Bound(x => x.Name);
          c.Bound(x => x.Description);
          c.Command(b =>
          {
              b.Edit();
              b.Destroy();
          });
      })
      .ToolBar(b => b.Create())
      .Editable(b => b.Mode(GridEditMode.PopUp))
      .Sortable()
      .Scrollable()
      .Pageable(x => x.Refresh(true).PageSizes(true).ButtonCount(5))
      .DataSource(b => b.Ajax()
                        .Model(model =>
                        {
                            model.Id(x => x.Id);
                            model.Field(x => x.Id).Editable(false);
                        })
                        .Read(x => x.Action("ReadDepartments", "Departments").Data("getReadDepartmentsParameters"))
                        .Create(x => x.Action("CreateDepartment", "Departments"))
                        .Update(x => x.Action("UpdateDepartment", "Departments"))
                        .Destroy(x => x.Action("DeleteDepartment", "Departments"))))

 

 

[Dimiter Madjarov]

Hello Oliver,

If the id column should be shown in the Grid, but not displayed in the PopUp editor, I would suggest to attach a handler to the edit event and hide the editor and label for it.
E.g.

.Events(e => e.Edit("edit"))

function edit(e) {
   e.container.find(...).remove();
}

The other option would be to define a custom PopUp editor.

 

Regards,
Dimiter Madjarov
Telerik

 

 

[Borja]

Hello Dimiter,

With this solution the label is still visible, how can I reference the label?

Regards

[Tsvetina]

Hi Carlos,

You can try a different approach. Add a [ScaffoldColumn(false)] annotation attribute to the model fields that should not be shown in the popup editor. This attribute excludes the fields from the automatic editor generation:

[ScaffoldColumn(false)]
public int ProductID{ get; set; }

Regards,
Tsvetina
Progress Telerik

[Borja]

Hi Tsvetina,

If I use the scaffold false option I cant see the column in the grid.

Am I missing something?

Regards

[Alex Hajigeorgieva]

Hello, Carlos,

You are correct that using the ScaffoldColumn attribute will not add the column to the grid either. If you wish to have the Id column in the grid but exclude it from the popup editable window, there are two alternatives:

- remove the label in the Edit() function handler as well:

.Events(e=>e.Edit("onEdit"))

<script>
    function onEdit(e) {
        e.container.find("[for='ProductID']").parent().remove();
        e.container.find("#ProductID").parent().remove();
    }
</script>

 

- use a custom popup template 

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor

.Editable(e => e.Enabled(true).Mode(GridEditMode.PopUp).TemplateName("MyPopup"))

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Borja]

Thanks Alex,

Worked perfectly,

Regards