CODEWITHSUNDEEP
htmlknockout.jsinfragistics
user2571538
user2571538

Reputation: 40

in igCombo - How to display in the combo's input the selectedItem's tepmlate

I have an igCombo in durandal project. I load the igCombo through the date-bind property at the dom. I created an itemTemplate for the select element options. I want that where I select any item, the combo's input will show the selectedItem template. Here is my code, but it doesn't work well; it shows in the inpute the follow thing:

[object object]

here is my code:

    <span id="combo" data-bind="igCombo: {   dataSource: data, textKey: 'name',
                            valueKey: 'id', width: '400px',
                            itemTemplate: '${name} | ${id}',
                            allowCustomValue: true,
                            selectionChanged: function (evt, ui) {
                                var concatenatedValue = ui.items.template
                                ui.owner.text(concatenatedValue);}        
                            }">
    </span>

(Please don't answer me that I can simply write in the selectionChanged function the sane piece of code that I wrote in the itemTemplate property, becouse now it is small piece of code, but when it will be longer code- it is not nice to write it twice!!!)

can you help me?

Upvotes: 0

Views: 2537

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

I could try to explain why the combo input would not intentionally use the itemTemplate - the template is meant to be mostly rich HTML content (images, links and whatnot as in this sample http://www.infragistics.com/products/jquery/sample/combo-box/templating) and you can't put that in an input field.

However, in your case you are just using text so it is doable - first the ui.items provided to the event (as the name suggests) is a collection, so take the first one and the items don't have template property unless that is part of your model that I can't see.

Like other Ignite UI controls, the Combo uses the Templating Engine and so can you! Take the itemTemplate from the control and the item from the data source like in this snippet:

function (evt, ui) {
    var templatedValue = $.ig.tmpl(ui.owner.options.itemTemplate, ui.owner.options.dataSource[ui.items[0].index]);

    ui.owner.text(templatedValue);
}

JSFiddle: http://jsfiddle.net/damyanpetev/tB7Ds/

The templating API is much like the old jQUery templating if you are familiar with that - taking a template and then data object.Using the values from the control itself means you can make them as complicated as you want and write them in one place only, this code doesn't need to change at all.

Upvotes: 1

Related Questions