So I am trying to build a blazor web app and I added model classes for separate database tables that already exist on a sperate server, I then put a sql query using dapper that takes all that data from the model classes and puts it together into a Telerik grid, and I need help making my query run a bit faster (The SQL query takes 28 seconds on SSMS I am trying to add paging where it doesn’t have to execute the whole query before it starts loading the grid). I also am having issues with auto fitting that into the grid and I have no idea how to get it to work. And P.S. , I am a beginner at all this.

I tried to follow the Telerik documentation on how to autofit but it didn’t help because i am using a DB First approach. Here is a copy of my razor page but I am afraid I cant share the query) but I can say that it returns about 250 elements.

@page "/moldingdispatch"
@using System.Data
@using Dapper
@using Trial.Models
@inject IDbConnection dbConnection
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Microsoft.EntityFrameworkCore
@using Telerik.DataSource.Extensions
@using Telerik.DataSource

<div class="my_container">
</div>
<style>
    .my_container h5 {
        color: black;
        font: bold;
    }
</style>
<TelerikContainer>

    <TelerikButton OnClick="@AutoFit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Autofit All Columns</TelerikButton>
    <br />
<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@MoldingDispatch"
             
             Sortable="true"
             Resizable="true"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             ColumnVirtualization="false"
             
             SortMode="SortMode.Multiple"
             >
    <GridColumns>
        <GridColumn Field="@nameof(MoldingDispatch.RTR_START_DATE)" Title="RTR Start Date"   />
        <GridColumn Field="@nameof(MoldingDispatch.RTR_RQST_DATE)" Title="RTR Request Date"   />
         <GridColumn Field="@nameof(MoldingDispatch.WO_RQST_DATE)" Title="WO Request Date"   />
        <GridColumn Field="@nameof(MoldingDispatch.WO_ORDER_DATE)" Title="WO Order Date"   />
            <GridColumn Field="@nameof(MoldingDispatch.LABORREPORTDT)" Title="Labor Report Date" />
            <GridColumn Field="@nameof(MoldingDispatch.TARGETCD)" Title="Target CD" />
            <GridColumn Field="@nameof(MoldingDispatch.RUNOUTDT)" Title="Runout Date" />
            <GridColumn Field="@nameof(MoldingDispatch.PRIORITY)" Title="Priority" />
            <GridColumn Field="@nameof(MoldingDispatch.WOType)" Title="WO Type"   />
            <GridColumn Field="@nameof(MoldingDispatch.WORK_STATUS)" Title="Work Status"   />
            <GridColumn Field="@nameof(MoldingDispatch.STS_TYPE)" Title="Status Type"   />
            <GridColumn Field="@nameof(MoldingDispatch.WORK_ORDER)" Title="Work Order"   />
            <GridColumn Field="@nameof(MoldingDispatch.ITEM_NUMBER)" Title="Item Number"   />
            <GridColumn Field="@nameof(MoldingDispatch.SHORT_ITEM_NUMBER)" Title="Short Item Number" />
            <GridColumn Field="@nameof(MoldingDispatch.OPERATION_SEQUENCE)" Title="Operation Sequence" />
            <GridColumn Field="@nameof(MoldingDispatch.WORKCENTER)" Title="Workcenter" />
            <GridColumn Field="@nameof(MoldingDispatch.WCDESC)" Title="Workcenter Description" />
            <GridColumn Field="@nameof(MoldingDispatch.WC_TYPE)" Title="Workcenter Type" />
            <GridColumn Field="@nameof(MoldingDispatch.ROUTERDESC)" Title="Router Description" />
            <GridColumn Field="@nameof(MoldingDispatch.STD_LAB_HRS)" Title="Standard Labor Hours" />
            <GridColumn Field="@nameof(MoldingDispatch.STD_AUTO_HRS)" Title="Standard Auto Hours" />
            <GridColumn Field="@nameof(MoldingDispatch.TOTAL_STANDARD_HOURS)" Title="Total Standard Hours" />
            <GridColumn Field="@nameof(MoldingDispatch.ORIGINAL_ORDER_QUANTITY)" Title="Original Order Quantity" />
            <GridColumn Field="@nameof(MoldingDispatch.REPORTED_PARTS_COMPLETE)" Title="Reported Parts Complete" />
            <GridColumn Field="@nameof(MoldingDispatch.PARTS_RECEIVED)" Title="Parts Received" />
            <GridColumn Field="@nameof(MoldingDispatch.REM_PCS)" Title="Remaining Parts" />
            <GridColumn Field="@nameof(MoldingDispatch.LABOR_HRS_REM)" Title="Labor Hours Remaining" />
            <GridColumn Field="@nameof(MoldingDispatch.AUTO_HRS_REM)" Title="Auto Hours Remaining" />
            <GridColumn Field="@nameof(MoldingDispatch.TOOL_NUMBER)" Title="Tool Number" />
            <GridColumn Field="@nameof(MoldingDispatch.TOOL_GROUP)" Title="Tool Group" />
            <GridColumn Field="@nameof(MoldingDispatch.RANK)" Title="Rank" />
            <GridColumn Field="@nameof(MoldingDispatch.COMPLETED)" Title="Completed" />
            <GridColumn Field="@nameof(MoldingDispatch.STARTED)" Title="Started" />
            <GridColumn Field="@nameof(MoldingDispatch.CUSTOMER)" Title="Customer" />
            <GridColumn Field="@nameof(MoldingDispatch.MFGNOTE)" Title="MFG Note" />
            <GridColumn Field="@nameof(MoldingDispatch.CSNOTE)" Title="CS Note" />
            <GridColumn Field="@nameof(MoldingDispatch.MFGSQN)" Title="MFG SQN" />
            <GridColumn Field="@nameof(MoldingDispatch.SEQUENCED_YN)" Title="Sequenced Y/N" />
            <GridColumn Field="@nameof(MoldingDispatch.Flg_St3044)" Title="Flag ST 3044" />
            <GridColumn Field="@nameof(MoldingDispatch.DtRangeFlag)" Title="Date Range Flag" />
            <GridColumn Field="@nameof(MoldingDispatch.MRFlag)" Title="MR Flag" />

    </GridColumns>
