How to dynamically switch footer templates and data sources?

4 posts, 1 answers
  1. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 26 Sep Link to this post

    I basically want my combobox to have the option of searching between two sources, and able to switch between them with a click of a button contained in the footer template. I almost got it working but have some problems. Please see:

     

    https://dojo.telerik.com/Esibiy

     

    I can switch the data source and get the results to display, however the problems are:

    1) Button text does not stay changed, if you comment out the .setDataSource() in switch search, then the button text is preserved and switches between Local and Global. But calling .setDataSource() seems to load the template again, though the span accompanying it does not change. I tried setting the footer template in switchSearch with:

    widget.footerTemplate = $("#alternativeTemplate").html(); but that didn't work.

    2) If I type Kiwi, which has no result in local search, and click Global search to switch data source, the filtering does not apply, even though I would like it to because I have entered something in the textbox already. 

     

    How can I make this work? Thanks.

     

     

  2. Joana
    Admin
    Joana avatar
    126 posts

    Posted 28 Sep Link to this post

    Hello Andrew,

    FooterTemplate could be changed via the setOptions() method of the ComboBox widget: http://docs.telerik.com/kendo-ui/api/javascript/ui/widget#methods-setOptions

    For filtering the ComboBox on button click, you could use the inner _filterSource() method.

    I have updated the dojo per your requirements: https://dojo.telerik.com/Esibiy/2. For your convenience, here is how the code look like:

    widget.setOptions({footerTemplate: $("#footerTemplateLocal").html()});
    widget._filterSource({
         value: widget.input.val(),
         operator: widget.options.filter,
         field: widget.options.dataTextField,
         ignoreCase: true
    });


    Regards,
    Joana
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 03 Oct Link to this post

    Thank you, this works, but is there anyway to do this without creating a second footer template? I realize now it seems somewhat silly to create a separate template for changing text. Is there a way to just pass the text as parameters into the template along with the default instance data so my set options footer uses the same template but different text?
  4. Answer
    Joana
    Admin
    Joana avatar
    126 posts

    Posted 05 Oct Link to this post

    Hi Andrew,

    You could use a single template and pass the data before setting it as a footerTemplate of the ComboBox. The code should look like:

    var templateContent = $("#footerTemplate").html();
    var template = kendo.template(templateContent);
     
    var data = [
          { text: "Can't find a group? Try...", searchType: "Global Search"}
    ];
     
    var result = kendo.render(template, data);

    Here is an article explaining the usage of templates:

    http://docs.telerik.com/kendo-ui/framework/templates/overview#create-external-templates

    Let me know if you need further assistance.

    Regards,
    Joana
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top