igGrid have default value for the date columns
by georgianastasov
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css">
</link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table id="grid">
</table>
CSS
.ui-icon-triangle-1-s:before {
font-family: "Font Awesome 6 Free";
content: "\f133" !important;
font-weight: 900;
font-size: 16px;
}
JavaScript
$(function () {
// Sample records to populate the grid
var records = [
{
EmployeeID: 1,
FirstName: "Nancy",
LastName: "Davolio",
Title: "Sales Representative",
StartDate: "2025/07/15"
},
{
EmployeeID: 2,
FirstName: "Andrew",
LastName: "Fuller",
Title: "Vice President, Sales",
StartDate: "2025/07/15"
},
{
EmployeeID: 3,
FirstName: "Janet",
LastName: "Leverling",
Title: "Sales Representative",
StartDate: ""
}
];
$("#grid").igGrid({
virtualization: false,
autoGenerateColumns: false,
renderCheckboxes: true,
primaryKey: "EmployeeID",
columns: [{
headerText: "Employee ID", key: "EmployeeID", dataType: "number"
},
{
headerText: "First Name", key: "FirstName", dataType: "string"
},
{
headerText: "Last Name", key: "LastName", dataType: "string"
},
{
headerText: "Title", key: "Title", dataType: "string"
},
{
headerText: "Start Date", key: "StartDate", dataType: "date"
},
],
dataSource: records,
height: "420px",
width: "100%",
// Grid features
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "row",
enableDeleteRow: true,
rowEditDialogContainment: "owner",
showReadonlyEditors: false,
enableDataDirtyException: false,
// Column-specific editing settings
columnSettings: [
{
columnKey: "EmployeeID",
readOnly: true
...