Can EditorTemplateName be set dynamically?

[Scott]

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

 

 

[Neli]

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

[Scott]

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

[Scott]

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");

[Neli]

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

[Julius]

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.

[Neli]

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