How to dynamically switch footer templates and data sources?

[Andrew]

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.

 

 

[Joana]

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

[Andrew]

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?

[Joana]

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