Access Model in Kendo Grid Popup Editor

1 Answer 148 Views
Grid
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
Jan-Frederik asked on 25 Jan 2022, 04:29 PM | edited on 26 Jan 2022, 12:46 PM

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.

1 Answer, 1 is accepted

Sort by
0
Tony
Top achievements
Rank 2
Iron
Iron
Iron
answered on 26 Jan 2022, 05:59 AM

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
Top achievements
Rank 1
Iron
Iron
commented on 26 Jan 2022, 07:40 AM

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
Top achievements
Rank 2
Iron
Iron
Iron
commented on 26 Jan 2022, 10:28 AM | edited

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
Top achievements
Rank 1
Iron
Iron
commented on 26 Jan 2022, 12:52 PM

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
Top achievements
Rank 2
Iron
Iron
Iron
commented on 26 Jan 2022, 01:16 PM

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>
                        }


                    }
Tags
Grid
Asked by
Jan-Frederik
Top achievements
Rank 1
Iron
Iron
Answers by
Tony
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or