We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
[Index.cshtml]
<div>
<ejs-grid id="GridLemma" locale="it-IT" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" allowPaging="true" allowFiltering="true" load="load">
<e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>
<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
<e-grid-columns>
. . . .
<e-grid-column field="OrdDate" headerText="Order Date" isPrimaryKey="false" format="yMd" width="170"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function load() {
this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Bind the custom date format
}
</script> |
<ejs-grid id="MyGrid" locale="it" load="changeDateFormat"
allowFiltering="true">
<e-data-manager
url="/api/get/all"
adaptor="UrlAdaptor"></e-data-manager>
<e-grid-editSettings allowAdding="false"
allowDeleting="false" allowEditing="false"
mode="Dialog"></e-grid-editSettings>
<e-grid-columns>
...
<e-grid-column field="EndDate" headerText="Date"
format="yMd"
isPrimaryKey="true" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
@section PreScripts {
<script>
function
loadCultureFiles(name) {
var files =
['currencies.json', 'numbers.json', 'ca-gregorian.json', 'timeZoneNames.json'];
var loader =
ej.base.loadCldr;
var
loadCulture = function () {
var val,
ajax;
console.log(files[prop]);
ajax = new
ej.base.Ajax('/scripts/cldr-data/main/' + name + '/' + files[prop], 'GET',
false);
ajax.onSuccess = function (value) {
val =
value;
};
ajax.send();
loader(JSON.parse(val));
ej.base.setCulture('it');
};
for (var prop
= 0; prop < files.length; prop++) {
loadCulture();
}
}
function changeDateFormat(args)
{
this.columns[6].format = { type:
'date', format: 'dd/MM/yyyy' };
}
</script>
}
@section Scripts {
<script>
loadCultureFiles('it');
</script>
}
Hi Mini,Greetings from Syncfusion,We have validated your query with given codes. You have set “yMd” for Date column (as your sample ‘EndDate’ field). So Grid has set the format for “yMD” for the corresponding Date column. So if you need filter the date as same format. This is default behavior. It will be script error thrown when given invalid date or month.But we can show the customize format for date column by set the custom format in ‘load’ event of Grid. We have prepared the sample to show the date format as “dd/MM/yyyy”. Please find the code example and sample for your reference.
|
[Index.cshtml]
<div>
<ejs-grid id="Grid" locale="it" dataSource="ViewBag.DataSource" allowPaging="true" load="changeDateFormat" allowGrouping="true" allowFiltering="true">
<e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings>
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>
<e-grid-columns>
. . . .
<e-grid-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="10%"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function changeDateFormat() {
this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Here, custom date format to "OrderDate" column
}
function loadCultureFiles(name) {
ej.base.setCulture(name);
var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
if (name === 'it') {
files.push('numberingSystems.json');
}
var loader = ej.base.loadCldr;
var loadCulture = function (prop) {
var val, ajax;
if (name === 'it' && prop === files.length - 1) {
ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
} else {
ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
}
ajax.onSuccess = function (value) {
val = value;
};
ajax.send();
loader(JSON.parse(val));
};
for (var prop = 0; prop < files.length; prop++) {
loadCulture(prop);
}
}
document.addEventListener('DOMContentLoaded', function () {
loadCultureFiles('it');
});
</script> |
