Kendo Razor Grid Make Create and Edit Events separate pop-ups

[Joshua]

I currently have the grid below. And I am trying to make a different popup for when someone is creating a new entry vs editing the existing one. Mainly to show different fields and such. How do I go about doing so?

Whether I click on the Create() on the AddNewRecord or the edit, it hits the Edit() event or BeforeEdit() when I switch to that so they end up calling the same Javascript function. And within that function I cant seem to find a way to determine which button was pressed. On here I can only find this reference: Custom Popup Editor for Create and Edit in UI for ASP.NET Core | Telerik Forums , but it doesnt use the same syntax.

                            <div id="minutesDiv">
                                @Html.Kendo().Grid(Model.MinutesList).Name("MinutesGrid").Size(ComponentSize.Small).Editable(GridEditMode.PopUp).Resizable(r => r.Columns(true)).ToolBar(x =>
                                     {
                                         x.Create();
                             }).Columns(col =>
                                     {
                                         col.Bound(c => c.MinuteDate).Title("Date Created").Width(100);
                                         col.Bound(c => c.CreatedBy).Title("Entered By").Width(200);
                                         col.Bound(c => c.Minute).Title("Minutes").Width(200);
                                         col.Command(c =>
                                         {
                                             c.Edit();
                                             c.Destroy();
                                         }).Width(170);
                                     }).Events(e => 
                                         {
                                             e.Edit("HideFieldsOnEdit");
                                         }).Sortable().DataSource(dataSource => dataSource
                                     .Ajax()
                                     .Read(r => r.Url("/Appearances/OutcomeInformation?handler=Read").Data("forgeryToken"))
                                     .Update(r => r.Url("/Appearances/OutcomeInformation?handler=Update").Data("forgeryToken"))
                                     .Create(r => r.Url("/Appearances/OutcomeInformation?handler=Create").Data("forgeryToken"))
                                     .Destroy(r => r.Url("/Appearances/OutcomeInformation?handler=Destroy").Data("forgeryToken"))
                                     .Model(model =>
                                     {
                                         model.Field(Field => Field.MinuteDate);
                                         model.Field(Field => Field.CreatedBy);
                                         model.Field(Field => Field.Minute);
                                     }))
                            </div>

                function HideFieldsOnEdit(e){
                    e.container.find("#MinuteID").hide();
                    e.container.find("label[for='MinuteID']").hide();
                    e.container.find("#CreatedBy").hide();
                    e.container.find("label[for='CreatedBy']").hide();
                    e.container.find("#MinuteDate").hide();
                    e.container.find("label[for='MinuteDate']").hide();   
                    e.container.find("#FileID").hide();
                    e.container.find("label[for='FileID']").hide();
                }

[Eyup]

Hi Joshua,

 

Thank you for reaching out.

You can achieve this requirement using the following approach:

                function HideFieldsOnEdit(e){
                  if(!e.model.isNew()){
                    e.container.find("#MinuteID").hide();
                    e.container.find("label[for='MinuteID']").hide();
                    e.container.find("#CreatedBy").hide();
                    e.container.find("label[for='CreatedBy']").hide();
                    e.container.find("#MinuteDate").hide();
                    e.container.find("label[for='MinuteDate']").hide();   
                    e.container.find("#FileID").hide();
                    e.container.find("label[for='FileID']").hide();
                 }
                }

And here is an alternative solution:

 .Events(e=>e.BeforeEdit("gridBeforeEdit"))

JS:

    <script>
    var isInserting=false;
    function gridBeforeEdit(e){
          isInserting=!e.model.isNew();
    }
    </script>

And in the CustomEditor.cshtml you can divide both the Edit and Insert components in different div containers and hide the div depending on this condition:

@model KendoCoreBasicSample2025Q1P2.Models.OrderViewModel

<script type="text/javascript">
    if(isInserting){
           console.log("editing")
       }
       else{
            console.log("inserting")
       }
