Replace template dynamically and bind new template

6 posts, 0 answers
  1. Robin
    Robin avatar
    22 posts
    Member since:
    Jul 2013

    Posted 15 Oct 2019 Link to this post

    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

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    479 posts

    Posted 17 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Robin
    Robin avatar
    22 posts
    Member since:
    Jul 2013

    Posted 22 Oct 2019 Link to this post

    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

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    479 posts

    Posted 23 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Robin
    Robin avatar
    22 posts
    Member since:
    Jul 2013

    Posted 24 Oct 2019 Link to this post

    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

  6. Tsvetomir
    Admin
    Tsvetomir avatar
    479 posts

    Posted 28 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top