Setting input date format in grid

Hey,

I am attempting to get a grid to allow for dates to be editted, for the column I have the following code:

column.For(x => x.StartDate).HeaderText("Start Date").Width("").DataType("date").Format("dd/MM/yyyy");

For the column settings I have this code:

cs.ColumnSetting().ColumnKey("StartDate").EditorType(ColumnEditorType.DatePicker).ReadOnly(false);

When i perform an edit the editor appears to fire back a date in the format of "MM/dd/yyyy" to the grid which is causing some very strange errors to occur.

I think the solution may be related to using DateEditorOptions in the column settings however I was unable to find any examples of this online and there appears to be very little documentation on this related to my current scenario.

Any assistance would be greatly appreciated, thanks

Hello Callum,

I created a small sample with igGrid where I have date column ("Released Date") which I format as per your suggestion:

  col.For(c => c.ReleaseDate).HeaderText("ReleaseDate").Format("dd/MM/yyyy");

I added this column to the Updating columnSettings collection.

 cs.ColumnSetting().ColumnKey("ReleaseDate").EditorType(ColumnEditorType.DatePicker).ReadOnly(false);

On my side the format was correctly set in both edit and non-edit mode.

Can you please run my sample and let me know how it behaves on your side. If this not an accurate demonstration of what you are trying to achieve please feel free to modify it in order to reproduce the issue and send it back to me for further investigation.

Additionally, I believe you will find the following resources helpful:

Grid Basic Editing Sample

Formatting Dates, Numbers and Strings

format option

Please feel free to contact me if you need any further assistance with this matter.

Hey, thank you for the reply

I have tested your project on chrome/firefox, on firefox it appears to work as intended (as does my own project) however in chrome the strange error appears in both my own project and in your example project.

Does this happen on your machine as well in chrome or perhaps is there an issue with my installation of chrome? 

My code is as follow, unsure if anything could be causing this?

@(Html.Infragistics()
.Grid(Model.TimeLines)
.ID("Grid")
.Height("500px")
.Width("100%")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.RenderCheckboxes(true)
.PrimaryKey("ID")
.Columns(column =>
{
column.For(x => x.ID).HeaderText("ID").Width("*").DataType("string").Hidden(true);
column.For(x => x.Invoiced).HeaderText("Invoiced").Width("*").DataType("bool").Hidden(true);
column.For(x => x.UnitNumber).HeaderText("Unit Number").Width("*").DataType("string");
column.For(x => x.EquipmentType).HeaderText("Equipment Type").Width("*").DataType("string");
column.For(x => x.SubType).HeaderText("Sub Type").Width("*").DataType("string");
column.For(x => x.CurrentInstallation).HeaderText("Current Installation").Width("*").DataType("string");
column.For(x => x.StartDate).HeaderText("Start Date").Width("*").DataType("date").Format("dd/MM/yyyy");
column.For(x => x.EndDate).HeaderText("End Date").Width("*").DataType("date").Format("dd/MM/yyyy");
column.For(x => x.DayRate).HeaderText("Day Rate").Width("*").DataType("number");
column.For(x => x.ExternalClient).HeaderText("External client").Width("*").DataType("string");
column.For(x => x.WebConfirmed).HeaderText("Web Confirmed").Width("*").DataType("bool");

})
.Features(feature =>
{
feature.Updating().EnableAddRow(false).EnableDeleteRow(false).ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("ID").EditorType(ColumnEditorType.Numeric).ReadOnly(true);
cs.ColumnSetting().ColumnKey("EquipmentType").EditorType(ColumnEditorType.Text).ReadOnly(true);
cs.ColumnSetting().ColumnKey("UnitNumber").EditorType(ColumnEditorType.Text).ReadOnly(true);
cs.ColumnSetting().ColumnKey("SubType").EditorType(ColumnEditorType.Text).ReadOnly(true);
cs.ColumnSetting().ColumnKey("CurrentInstallation").EditorType(ColumnEditorType.Text).ReadOnly(true);
cs.ColumnSetting().ColumnKey("StartDate").EditorType(ColumnEditorType.DatePicker).ReadOnly(false);
cs.ColumnSetting().ColumnKey("EndDate").EditorType(ColumnEditorType.DatePicker).ReadOnly(false);
cs.ColumnSetting().ColumnKey("DayRate").EditorType(ColumnEditorType.Numeric).ReadOnly(false);
cs.ColumnSetting().ColumnKey("ExternalClient").EditorType(ColumnEditorType.Text).ReadOnly(false);
cs.ColumnSetting().ColumnKey("WebConfirmed").EditorType(ColumnEditorType.Checkbox).ReadOnly(false);
});
feature.Sorting();
feature.Filtering();
feature.Hiding();
feature.Paging();
//feature.Responsive();

})
//.DataSourceUrl(Url.Action("GetTimelines"))
.DataSource(Model.TimeLines)
.EnableUTCDates(false)
.UpdateUrl(Url.Action("SaveTimelines"))
.DataBind()
.Render()
)

 

Hello,

Thank you for getting back to me.

Everything seems fine with your configuration.

What I can suggest is try referencing Ignite UI scripts locally. Create a folder in your application and add your scripts there. Change the references to point to this folder instead of pointing to Infragistics CDN. For example:

   <!-- Ignite UI Required Combined CSS Files -->

    <link href="~/Scripts/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="~/Scripts/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script&gt;
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script&gt;
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script&gt;

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="~/Scripts/js/infragistics.core.js"></script>
    <script src="~/Scripts/js/infragistics.lob.js"></script>

I am attaching the folder containing the scripts for your reference. Please add it in your application and reference the script files from there.

Please let me know how it behaves on your side.

Hey, that appears to have fixed my issue, thanks for the assistance!