Additional questions related to broken grid.
Hi, syncfusion team
I added the sauce considering that it is difficult to reproduce the question I asked the other day.
When the grid is created through the above source, there is a problem that the grid is broken as follows.
Please find out what the problem is again.
Thank you for your kind reply all the time
<PopUp.cshtml>
@{
Layout = null;
}
<html lang="kr">
<head>
<title> Piping </title>
<link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" rel='nofollow' href="~/css/site.css" />
<link rel="stylesheet" rel='nofollow' href="~/css/ej2/material.css" />
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap5.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script src="~/js/ej2/ej2.min.js"></script>
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="~/js/promise.js"></script>
<script src="~/js/promise.auto.js"></script>
<!-- Minified version of `es6-promise-auto` below. -->
<script src="~/js/promise.min.js"></script>
<script src="~/js/promise.auto.min.js"></script>
</head>
<body style="width:100%; margin-bottom: 0px;">
@*Vertical Vessel Foundation TopPage*@
<div class="col-12" style="height:130px;">
<hr style="border:solid 1px;" />
<h2 style="margin-left: 30px; ">UPDATE DATA BOX</h2>
<hr style="border:solid 1px;" />
<h3 style="margin-left: 30px;">
PIPING
<button id="Save" class="e-btn" type="button" style="float:right; height: 30px; width: 70px;">
Save
</button>
</h3>
<br />
</div>
<br />
@*Grid Data*@
<div style=" margin-left: 1%; margin-right: 1%;">
<ejs-grid id="Grid" dataSource="ViewBag.datasource" gridLines="Both" height="245px" allowPaging="true" allowResizing="false" allowTextWrap="true">
<e-grid-selectionsettings mode="Cell" type="Single" cellSelectionMode="Box"></e-grid-selectionsettings>
<e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
<e-grid-pagesettings pageCount="3"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="" type="checkbox" width="20" headerTextAlign="Center" textAlign="Center" allowFiltering="false" allowSorting="false"></e-grid-column>
<e-grid-column headerText="Data Check" template="#dataStatusList" textAlign="Center" width="30"></e-grid-column>
<e-grid-column field="NMStatus" headerText="STATUS" textAlign="Center" width="30"></e-grid-column>
<e-grid-column field="DATE" headerText="Date" format="yyyy-MM-dd (HH:mm:ss)" textAlign="Center" width="50"></e-grid-column>
<e-grid-column headerText="EQUIPMENT DATA" headerTextAlign="Center" textAlign="Center"
columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>(){
new Syncfusion.EJ2.Grids.GridColumn { Field = "ItemNo", Width = "15", HeaderText = "ITEM NO", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="60", MaxWidth = "120"}})">
</e-grid-column>
<e-grid-column headerText="COORDINATE" headerTextAlign="Center" textAlign="Center"
columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
new Syncfusion.EJ2.Grids.GridColumn { Field = "COORD_E", Width="15", HeaderText = "COORD_E", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="60"},
new Syncfusion.EJ2.Grids.GridColumn { Field = "COORD_N", Width="15", HeaderText = "COORD_N", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="60"},
new Syncfusion.EJ2.Grids.GridColumn { Field = "BASEEL", Width="15", HeaderText = "BASE EL.", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, MinWidth="60"}})">
</e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</body>
</html>
<script id="dataStatusList" type="text/x-template">
<div class="dropdown">
@*dataStatusList*@
<select id="${ItemNo}" class="e-input-group e-control-wrapper e-ddl e-lib e-keyboard e-valid-input" name="dataStatusList" onchange="columnDropdown(this)">
<option value="OPEN" selected="selected" style="text-align:center;">OPEN</option>
<option value="RECHECK" style="text-align:center;" >RECHECK</option>
<option value="COMPLETE" style="text-align:center;">COMPLETE</option>
</select>
</div>
</script>
<script>
function columnDropdown(e) {
if (e.selectedOptions[0].value == "OPEN") {
e.style.backgroundColor = '#CD5C5C';
e.style.webkitTextFillColor = '#7ECC49';
} if (e.selectedOptions[0].value == "RECHECK") {
e.style.backgroundColor = '#7ECC49';
} if (e.selectedOptions[0].value == "COMPLETE") {
e.style.backgroundColor = '#DC143C'
}
}
</script>
<style>
/*Header Text align Setting*/
.e-grid .e-gridheader table th[rowspan], .e-grid.e-device .e-gridheader table th[rowspan] {
padding-bottom: 13px;
vertical-align: middle;
}
</style>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<ejs-scripts></ejs-scripts>
thank you
