Hi,
I am using Syncfusion ASP.NET MVC version 19.4.0.41. On my view I have a Grid and I have added .EnableStickyHeader(). This causes the Grid toolbar to disappear and I also get an error in the inspection window:
If I remove .EnableStickyHeader(), the toolbar is back and the error is gone. Please assist.
Here is what my view looks like without enabling sticky headers. As soon as I enable sticky headers, the toolbar is removed and the error in my previous screenshot is displayed in inspection window. I am using NuGet package for Syncfusion
<div id="dataGrid">
@Html.EJS().Grid("products").DataSource((IEnumerable<object>)ViewBag.products).Width("auto").Columns(col =>
{
col.Field("ProductCode").HeaderText("Code").HeaderText("Code").IsPrimaryKey(true).Add();
col.Field("Description").HeaderText("Item").Width("400px").HeaderText("Item").AllowEditing(false).Add();
col.Field("Colour").HeaderText("Colour").AllowEditing(false).Add();
col.Field("Price").HeaderText("Price Ex VAT").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).AllowEditing(false).Add();
col.Field("Pack").HeaderText("Pack").AllowEditing(false).Add();
col.Field("Barcode").HeaderText("Barcode").AllowEditing(false).Add();
col.HeaderText("Image").Template("#template").AllowEditing(false).Add();
col.Field("QtyToOrder").HeaderText("Order").EditType("numericedit").ValidationRules(new { required = true }).Add();
}).Locale("en-ZA").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).EnableAltRow(true).Load("load").Height("700px").EditSettings(edit => { edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Search" }).Render()
</div>
<style>
.image img {
height: 60px;
width: 60px;
border-radius: 10px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
.e-grid .e-altrow {
background-color: lightgrey !important;
}
</style>
<script id="template" type="text/x-template">
<div class="image">
<img src="/Content/Images/${ProductCode}.jpg" alt="${ProductCode}" />
</div>
</script>
<script type="text/javascript>
function load(args) {
var gridObj = document.getElementById('products').ej2_instances[0];
gridObj.element.addEventListener('mouseup', function (e) {
if (e.target.classList.contains("e-rowcell")) {
var index = parseInt(e.target.getAttribute("Index"));
var colindex = parseInt(e.target.getAttribute("aria-colindex"));
var field = gridObj.getColumns()[colindex].field;
gridObj.editModule.editCell(index, field);
}
});
}
</script>
