Can EditorTemplateName be set dynamically?

7 posts, 0 answers
  1. Scott
    Scott avatar
    24 posts
    Member since:
    Oct 2019

    Posted 02 Jul 2020 Link to this post

    I have two different editor templates I want to use with the columns in my grid. When the page first initializes I have code that will choose the correct editor name, like this:

    .EditorTemplateName(Model.IsUnique ? "UniqueEditor" : "Date");

     

    This part works fine, but I have a scenario where if the user changes the value in a drop-down I need to swap the EditorTemplateName to use the other one. So basically assume when the page loads that Model.IsUnique = false so it gets assigned the default 'Date' editor, I want to be able to swap that out and use 'UniqueEditor' when they choose a particular value from a dropdown change event. Is this possible?

     

    thanks

     

     

  2. Neli
    Admin
    Neli avatar
    432 posts

    Posted 07 Jul 2020 Link to this post

    Hello Scott,

    In case you need to dynamically change the type of the editor template I would suggest you take a look at the following Knowledge Base article where such implementation is demonstrated. 

    - https://docs.telerik.com/kendo-ui/knowledge-base/grid-use-dynamic-editor

    As far as I understand in your scenario there is an external DropDownList. Depending on the value of the DropDownList the custom editor in the Grid should be changed. I have prepared a Dojo example based on the provided Knowledge base article above. In the Dojo, I have added a DropDownList. The user could change the editor in the Grid by selecting the editor type in the DropDownList. The same approach could be used in UI for ASP.NET Core projects. 

    I hope the provided information and sample will be helpful.

    Regards,
    Neli
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Scott
    Scott avatar
    24 posts
    Member since:
    Oct 2019

    Posted 07 Jul 2020 in reply to Neli Link to this post

    Hey thanks for the reply Neli, but I'm actually using a date picker as my editor. Also my grid is bound to a viewmodel so I need to bind to the correct property andI can't seem to get it to work with what you provided in the example. Is the base editor always an input field? then you tack on the specific control?

    Here's what I tried

     

    var content = $('<input type="text" class="k-textbox" value="DateStart" data-bind="value:DateStart"/>');
                content.appendTo(container);
                content.kendoDatePicker({
                    for: "DateStart",
                    bindto: "Model.DateStart",
                    depth: "Month",
                    format:"MM/dd/yyyy"
                });

     

    I need to be able to toggle he depth and format on these dynamically, thanks

  4. Scott
    Scott avatar
    24 posts
    Member since:
    Oct 2019

    Posted 08 Jul 2020 in reply to Scott Link to this post

    Forgot to post the code for the grid column setup, it's simply like this:

     

    columns.Bound(e => e.DateStart).Title("Begin").Format("{0:MM/dd/yyyy}").EditorTemplateName("dynamicEditorStart");
  5. Neli
    Admin
    Neli avatar
    432 posts

    Posted 10 Jul 2020 Link to this post

    Hello Scott,

    I have prepared a sample project based on the provided requirements. In the project, you will notice that the EditorTemplateName is not configured. For creating the dynamic editor a reference to the Grid is retrieved when the page is loaded. Then the editor is set by using the setOptions function. In the sample project, the format and depth to the DatePicker are dynamically set depending on the model value.

    <script>
        $(document).ready(function () {
            var grid = $('#grid').data('kendoGrid');
            grid.columns[2].editor = rateCustomEditor; 
            grid.setOptions(grid.getOptions())
        })
    
    function rateCustomEditor
        (container, options) {
            if (options.model.OrderDate) {
                var input = $('<input data-bind="value:OrderDate"/>')
                input.appendTo(container);
               
                input.kendoDatePicker({
                    format: options.model.Format,
                    depth: options.model.Depth,
                    start: options.model.Depth
                });
            }
        };
    </script>

    The editor does not need always to be an input field. However, if you inspect the Kendo DatePicker you will notice that it is initialized from an 'input' element

    I hope the provided sample application will be helpful. In case you need further assistance please let me know.

    Regards,
    Neli
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  6. Julius
    Julius avatar
    1 posts
    Member since:
    Jan 2020

    Posted 01 Feb in reply to Neli Link to this post

    Hello,

     

    I know this is an old post, but I'm using the solution provided here to have 2 different editor templates for a double depending on the row data,  Everything looks as it should and the different Editors show when they should, but when I attempt to save the grid I get the following error:

     

    kendo.all.js:866 Uncaught TypeError: e.replace is not a function
        at Object.be.format (kendo.all.js:866)
        at Object.url (kendo.aspnetmvc.js:280)
        at init.setup (kendo.all.js:6422)
        at init.update (kendo.all.js:6407)
        at Object.<anonymous> (kendo.all.js:7485)
        at Function.Deferred (jquery.min.js:2)
        at init._promise (kendo.all.js:7482)
        at init._send (kendo.all.js:7508)
        at init.sync (kendo.all.js:7241)
        at init.saveChanges (kendo.all.js:65264)
    be.format @ kendo.all.js:866
    url @ kendo.aspnetmvc.js:280
    setup @ kendo.all.js:6422
    update @ kendo.all.js:6407
    (anonymous) @ kendo.all.js:7485
    Deferred @ jquery.min.js:2
    _promise @ kendo.all.js:7482
    _send @ kendo.all.js:7508
    sync @ kendo.all.js:7241
    saveChanges @ kendo.all.js:65264
    (anonymous) @ kendo.all.js:65426
    dispatch @ jquery.min.js:3
    r.handle @ jquery.min.js:3

     

    My editor function is:

    function customEditorNeutron
                        (container, options) {
                        var factor = 1;
                        if (options.model.Unit == "Bit" || options.model.Unit == "-") {
                            factor = 1048576;
                        }
                        var input = $('<input data-bind="value:NeutronSeDensity" />')
                        input.appendTo(container);

                        input.kendoNumericTextBox({
                            format: options.model.Format,
                            factor: factor,
                            spinners: false,
                            restrictDecimals: false,
                            round: false,
                            decimals: 8
                        });
                    };

     

    For the moment I've been unable to create a sample project as I need to attempt to save to the DB for the error to appear, but perhaps the error sis known, or someone has encountered before.

     

     

    Thanks for your attention.

  7. Neli
    Admin
    Neli avatar
    432 posts

    Posted 04 Feb Link to this post

    Hello Julius,

    I am afraid that the provided information is not sufficient to be sure what could be the cause of the issue. Could you please provide us more details about the Grid configuration and the implementation at your end? Could you please try to prepare an isolated runnable sample where the issue is demonstrated and send it back? You could for example try to modify the sample project provided in my previous reply in order to for the behavior to be replicated and send it back for a review.  

    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