</TelerikGrid>
</TelerikContainer>
<style>
    .k-grid td.center-align {
        text-align: center;
    }


    .k-grid a.gridcolumn-hyperlink {
        color: royalblue;
        text-decoration: underline;
    }

        .k-grid a.gridcolumn-hyperlink:visited {
            color: royalblue
        }
</style>
@code {
    private IEnumerable<MoldingDispatch> moldingDispatchData;

    private TelerikGrid<MoldingDispatch>? GridRef { get; set; }

    private bool AutoFitFlag { get; set; }

    private bool FirstGridBindFlag { get; set; } = true;
    private async Task AutoFit()
    {
        if (GridRef != null)
        {
            await GridRef.AutoFitAllColumnsAsync();
        }
    }
    private async Task OnGridRead(GridReadEventArgs args)
    {
        await Task.Delay(28000); //simulate one minute async operation
        DataSourceResult result = moldingDispatchData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;

        if (FirstGridBindFlag && result.Total > 0)
        {
            FirstGridBindFlag = false;
            AutoFitFlag = true;
        }
    }

    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (AutoFitFlag)
        {
            AutoFitFlag = false;
            await Task.Delay(1);
            await AutoFit();
        }

        await base.OnAfterRenderAsync(firstRender);
    }
    protected override async Task OnInitializedAsync()
    {
        string sql = @"...";

        moldingDispatchData = await dbConnection.QueryAsync<MoldingDispatch>(sql, commandTimeout: dbConnection.ConnectionTimeout);
    }


}




    

    {
        if (AutoFitFlag)
        {
            AutoFitFlag = false;
            await Task.Delay(1);
            await AutoFit();
        }

        await base.OnAfterRenderAsync(firstRender);
    }
    protected override async Task OnInitializedAsync()
    {
        string sql = @"...";

        moldingDispatchData = await dbConnection.QueryAsync<MoldingDispatch>(sql, commandTimeout: dbConnection.ConnectionTimeout);
    }


}