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

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

6 Answers 391 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 06 Apr 2016, 03:09 PM

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"))))

 

 

6 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 08 Apr 2016, 07:39 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Borja
Top achievements
Rank 1
answered on 25 Jan 2019, 08:04 AM

Hello Dimiter,

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

Regards

0
Tsvetina
Telerik team
answered on 25 Jan 2019, 11:30 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Borja
Top achievements
Rank 1
answered on 25 Jan 2019, 11:46 AM

Hi Tsvetina,

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

Am I missing something?

Regards

0
Alex Hajigeorgieva
Telerik team
answered on 29 Jan 2019, 11:06 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Borja
Top achievements
Rank 1
answered on 29 Jan 2019, 11:11 AM

Thanks Alex,

Worked perfectly,

Regards

Tags
Grid
Asked by
Oliver
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Borja
Top achievements
Rank 1
Tsvetina
Telerik team
Alex Hajigeorgieva
Telerik team
Share this question
or