How to control date format in igGrid

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&gt;
<script src=”http://cdn-na.infragistics.com/igniteui/latest/js/modules/i18n/regional/infragistics.ui.regional-en-GB.js”></script&gt;

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'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&gt;

<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/&quot;,
 cssPath: "http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/&quot;,
 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;

      }
     }
    });

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?

Hello hrwebb,

Please note that the regional settings in the two samples are different:

– in "DatePickerTestImplicit" sample you're setting Loader to pick the correct locale based on the browser/OS regional settings by setting the autoDetectLocale option. In this case the auto detected locale on my side is "en-US", which sets the date format to "M/d/yyyy"

– in "DatePickerTestExplicit" sample you're explicitly loading the desired localization file, which points to "en-GB" regional settings. In this case the date format will be "dd/MM/yyyy"

If you want igDatePicker to display the date according "en-GB" regional settings (which I assume are not your local settings on the browser/OS), then you may set them explicitly like the following:

$.ig.loader({
 …
regional: "en-GB"

 });

If you have any further questions, please let me know.

Regards,

Tsanna

I found the source of my problem. I was setting the regional option when executing the igLoader. The regional value came from a call to a function. However, without realizing it the function was always returning "en" rather than "en-GB" for the machine I was testing on. After I corrected the function everything worked as expected.

I do continue to have the problem using the igEditor with the igLoader as described in an earlier post.

Hello hrwebb,

What is the problem that you're facing? Could you please give me more details around it? Are you still using custom function that returns your locale settings or you set them explicitly using infragistics localization references? Please send me a sample that reproduces your issue.. Waiting for your response.

Regards,

Tsanna

I've attached a file that demonstrates the problem.

Run, then click on any Population field to place into edit mode. I get the error "Uncaught TypeError: $(…).igEditor is not a function".

Click on another cell and place into edit mode and another error also occurs, "Uncaught TypeError: Cannot read property 'focus' of undefined".

Hello hrwebb,

After further investigation of this matter I logged a bug in our internal tracking system with an ID: 212767 and opened a private case for you with a number: CAS-168789-F0R9R1, where you can follow the status of the development issue. You can find the case by going to your account on our web site and then to the "Support activity" tab. You can view the status of the development issue connected to that case by selecting the "Development Issues" tab when viewing this case. 

 Please let me know if you need more information.

Regards,

Tsanna