I have 2 controls on my page - an igGrid and an igDatePicker. Sometimes I need the date to display in en-US format and other times in en-GB format (and will be adding additional languages over time). I have the following includes to support localization.
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/i18n/regional/infragistics.ui.regional-en.js"></script><script src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/i18n/regional/infragistics.ui.regional-en-GB.js"></script>
For the igDatePicker I set the regional option to either "en-US" or "en-GB", depending upon the user's language settings. This works fine.
However, how do I get the date in the igGrid to display correctly? The column is defined as show below.
{ headerText: "Date", key: "Date", width: 175, dataType: "date", format: "dateTime" }
The value in the datasource has the format "yyyy-mm-ddThh:mm:ss" (I've also tried "yyyy-mm-dd hh:mm:ss").
The date in the igGrid formats according to the last regional js file list. In this example, the date is displayed in the igGrid as dd/mm/yyyy hh:mm (for language en-GB).
If the order of the regional js files is switched, the date in the igGrid displays as mm/dd/yyyy hh:mm AM/PM (either AM or PM is displayed) (for language en-US).
How do I get the igGrid date to display according to the user's language settings. I cannot find an option similar to the one for the igDatePicker.
Thanks for any assistance.
Hello hrwebb,
I suggest you to use Infragistics Loader. When you use Infragistics Loader, you may set the locale and regional properties explicitly and these settings will be applied to the whole page. Here is a detailed information about adding required resources automatically with the Infragistics Loader for your reference: http://www.igniteui.com/help/using-infragistics-loader If you need further assistance, please let me know.
Regards,Tsanna
I have been unable to get the desired date format in a grid using the igLoader.
I've attached a file that includes code to display a datepicker using the igLoader (DatePickerTestImplicit) and without using the igLoader (DatePickerTestExplicit). I tested the code on a machine whose locale and language was set for English (UK). The code without the igLoader works fine. The one with the igLoader doesn't work (i.e. the date is in format mm/dd/yyyy rather than dd/mm/yyyy).
I'm still uncertain how the igLoader is supposed to be used to get the correct date format based upon the current locale. Is there something wrong with how I'm instantiating the igLoader?
I'm experiencing a problem using the igLoader. I have the following defined in my code instantiate the igLoader.
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.loader.js"></script>
<script type="text/javascript">function getLang(){ var lang; if (navigator.browserLanguage != undefined) lang = navigator.browserLanguage; else if (navigator.languages != undefined) lang = navigator.languages[0]; else lang = navigator.language; if (lang = "en-US") lang = "en"; return lang;}
var myLang = getLang();
$.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/", cssPath: "http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/", resources: "igGrid.Updating,igGrid.Resizing,igGrid.Selection,igGrid.ColumnFixing,igDialog", autoDetectLocale: true, regional: myLang });</script>
I also have an event handler defined on an igGrid to modify a cell's behavior when the cell enters edit mode (see behow). However, the statement that references the igEditor function yields the error "Uncaught TypeError: $(...).igEditor is not a function". This doesn't occur when I don't use the igLoader. I assume I need to include an additional resource, however, I don't know which resource to add. I've tried "igEditor" and that yields an error when the igLoader function executes. I've tried "igEditors" which yields no errors when igLoader executes but doesn't resolve the problem when the function below executes.
$("#gridAgeDataAddEdit").on("iggridupdatingeditcellstarted", function (evt, ui) { // We will only modify the AgeValue column if (ui.columnKey == "AgeValue") { // Get a javascript object for the current record var recordObj = ui.owner.grid.findRecordByKey(ui.rowID); var field = ''; // Get the current value in column AgeDataType if (recordObj) { field = recordObj.AgeDataType; } switch (field) { // If the current age value is an integer, do not allow decimal data or values < 0 case 'integer': $(ui.editor).igEditor("option", "maxDecimals", 0); $(ui.editor).igEditor("option", "minValue", 0); break; // If the current age value is a numeric, allow up to 2 decimal places, but no values < 0 case 'numeric': $(ui.editor).igEditor("option", "maxDecimals", 2); $(ui.editor).igEditor("option", "minValue", 0); break;
} } });