Custom Popup Editor for Create and Edit

[Wolfgang Weilguny]

Hey,

I am trying to choose a different template for a popup editor depending on whether a new entry is inserted or an already existing one is modified. I am aware that I probably have to subscribe to the "beforeEdit" event of the grid and act depending on whether e.model.isNew() returns true or false.

However, I was not able to set a different template based on this decision yet. Could you please outline what the cleanest way for doing this would be?

So far my code looks similar to this:

@(Html.Kendo().Grid<Data.Promotion>()

    .Name("promotionGrid")

    .Columns(c =>

    {

        ...

        c.Command(cmd => cmd.Edit()).Width(120);

        c.Command(cmd => cmd.Destroy()).Width(120);

    })

    .Events(e =>

    {

        e.BeforeEdit("beforeEdit");

        e.Edit("edit");

    })

    .DataSource(c =>

    {

        c.Ajax()

        .Read(o => o.Url("CodeManagement?handler=Read").Data("forgeryToken"))

        ...

        .Model(m =>

        {

            m.Id("PromotionId");

            ...

        });

    })

    .ToolBar(c =>

    {

        c.Create();

    })

    .Editable(c =>

    {

        c.Mode(GridEditMode.PopUp);

        c.TemplateName("Promotion");  // using a static template right now, we want to change that


    })

)

 

Moreover, in the Edit-template, I have to constrain a DatePicker based on some model properties. However, the Model field is not set which leads to a NullReferenceException. Is there any way to set the Model field of the template to the entry that is currently being edited/created?

Thank you.

[Neli]

Hi Wolfgang,

I would suggest you refer to the following article from our documentation where setting different popup editors for creating and updating a Grid row is demonstrated. The example is using Kendo UI for jQuery, but the same approach could be used in UI for ASP.NET Core projects. 

Regarding binding a Model field to the editor, you could use the {EditorName}For HTML helper. You could take a look at the ClientCategory.cshtml tab in the 'Editing custom editor' demo of the Grid where there is such an example for Grid with incell editing and a DropDownList as editor. In your scenario, you could use DatePickerFor, as in the example below:

 @(Html.Kendo().DatePickerFor(m => m.SomeField)      
        .Min(new DateTime(1900, 1, 1)) // Sets the min date of the DatePicker.
        .Max(new DateTime(2099, 12, 31)) // Sets the max date of the DatePicker.
    )

I hope the provided information will be helpful.

Regards,
Neli
Progress Telerik

[Wolfgang Weilguny]

Thank you for your help :)

Regarding the constraining of the DatePicker, I am aware of how the binding works, I actually meant that I want to set the Min and Max fields based on some of the Models properties. In the meantime I have found workarounds but I would still be interested to know what the best way to go about this would be.

Best Regards

[Neli]

Hello Wolfgang,

In order to change the DatePicker options at run time depending on the model values, I would suggest you subscribe to the edit event of the Grid. In the edit event handler, you could get a reference to the rendered DatePicker. Then, you could use the setOptions method and change the needed options. Below is an example:

<script>
    function onEdit(e) {
        var depth = e.model.CalendarDepth;
        var dattime = $("#Date").data("kendoDatePicker");  //example of id for column columns.Bound(p => p.Date)
        dattime.setOptions({
            depth: depth,
            start: depth
        })
    }
</script>

 

Let me know in case you need further assistance on the matter. 

Regards,
Neli
Progress Telerik

[Jordan]

Regarding following article from our documentation where setting different popup editors for creating and updating a Grid row is demonstrated.  I don't see how that will work in ASP.NET Core because you can't use a kendo template for that you have to use a partial view.    Do you have a same sample of using two different editors except for ASP.NET CORE?