I am using the code below to generate a grid with two tiers of data: a support ticket, and the entries on that support ticket.
The main issue I am running into is that the Main Layout's datetime columns are not formatting, but the child layout's columns are. I am applying formatting the same way to both, and both are pointing to DateTime? variables in classes within my model.
Is there any way to get these to both format?
The Main Layout formats the date: 2017-11-05T09:19:40.663Z
The Child Layout formats the date: 2/22/2018 7:17 AM
<div class="ui-iggrid"> @(Html.Infragistics().Grid(Model.GetIncidents()).ID("grdIncidents") .EnableUTCDates(true) .PrimaryKey("IncID") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .DataBind() .LoadOnDemand(true) .Columns(column => { column.For(x => x.IncID).HeaderText("IncID").Width("*").DataType("int").Template("<a href='TicketTrackerTicket?IncID=${IncID}'>${IncID}</a>"); column.For(x => x.CustCode).HeaderText("CustCode").Width("*"); column.For(x => x.Subject).HeaderText("Subject").Width("100%"); column.For(x => x.TechID).HeaderText("Tech").Width("*"); column.For(x => x.LastUpdateDate).HeaderText("LastUpdateDate").Width("*").DataType("Date").Format("DateTime"); //column.For(x => x.LastUpdateDate).Width("*").DataType("date").Format("dateTime"); }) .ColumnLayouts(layout => { layout.For(x => x.IncidentsHistory) .EnableUTCDates(true) .ForeignKey("IncID") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) //.DataBind() .LoadOnDemand(true) .Columns(cols => { //cols.For(x => x.IncID).HeaderText("IncID"); cols.For(x => x.NoteDate).HeaderText("Entry Date").Width("*").DataType("date").Format("dateTime"); cols.For(x => x.Contact).HeaderText("Entry By").Width("*"); cols.For(x => x.Description).HeaderText("Entry").Width("100%"); }) .Features(layoutF => { layoutF.Sorting().Mode(SortingMode.Multiple).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("NoteDate").FirstSortDirection("descending"); }); layoutF.Filtering().Mode(FilterMode.Simple).Type(OpType.Local); }); }) .Features(f => { f.Paging().PageSize(25); f.Sorting().Mode(SortingMode.Multiple).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("LastUpdateDate").FirstSortDirection("descending"); }); f.Filtering().Mode(FilterMode.Simple).Type(OpType.Local).ColumnSettings(settings => { //settings.ColumnSetting().ColumnKey("CustCode").DefaultExpressions(new List<DefaultFilterExpression> //{ // new DefaultFilterExpression() // { // Condition = "equals", Expression = Model.CustCode // } //}); //settings.ColumnSetting().ColumnKey("CustCode").DefaultExpressions(new List<DefaultFilterExpression> //{ // new DefaultFilterExpression() // { // Condition = "equals", Expression = Model.CustCode // } //}); //if (Model.CustCode != "PDMD") //{ // settings.ColumnSetting().ColumnKey("CustCode").Setting.AllowFiltering = false; //} }); }) .Render() ) </div>
Hello Nick,
Thank you for posting in our forum.
The reason you get different formats for the Main Layout and the Child Layout is because there are two small corrections that you have to make in the Main Layout: both the .DataType(“Date”) and .Format(“DateTime”) options should be set with camel case strings – .DataType(“date”) and .Format(“dateTime”) respectively. Changing line 15 of the above should fix the problem:
column.For(x => x.LastUpdateDate).HeaderText("LastUpdateDate").Width("*").DataType("date").Format("dateTime");
If this doesn't solve the issue or you need any additional assistance - feel free to contact me.
Vasil,
Thank you for your response - that actually did not resolve the issue. The dates in the main layout continue to format in the undesired format.
Please check the attached sample MVC project that I have used in order to try to reproduce the issue on my side:
hieararchicalGridLoadOnDemand.zip
I noticed that you have used the Load On Demand feature - please note that if you have an igHierarchicalGrid, you have to use GridModel instead of Chaining – this is known limitation of the hierarchical grid:
https://www.igniteui.com/help/ighierarchicalgrid-known-issues#load-on-demand-chaining
This is the reason why in the sample I have used Load On Demand and a GridModel instance declared in the Controller. You could read more in this forum thread:
https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/77646/multi-level-hierarchical-grid-load-on-demand-with-asp-net-mvc-ignite
It would be appreciated if you could run the attached sample, try to reproduce the behavior you describe (feel free to modify the grid configuration if necessary) and then please send it back to me so I could investigate and debug it on my side in order to give you a more precise answer about what is causing the issue.
If you need any additional assistance, feel free to contact me.
I saw the changes that you have made and the grid actually manages to render itself, but it doesn’t bind to the data correctly. Try putting .DataBind() just before .Render() and everything should work fine, like this:
@(Html.Infragistics().Grid(Model).ID("grd") .AutoGenerateColumns(false) .PrimaryKey("ProductID") .Columns(column => { column.For(x => x.ProductID).HeaderText("Main Product ID"); column.For(x => x.Name).HeaderText("Main Layout Name").DataType("string"); column.For(x => x.Date).HeaderText("Main Date").DataType("date").Format("dateTime"); }) .AutoGenerateLayouts(false) .Features(f => { f.Sorting().Mode(SortingMode.Multiple).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Date").FirstSortDirection("descending"); }); f.Filtering().Mode(FilterMode.Simple).Type(OpType.Local); }) .DataBind() .Render())
Please note that I have also changed the .PrimaryKey to be "ProductID", otherwise the grid won't be able to function correctly.
I have been able to break the grid configuration in the project HERE