Custom Popup Editor for Create and Edit

4 posts, 0 answers
  1. Wolfgang Weilguny
    Wolfgang Weilguny avatar
    12 posts
    Member since:
    Feb 2010

    Posted 12 Aug 2020 Link to this post

    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.

  2. Neli
    Admin
    Neli avatar
    428 posts

    Posted 17 Aug 2020 Link to this post

    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

  3. Wolfgang Weilguny
    Wolfgang Weilguny avatar
    12 posts
    Member since:
    Feb 2010

    Posted 19 Aug 2020 in reply to Neli Link to this post

    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

  4. Neli
    Admin
    Neli avatar
    428 posts

    Posted 21 Aug 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top