Access Model in Kendo Grid Popup Editor

[Jan-Frederik]

Hi, we use a kendo grid with a popup editor.

@(Html.Kendo().Grid<OrderViewModel>()
            .Name("orderGrid")
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderDialog"))
            .ToolBar(x => x.Create().Text("Add Order"))
            .Columns(columns =>
            {
                columns.Bound(column => column.OrderID);
                columns.Bound(column => column.Name);
                columns.Command(column =>
                {
                    column.Edit();
                    column.Destroy();
                }).Width(230);
            })
            .Events(x => x.Edit("onGridEdit"))
            .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Orders/Index?handler=ReadOrder"))
                .Update(u => u.Url("/Orders/Index?handler=UpdateOrder"))
                .Create(c => c.Url("/Orders/Index?handler=CreateOrder"))
                .Destroy(d => d.Url("/Orders/Index?handler=DestroyOrder"))
                .Model(m =>
                {
                    m.Id(id => id.OrderID);
                })
                .PageSize(10)
            )
            .Pageable()
        )

The OrderDialog looks something like this

@model Models.OrderViewModel

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

...

We would like to be able to hide some fields in the editor if the entity being edited is new (which can be determined by the OrderID). This can be achieved by using the edit event of the grid, but we would rather like to do it based on a model property, like this:

@model Models.OrderViewModel

@if(Model.OrderID == 0)

{

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

}

Is this possible? When debugging, it seems the editor is initialized with a null model, so that the line above crashes.

[Tony]

HI Jan-Frederik,

you can do the following on your edit event function

  function onGridEdit(e) {
    //checks if its a new record else its an existing record being edited. 
        if (e.model.isNew()) {
      
        } else {
         
        }
    }

[Jan-Frederik]

Hi Toni,

thank you. Yes, we have already implemented that, but it seems a solution like @if(Model.ID== 0) directly in the view would be cleaner. I assume it is not possible?

[Tony]

Hi Jan-Frederik,

i believe the reason you would like to do it via razor in the view is because you want to hide the some of the fields while recording a new entry?

if thats the case. what if you try the below inside the edit function when its a new record.

if (e.model.OrderID== 0) {
//hide some fields
            }

 

kind regards

Tony

 

[Jan-Frederik]

Hi Toni,

is it absolutely necessary to use the edit function of the grid? See the updated question. We would like to have the editor template of the grid to use a condition based on the model.

[Tony]

Hi Jan-Frederik,

its not always necessary to use the edit function of the grid. But it allows you to manage the data easily and to manipulate. It will always crash without checking the if your model is null. see below code

   @if (Model != null)
                    {
                        if (Model.OrderID == 0)
                        {
//dont display the field
                        }
                        else
                        {
//display the field
                           <div class="k-edit-label">
                             @Html.LabelFor(m => m.Name)
                           </div>
                           <div class="k-edit-field">
                             @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                           </div>
                        }


                    }