This is a migrated thread and some comments may be shown as answers.

Can EditorTemplateName be set dynamically?

6 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Veteran
Scott asked on 02 Jul 2020, 05:10 PM

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

 

 

6 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 07 Jul 2020, 11:19 AM

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.
0
Scott
Top achievements
Rank 1
Veteran
answered on 07 Jul 2020, 01:24 PM

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

0
Scott
Top achievements
Rank 1
Veteran
answered on 08 Jul 2020, 05:07 PM

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");
0
Neli
Telerik team
answered on 10 Jul 2020, 11:28 AM

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.
0
Julius
Top achievements
Rank 1
answered on 01 Feb 2021, 10:04 PM

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.

0
Neli
Telerik team
answered on 04 Feb 2021, 02:33 PM

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/.

Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Scott
Top achievements
Rank 1
Veteran
Julius
Top achievements
Rank 1
Share this question
or