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.
Hello Karl,
Can you please explain in more details what is your setup and what is the issue you are facing. I am not sure I understand what you are trying to achieve. Thanks.
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>