Hi Thavasianand,
1. How it looks - "HowItLooks.png"
2. How it should look - "HowItShouldLook.png"
3. CSS - As far as I can tell I only add the following to styles.css
.custom .e-excelIcon {
font-size: 30px;
}
.custom .e-tooltxt {
width: 50px;
}
.e-grid .e-groupdroparea, /*GroupDropArea */
.e-grid .e-groupdroparea:hover, /*GroupDropArea Hover*/
.e-grid .e-cloneproperties, /*Column header clone during dragging header*/
.e-grid .e-groupheadercell:hover, /*HeaderCell in GroupDropArea*/
.e-grid td.e-active, /*During Row Selected*/
/*For pager items and their hover*/
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-link:hover,
.e-pager .e-icon:hover {
background-color: gray;
}
4. Grid Code:
$('#mainContent').ejGrid({
dataSource: formatData,
isResponsive: true,
enableResponsiveRow: true,
allowSorting: true,
allowResizing: true,
allowPaging: true,
pageSettings: { pageSize: '@ViewBag.PageSize' },
allowFiltering: true,
filterSettings: { filterType: "Excel" },
allowGrouping: true,
groupSettings: { groupedColumns: ['@ViewBag.GroupByColumn'] },
columns:
[
{ field: "Id", headerText: "ID", isPrimaryKey: true, headerTextAligh: "right", width: 30 },
{ field: "SerialNumber", headerText: "Serial Number", width: 60 },
{ field: "LinkStation", headerText: "Link Station", width: 50 },
{ field: "DateLinked", headerText: "Date Linked", priority: 2, format: "{0:dd/MM/yyyy}", width: 40 },
{ field: "UnlinkStation", headerText: "Unlink Station", width: 60 },
{ field: "DateUnlinked", headerText: "Date Unlinked", priority: 2, format: "{0:dd/MM/yyyy}", width: 40 },
{ field: "LinkUser", headerText: "User", width: 60 }
],
recordClick: "RecordClick",
});
5. Version 13.4.0.63
So yes the problem is that the tick marks in the grid filter are invisible.
Thank you.
Attachment:
Syncfusion_130823_4d7f8c22.zip