Hi,
I have a list of objects in a Model (among other things). I want to create a combobox with ItemTemplate with a couple of the properties in the object type in the list.
When the page renders, all of the sections of the template are empty. Except the one I specified on the ValueKey. I looked at the html generated, and the json Infragistics creates only has the ValueKey field.
Where can I specify the fields that I need to send to the client? Instead of infragistics assuming that I only need the ValueKey?
PS. Are there any plans of providing a better ItemTemplate (strongly typed) functionality in the future?
Thanks,
Carlos
Thank you again Viktor.
I also want to make note (for other people using the controls) that the template can be designed inside a "text/x-jquery-tmpl" script and then use it when initializing the element in javascript/jquery:
itemTemplate: $("#comboItemTemplate").html()
Works great, and you get better tag element intellisence.
Regards,
Hi Carlos,
By default, in order to improve performance, the Mvc combo sends to client only data related to valueKey and textKey.
If application needs all data defined by DataSource, then it should disable CompactData property/setter:
<%= Html.Infragistics().ComboFor(m => m.Combo1).CompactData(false)....Render() %>
I wrote for you a simple sample, which uses dataSource with 5 fields and outputs all of them. You may copy/paste those codes into any html/aspx, which has references to js/css resources required by a widget and igCombo. Mvc-server codes should work similar way.
<script type="text/javascript"> $(function () { function myObj(val) { this._val = val; } myObj.prototype.toString = function () { return this._val || 'none'; }
function myDate(val) { this._val = val; } myDate.prototype.toString = function () { var d = this._val; if (!d || !d.getMonth) { return 'null'; } return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); }
var data = [ { val: 1, txt: 'a', number: 12, obj: new myObj('obj1'), date: new myDate(new Date(2010, 2, 2)) }, { val: 2, txt: 'b', number: 34, obj: new myObj(), date: new myDate(new Date(2010, 3, 3)) }, { val: 3, txt: 'c', number: 56, obj: new myObj('obj3'), date: new myDate() } ];
$('#combo1').igCombo({ valueKey: 'val', textKey: 'txt', itemTemplate: '${val}:${txt}:<i>${number}</i>:<span style="background:red">${obj}</span>:${date}', dataSource: data }); });</script>
<span id="combo1"></span>
In my sample I used following js/css
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script><link type="text/css" href="http://localhost/ig_ui11.2/themes/base/ig.ui.combo.css" rel="stylesheet" /><script type="text/javascript" src="http://localhost/ig_ui11.2/js/ig.util.js"></script><script type="text/javascript" src="http://localhost/ig_ui11.2/js/ig.dataSource.js"></script><script type="text/javascript" src="http://localhost/ig_ui11.2/js/ig.ui.combo.js"></script>