Create & edit view on popup editor

[Zoran]

I have a view for Create as well as Edit. My question is can I use those views to show when I click the Create New Popup dialog? 

 

So if I click the Add new record, it'll show the built in grid popup dialog window. Instead of the built in dialog, can I set the grid to show my own Create view? The Create.cshtml? The same goes for the Edit view, when I click the Edit button, can I set it to use the Edit.cshtml instead of the built it edit popup dialog?

[Mihaela]

Hi Zoran,

I noticed that you have submitted the same query as a support ticket, as I have already answered your question in the ticket, I will post the same here in case someone else has the same question:

You could achieve the desired result via any of the following approaches:

• Create a single View page that contains all fields for both "Edit" and "Create" operations (merge the two views). To display the appropriate fields based on the current operation, wrap the editor fields in separate "div" elements with a specified class. For example:

 

//~Views/Shared/EditorTemplates/CustomPopup.cshtml
@model ProjectName.Models.ModelName

    <div class="forCreate">
        <div class="k-edit-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="k-edit-field">
            @Html.EditorFor(model => model.Status)
            @Html.ValidationMessageFor(model => model.Status)
        </div>
    </div>

    <div class="forEdit">
        <div class="k-edit-label">
            @Html.LabelFor(model => model.Project)
        </div>
        <div class="k-edit-field">
            @Html.TextBoxFor(model => model.Project)
            @Html.ValidationMessageFor(model => model.Project)
        </div>
    </div>
    ....

 

Then subscribe to the "edit" event of the Grid to determine whether the current operation is "create" or "update" and remove the non-required fields via jQuery:

 

@(Html.Kendo().Grid <Model>()
  .Name("grid")
  .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopup"))
  .Events(ev => ev.Edit("onEdit"))
  ...
)

<script>
function onEdit(e) {
  if (e.model.isNew()) {
    $(".forEdit").remove();
  } else {
     $(".forCreate").remove();
  }
}
</script>

 

• Modify the options of the grid on the client through the "setOptions" method and specify the id of the template within the $(document).ready() event handler. Here is an example:

 

//Grid configuration
@(Html.Kendo().Grid <Model>()
  .Name("grid")
  .Editable(editable => editable.Mode(GridEditMode.PopUp))
  .ToolBar(toolBar => toolBar.Create())
   ...
)

<script>
$(document).ready(function () {
  var grid = $('#grid').data('kendoGrid'); //get an instance of the grid widget
  var options = gridData.getOptions(); //get the current grid's settings/options
  grid.setOptions({  //change the "editable" options of the grid to set the dynamic template
    editable: {
      mode: "popup",
      template: $("#template-config").html() 
    }
  });
});
</script>

<script type="text/x-kendo-template" id="template-config">
    #if(data.isNew()) {#
    #var createTemp = kendo.template($("\#createTemplate").html());#
    #=createTemp(data)#
    #} else {#
    #var editTemp = kendo.template($("\#editTemplate").html());#
    #=editTemp(data)#
    #}#
</script>

<script type="text/x-kendo-template" id="createTemplate">
    @{
        await Html.RenderPartialAsync("Create"); //load the template as a Partial View ("~Views/Home/Create.cshtml"
    }
</script>
<script type="text/x-kendo-template" id="editTemplate">
    @{
        await Html.RenderPartialAsync("Edit"); //load the template as a Partial View ("~Views/Home/Edit.cshtml"
    }
</script>

 

For more information regarding this approach, check out the forum thread below: 

https://www.telerik.com/forums/popup-grid-different-templates-on-edit-create

 

Regards, Mihaela Progress Telerik