Replace template dynamically and bind new template

[Robin]

Hi

 

To speed up a grid with a lot of dropdownlists, I want to only write the text to the cells initially and, on click, load the dropdownlist of this cell, replace the text with it, so the user can use the dropdownlist from now on.

I'm replacing the text-cell-template with the dropdownlist-cell-template, but the dropdownlist does not get bound automatically.

What's the best way, to initialize the new dropdownlist-cell-template only, without rerendering/rebinding everything else?

 

Example: http://dojo.telerik.com/uZOBALUp/2

 

Greets Robin

[Tsvetomir]

Hi Robin,

I have investigated the provided sample. It appears that the template is only rendered and the values from the data item are passed to it. When the template is rendered with the help of the render() method, the values could be used with the #=# syntax.

In order to bind the HTML elements to their corresponding values, you would have to use the bind() method. Since you would like to avoid rebinding the whole grid, bind only the row to its corresponding data item:

        onToggleClick: function (ev) {
          console.log()
          var template = kendo.template($('#cell-template-Text-edit').html());
          template = kendo.render(template, [ev.data]);

          var row = ev.target.closest("tr");
          var dt = $("#grid").getKendoGrid().dataItem(row);

          $('#cell' + ev.data.Id).replaceWith(template);
          kendo.bind($('#cell' + ev.data.Id), dt);
          // ####################################
          // ### TODO: BIND NEW TEMPLATE HERE ###
          // ####################################
        }

Here is the modified Dojo:

http://dojo.telerik.com/ECAHeVuF

I hope this helps.

 

Best regards,
Tsvetomir
Progress Telerik

[Robin]

Hi Tsvetomir

Seems to be fine for bindings this way.
It was the dataItem used to bind to the new template, I was missing.

But for events it still seems to be broken:

http://dojo.telerik.com/ECAHeVuF/6

While using the edit template in first step, it works and alerts the message.
If I use the toggle and rebind, the change events throws and error in console, respectively the event don't even get called because of an error.

Any thoughts an this as well?

Greets Robin

[Tsvetomir]

Hi Robin,

The events are not persisted because they are not part of the data item. Therefore, before calling the bind() method, you would have to extend the data item with a declaration of the event:

        onToggleClick: function (ev) {
          console.log()
          var template = kendo.template($('#cell-template-Text-edit').html());
          template = kendo.render(template, [ev.data]);

          var row = ev.target.closest("tr");
          var dt = $("#grid").getKendoGrid().dataItem(row);

          $('#cell' + ev.data.Id).replaceWith(template);
          dt.onTextChange = function (e){alert(1);}
          kendo.bind($('#cell' + ev.data.Id), dt);
        },

You can assign the onTextChange event to a variable and refer it instead hardcoding it as shown above.

Give this a try and let me know how it works out.

 

Regards,
Tsvetomir
Progress Telerik

[Robin]

Hi Tsvetomir

Makes sence, thanks.

It's working with the additional line "dt.onTextChange = this.onTextChange.bind(this);".

http://dojo.telerik.com/ECAHeVuF/9

Greets Robin

[Tsvetomir]

Hi Robin,

Thank you for sharing the updated sample. I am glad to hear that you have managed to resolve the issue.

It appears that the example is working as per your requirements. However, in case there is something else I can help with, let me know.

 

Kind regards,
Tsvetomir
Progress Telerik