We are displaying various types of data, including dates and numeric values within itemTemplates in our igGrid.
The issue that we have is that we cannot figure out how to safely format the values for display, including consideration of internationalization.
Can someone please point us in the right direction? Would it make more sense to use a grid as the column editor and, if so, can you please provide an example?
Hi, Karl.
The itemTempalte value is a string of the following format:
"<p>Some Text: ${ProductID}</p>"
You can change it to:
"<p>" + someText + ": ${ProductID}</p>".
For sure what you need is to have a data source, that is localized for the different languages and some additional files for the labels, like "someText" that will be localized also. So before the grid is rendered the template will be already localized. Then you can use the formatter function for every single column. In this way you be able to format the different types of data according to the formats that the country serves. You can also entirely use only the formatter instead of concatenating the template string.
I will wait for your feedback and don't hesitate if you have more questions.
Best regards, Nikolay Alipiev
Sorry, the real problem is listed in the title, but is not in the body of the question: the issue is with the columns in an igCombo that is used as the editor for a column in the igGrid. How can we apply formatting to those columns which are defined in an itemTemplate of the combo.
If it's not problem for you to provide us with the code that you think you will have problem with. As far as I understand you have a igGrid with editing enabled, and when you want to change the value of a single cell, then an igCombo appears as an editor. So your question is can the data in the igCombo be localizable, right?
Thanks for the patience and we will wait for your feedback.
Best regards,
Nikolay Alipiev
Yes, this is exactly what we need to do. The issue is trying to figure out is how to effectively provide the same functionality as the grid formatter in the combo dropdown columns (using a grid as the editor would also work if that was supported).
Here is the code (we have a lot of our own properties added and actually use the same columns as in igGrid for the columns, which is where the column structure comes from):
<table id="ugNotices"></table><script type="text/javascript">$.ig.loader(function () {var ugNotices_DataArray = [];var ugNotices_DataSource = new $.ig.ArrayDataSource({dataSource: ugNotices_DataArray, schema: {fields: [{name: "Addendum",type: "string"}]} });var ugNotices_Addendum_DataArray = [["","",""],["A","Addendum A","8/4/2008"],["B","Addendum B","7/17/2008"],["C","Addendum C","7/22/2008"],["D","Addendum D","10/13/2008"]];var ugNotices_Addendum_DataSource = new $.ig.ArrayDataSource({dataSource: ugNotices_Addendum_DataArray, schema: {fields: [{name: "LookupId",type: "string"},{name: "Description",type: "string"},{name: "ReceivedDate",type: "string"}]} });ugNotices_Addendum_DataSource.dataBind();var sGridId = '#ugNotices';try{OnPreInitializeGrid(sGridId);$(sGridId).igGrid({ fixedSize: false, enableUTCDates: true, PrologTableType: 108, HasSortOrderField: true, HasItemNumberField: true, ItemNumberFieldName: "Number", ItemNumberFieldLength: 3, aggregateTransactions: true, autoCommit: true, autofitLastColumn: false, autoGenerateColumns: false, avgRowHeight: "20", columns: [ { headerText: "Addendum", key: "Addendum", dataType: "string", isButton: false, format: "", width: "120", hidden: false, unbound: false, maxLength: 255, cssClass: "", defaultValue: "", prologLookupListType: 907 } ], dataSource: ugNotices_DataSource, features: [ { allowDoubleClickToResize: true, deferredResizing: false, columnSettings: [ { allowResizing: true, columnKey: "Addendum" } ], name: "Resizing" }, { mode: "row", mouseDragSelect: false, multipleSelection: false, name: "Selection" }, { name: "Sorting", type: "local" }, { visibility: "overflow", style: "tooltip", showDelay: 500, hideDelay: 250, columnSettings: [ { allowTooltips: true, columnKey: "Addendum" } ], name: "Tooltips" }, { enableAddRow: false, enableDeleteRow: false, showDoneCancelButtons: false, editMode: "cell", columnSettings: [ { editorOptions: { allowCustomValue: false, autoComplete: true, dataSource: ugNotices_Addendum_DataSource, dropDownWidth: 350, enableActiveItem: true, enableClearButton: false, headerTemplate: "<div class='igComboHeaderOuter'><div style='width: 329px'><div class='igComboHeader' style='width: 25%;'>Number</div><div class='igComboHeader' style='width: 50%;'>Description</div><div class='igComboHeader' style='width: 25%;'>Received Date</div></div></div>", itemTemplate: "<div class='igComboColumn' style='width: 25%;'>${LookupId}</div><div class='igComboColumn' style='width: 50%;'>${Description}</div><div class='igComboColumn GCRight' style='width: 25%;'>${ReceivedDate}</div>", mode: "editable", textKey: "LookupId", textKeyType: "string", valueKey: "LookupId", valueKeyType: "string", columns: [ { headerText: "Number", key: "LookupId", dataType: "string", isButton: false, format: "", formatter: function(val) {{return escapeHTML(val);}}, width: "25%", hidden: false, unbound: false, tooltip: "", maxLength: 0, defaultValue: "", prologLookupListType: 0 }, { headerText: "Description", key: "Description", dataType: "string", isButton: false, format: "", formatter: function(val) {{return escapeHTML(val);}}, width: "50%", hidden: false, unbound: false, tooltip: "", maxLength: 0, defaultValue: "", prologLookupListType: 0 }, { headerText: "Received Date", key: "ReceivedDate", dataType: "date", isButton: false, format: "date", formatter: null, width: "25%", hidden: false, unbound: false, tooltip: "", maxLength: 0, defaultValue: "", prologLookupListType: 0 } ] }, editorType: "combo", readOnly: false, columnKey: "Addendum" } ], name: "Updating" } ], height: "320px", primaryKey: "UniqueId", renderCheckboxes: true, rowTemplate: "<tr><td height='20px'>{{html Addendum}}</td></tr>", rowVirtualization: false, showFooter: false, showHeader: true, virtualizationMode: "continuous", width: 980});} catch (ex) {alert('Javascript Error (InitializeGrid ' + sGridId + ') \r' + ex.message);}});</script></div>
Thank you for the detailed information and for the patience.
First option is, as described already in my previous posts, to format the template before it is passed to the igCombo editor. As far as I see that is needed for your headerTemplate in the igCombo editor.
You can also try the set the format option of the igCombo editor, but this formats that can be applied are only only from certan type. You can check format option here.
The igCombo don't have formatter function, like the igGrid, but because the igGrid uses internal $.ig.formatter you can try to use it. You can search for it in our code and see if it is going to help you.
I will wait for your feedback.
Best regards, Nikolay
We finally figured out that the best available option is to format the data on the server prior to delivering it to the combo. However, I would like to request that the combo be updated (or a new control be created) to treat columns and formatting of data as more first class citizens than they currently are.
We have a tremendous amount of business information that is presented in multi-column combos and we would like to offer users the ability to add new entries (through our own dialogs), but the current design makes it quite complex.
I guess you already forgot about this issue, but we are not yet. I'm writing you because we have a new system that you can request the igCombo to have format function similar to that one in the igGrid. You can suggest new product ideas for future versions (or vote for existing ones) at http://ideas.infragistics.com.
Steps to create your idea:1. Log into the Infragistics Product Ideas site at http://ideas.infragistics.com (creating a new login if needed).2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)3. Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!
The benefits of submitting the product idea yourself include:
- Direct communication with our product management team regarding your product idea.- Notifications whenever new information regarding your idea becomes available.
Additional benefits of the product idea system include:
- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.- Allow you to shape the future of our products by requesting new controls and products altogether.- You and other developers can discuss existing product ideas with members of our Product Management team.
The product ideas site allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Thank you for using Infragistics controls.
My colleagues helped to discover an igLoader option called 'autoDetectLocale' that automatically loads regional settings depending on the browser language. If you follow that sample and go to the HTML code, then using the same code, you need just to add the 'autoDetectLocale' option:
$.ig.loader({
scriptPath: '/samplesbrowser/samplescommon/jQuery/common/js/',
cssPath: '/samplesbrowser/samplescommon/jQuery/common/css/',
resources: 'igCombo',
autoDetectLocale: true });
In this sample you have also Templating that contains a value of type date. So it worked for me and depending on the browser settings it loads different date formats. I hope this is something that is new for you and will help you resolve your case.
If your request is more likely to have a format function, similar to that in that in the igGrid, in combination with Templating, this is not supported by the igCombo. I guess you expect the value as a parameter to a function, which will allow you to modify it, before it was rendered. Is this the behavior you are expecting from the igCombo? Please correct me if I'm wrong.