How can I add additional columns when editing or adding a new record in a Grid?

[CHIHPEI]

The scenario what I am trying to achieve:
For example, 
I got a  "product" model with totally 7 properties,
and in the grid I'm only showing 4 properties,
say showing "ProductId", "ProductName", "SupplierId", "CategoryId"

public product
{
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int? SupplierId { get; set; }
        public int? CategoryId { get; set; }
        public string QuantityPerUnit { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
}

However,
How can I show all 7 properties when editing or adding a new record in Grid ?

[Alexander]

Hi Chihpei,

Thank you for the provided information and code snippets.

You can achieve the desired result by:

• Configuring the columns through the .Columns() configuration method:

.Columns(columns =>
      {
          columns.Bound(p => p.ProductId);
          columns.Bound(p => p.ProductName);
          //configure all the columns...
      })

• Setting the .Hidden() configuration method for some of the columns:

columns.Bound(p => p.SupplierId).Hidden(true);

• Implement the Grid Popup Editing which upon edit, will show all the provided properties of the model:

 @(Html.Kendo().Grid<EmployeeViewModel>()
      .Name("grid")
      ...
      .ToolBar(toolbar => toolbar.Create())
      .Editable(editable=>editable.Mode(GridEditMode.PopUp))
      ...
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(10)
          .Model(model=>
          {
              model.Id(p => p.EmployeeID);
             ...
          })
         ...
      )
)

With that said, I have made a runnable sample for you to review which illustrates the mentioned above.

I hope this helps.

Regards,
Alexander
Progress Telerik

[CHIHPEI]

Hi Alexander,

I've tried the example, and it works adequately for my case.

By the way, there is another additional question.

How can I customize the  appearance of the popup editor? (say like the width and height of the popup)

I'm using the htmlhelper version of grid

Again, thanks for helping out

Chihpei

[Alexander]

Hi Chihpei,

You can change the width and height of the Popup Editor through the .Window() configuration method:

    .Editable(editable=>editable.Mode(GridEditMode.PopUp)
         .Window(window=> 
         {
             window.Height(450);
             window.Width(500);
        }))

You can review the following Telerik REPL that targets this approach.

Additionally, you can implement a Custom Popup Editor. For this approach, there is an available ASP.NET Core example for you to review that achieves the desired behavior:

https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid/CustomPopUpEditor.cshtml