I would like to format a column (datatype = "datetime") to display the date only. I had tried the following but not working.
headerText: "Date Received", key: "DateReceived", width: "150px", dataType: "datetime", format: "dd/MM/yyyy"
Please help.
Hello,
You need to set dataType to “date” as shown below:
{key: "Date Received", headerText: "Date Received", dataType: "date", format: "dd/MM/yyyy" }
If dataType is "date", then supported formats are following: "date", "dateLong", "dateTime", "time", "timeLong", "MM/dd/yyyy", "MMM-d, yy, h:mm:ss tt", "dddd d MMM", etc.
Refer to the link below for more details on API:
https://www.igniteui.com/help/api/2019.1/ui.iggrid
On the above link, click on the “OPTIONS” tab and expand “columns” for more details.
I hope this helps.
I have a problem with formated date in column of grid. I am using Razor syntax for the grid. Locate and region are bg, one of the column has DataType("date").Format("dateTime"), but now it isn't imposible to sort this column. Could you help me?
Hi, Mr Pavlov,
Thank You for the previous post!
I use Inite UI 2012.2, MVC Wrapper. I don't have any errors in the browser console when I try to sort.
The problem is that I want to display date and time (+ seconds) in bg format but than the sorting by this column doesn't work. I've noticed that when date format contains dots for ex: "dd.MM.yyyy hh:mm:ss" , sorting doesn't work. Now I am using slashs and sorting has incorrect behavior! I think that it sorts date like strings data. I am sending You part of my code :
<script type="text/javascript" src="~/Content/ig/js/infragistics.loader.js"></script> <script type="text/javascript" src="~/Content/ig/js/jquery-ui-i18n.js"></script>
@(Html.Infragistics() .Loader() .ScriptPath(Url.Content("~/Content/ig/js/")) .CssPath(Url.Content("~/Content/ig/css/")) .Resources("igGrid.Selection,igGrid.Paging,igGrid.Sorting") .Theme("metro") .Locale("bg") .Regional("bg") .Render() )
and the grid:
<table id="grid"></table> @(Html.Infragistics().Grid(Model.SearchResult).ID("grid") .FixedHeaders(false).FixedFooters(false) .JQueryTemplating(true) .AutoGenerateColumns(false) .RenderCheckboxes(true) .Columns(column => {column.For(x => x.ConsumerName).HeaderText(Home.ConsumerName).DataType("string").Width("110px");column.For(x => x.StartTime).HeaderText(Home.StartDate).Format("dd/MM/yyyy hh:mm:ss").Width("150px"); column.For(x => x.EndTime).HeaderText(Home.EndDate).Format("dd/MM/yyyy hh:mm:ss").Width("150px"); })
.Features(features => { features.Sorting().Type(OpType.Local).Mode(SortingMode.Single).FirstSortDirection("ascending").ApplyColumnCss(false); features.Paging().Type(OpType.Local).PageSize(10).ShowPageSizeDropDown(false) .ShowPagerRecordsLabel(false) .VisiblePageCount(3) .PrevPageLabelText("") .NextPageLabelText("") .ShowFirstLastPages(false); features.Tooltips() .Visibility(TooltipsVisibility.Always) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ConsumerName").AllowTooltips(true);settings.ColumnSetting().ColumnKey("StartTime").AllowTooltips(true); settings.ColumnSetting().ColumnKey("EndTime").AllowTooltips(false); }) .CursorTopOffset(10) .ShowDelay(100); features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ConsumerName").MinimumWidth(140);settings.ColumnSetting().ColumnKey("StartTime").MinimumWidth(140); settings.ColumnSetting().ColumnKey("EndTime").MinimumWidth(140); }); features.Selection().Mode(SelectionMode.Row).MultipleSelection(false); }).Width("940").DataBind().Render())
I am hoping that this is enough information.
Hi Marylka,
From your description is not obvious what the problem can be. Format only affects the presentation of the data, so it should not be the cause of the sorting problem.
One reason can be a bug.
Another reason can be the JSON date column serialization.
I need more data in order to further analyze your problem. Here are my questions:
What is your Ignite UI version (including service release)?
What is your jQuery and jQuery UI versions?
Are you using the Ignite UI MVC Wrapper to provide the data?
What type of sorting are you using (local or remote)?
Do you get any JavaScript errors in the browser console when you try to sort?
It will be good if you provide a simple sample reproducing the issue.
Best regards,
Martin Pavlov
Infragistics, Inc.