I have a table of 800 rows and more than 50 columns. (I know 50 is too much but my boss wanted it this way on purpose). Problem is in razor view rendering the html table is taking about 40 seconds. In my page i have a lot of css for fixed rows and header
#save-stage tbody td:first-child {
position: sticky;
width: 90px;
left: 0px;
z-index: 1;
}
#save-stage tbody td:first-child + td {
position: sticky;
left: 110px;
width: 100px;
z-index: 2;
}
#save-stage thead th:first-child {
position: sticky;
left: 0px;
z-index: 100;
}
#save-stage thead th:first-child + th {
position: sticky;
left: 110px;
z-index: 100;
}
#save-stage tbody td:nth-child(1) {
background: white;
color: black;
font-size: 11px;
font-weight: 400;
}
#save-stage tbody td:nth-child(2) {
background: white;
color: black;
font-size: 11px;
font-weight: 400;
}
I am using foreach loop for creating rows inside tbody.
foreach (var item in Model)
{
<tr class="text-nowrap" style="font-size: 12px; ">
@if (item.SDetayOrder != null || item.SDetayOrder != "")
{
<td style="text-align: left;"><text href="#" title="Sü - S Detay" data-toggle="popover" data-content="@item.SDetayOrder">@item.OrderNo</text></td>
}
else
{
<td style="text-align: left;">@item.OrderNo</td>
}
<td style="text-align: left;">@Convert.ToDateTime(item.OrderGelisTarihi).ToString("dd/MM/yyyy")</td>
<td style="text-align: left;">@Convert.ToDateTime(item.OrderPlanlamayaTeslimTarih).ToShortDateString()</td>
@if (item.Musteri != null && item.Musteri.Length > 8)
{
<td style="text-align: left; min-width:115px; max-width:115px;">@item.Musteri.Substring(0, 8)</td>
}
else
{
<td style="text-align: left; min-width:115px; max-width:115px;">@item.Musteri</td>
}
@{
DateTime tarih2;
if (item.SonKumasGelisTarihi != null)
{
tarih2 = (DateTime)item.SonKumasGelisTarihi;
tarih2 = tarih2.AddDays(1);
if ((DateTime)item.OrderKayitTarih >= item.SonKumasGelisTarihi || (DateTime)item.OrderKayitTarih >= (DateTime)tarih2)
{
<td style="text-align: center;">
@{
<button class="btn btn-success denemeClass" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else if (item.KumasTermineKalanGun < item.KesimGerekenGun && item.KumasTerminAciklama == null)
{
<td style="text-align: center;">
@{
<button class="btn btn-danger" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else if (item.KumasTerminAciklama != null && item.KumasTerminAciklama != "")
{
<td style="text-align: center;">
@{
<button class="btn btn-warning" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else
{
<td style="text-align: center;">
@{
<button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
}
else
{
if ((DateTime)item.OrderKayitTarih >= item.SonKumasGelisTarihi)
{
<td style="text-align: center;">
@{
<button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else if (item.KumasTermineKalanGun < item.KesimGerekenGun && item.KumasTerminAciklama == null)
{
<td style="text-align: center;">
@{
<button class="btn btn-danger" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else if (item.KumasTerminAciklama != null && item.KumasTerminAciklama != "")
{
<td style="text-align: center;">
@{
<button class="btn btn-warning" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
else
{
<td style="text-align: center;">
@{
<button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
}
</td>
}
}
}
}
</tr>
}
I want to make this page faster. I tried paging but they dont want paging and 50 or more colums must be in a single table.