</script>

Do you find this answer helpful and on point? Let me know what you think.

 

Regards,
Eyup
Progress Telerik

[Joshua]

Hi Eyup

Unfortunately this doesnt work because both my Create( ) and Edit ( ) return true on the e.model.IsNew( ) call. And I still cannot find any way to make this possible. I also in general cant find any documentation on this site or really anywhere for what attributes are available for an event's model?

So Im playing around with adding html attributes to my Toolbar Create( ) and the Edit( ) command like this:

  @Html.Kendo().Grid(Model.MinutesList).Name("MinutesGrid").Size(ComponentSize.Small).Editable(GridEditMode.PopUp).Resizable(r => r.Columns(true)).ToolBar(x =>
       {
           x.Create().Text("Add Minute").HtmlAttributes(new {@id="AddMinuteButton",@onclick="AddButtonFunction()"});
   }).Columns(col =>
       {
           col.Bound(c => c.MinuteDate).Title("Date Created").Width(100);
           col.Bound(c => c.CreatedBy).Title("Entered By").Width(200);
           col.Bound(c => c.Minute).Title("Minutes").Width(200);
           col.Command(c =>
           {
           c.Edit().HtmlAttributes(new { @id = "EditMinuteButton", @onclick = "MinuteEditHideFields()" });
               c.Destroy();
           }).Width(170);
       }).Events(e => 
           {
             e.Edit("GeneralMinuteGridEvent");
           }).Sortable().DataSource(dataSource => dataSource
       .Ajax()
       .Read(r => r.Url("/Appearances/OutcomeInformation?handler=Read").Data("forgeryToken"))
       .Update(r => r.Url("/Appearances/OutcomeInformation?handler=Update").Data("forgeryToken"))
       .Create(r => r.Url("/Appearances/OutcomeInformation?handler=Create").Data("forgeryToken"))
       .Destroy(r => r.Url("/Appearances/OutcomeInformation?handler=Delete").Data("forgeryToken"))
       .Model(model =>
       {
           model.Field(Field => Field.MinuteDate);
           model.Field(Field => Field.CreatedBy);
           model.Field(Field => Field.Minute);
       }))

And that does hit the functions which look like this:

                function AddButtonFunction(e){
                    alert("Im add button function");
                    
                    var cb = document.getElementById("CreatedBy");
                    cb.style.display = "none"

                }

                function MinuteEditHideFields(e){
                    alert("Im edit button function");

                    var cb = document.getElementById("CreatedBy");
                    cb.style.display = "none"

                }
 
                function HideFieldsOnEditMinutes(e){
                    alert("Im general function from event");
                    if(!e.model.isNew())
                    {
                    e.container.find("#MinuteID").hide();
                    e.container.find("label[for='MinuteID']").hide();
                    e.container.find("#CreatedBy").hide();
                    e.container.find("label[for='CreatedBy']").hide();
                    e.container.find("#MinuteDate").hide();
                    e.container.find("label[for='MinuteDate']").hide();   
                    e.container.find("#FileID").hide();
                    e.container.find("label[for='FileID']").hide();
                    }
                }

But this method does not work because the Edit button ends up calling its onclick method before the grid's edit event so the popup doesnt exist yet to hide the fields. While the add calls the onclick first and this would be possible with that.

Do you have any other ideas?

[Eyup]

Hi Joshua,

The property returns the same both for edit and insert because the Model ID is currently not set.

Can you please add it in the Grid's definition and try the solution again?

       .Model(model =>
       {
           model.Id(m=>m.IdFieldGoesHere);
           model.Field(Field => Field.MinuteDate);
           model.Field(Field => Field.CreatedBy);
           model.Field(Field => Field.Minute);
       })

[Joshua]

Hi Eyup

That worked! I also had to just make sure the ID was populated in the model too (I actually wasnt doing so initially). 

Thank you for your assistance!