loading grid with ajax call messes up formatting

[J]

Having some Grid formatting issues with a grid in a partial view, loaded via ajax function and pass it a parameter.    It appears that the grid is partially created and displayed to soon. I have attached 2 screenshot. to show what is going on. using bootstrap

Basically the process should be call the grid.  the loading.... dialog should be first, then the grid loaded when successfull with norecords shown inside of grid.  This is happening way out of order.  I am probably missing a process..

Main view:

@model Jlo4MVC.Models.UserToSend

@{
    ViewBag.Title = "JLO";
}

<div id="userinput" class="row">
    <ul class="userrentry">
        <li>
            @Html.Label("User ID")
            @Html.Kendo().TextBox().Name("searchuserid")
        </li>
        <li>
            @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
        </li>
    </ul>
</div>
<div id="sessionsfound" class="row" style="display:none">

</div>
<div id="status" class="row" style="display:none">
</div>
<div id="gridloading" class="imgdiv" style="display:none">
    <img id="loader" src="~/Images/ajax-loader.gif" class="center-block" />
</div>
<script type="text/javascript">
    $(function () {

        $('#findUser').click(function () {

            var myurl = '@Url.Action("getSessionsView", "home")';
            var model = { userID: $("#searchuserid").val() };
            $('#userinput').css("display", "none");

            $.ajax({
                url: myurl,
                type: "POST",
                datatype: "html",
                data: model,
                success: function (data) {
                    $('#sessionsfound').html(data);
                    $('#sessionsfound').css("display", "block");
                }
            })

        });
    });
</script>

 

Partial view

@model Jlo4MVC.Models.UserToSend


<div>
    @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
        .Name("VSM_Grid")
        .NoRecords("No Sessions Found")
        .Columns(c =>
            {
                c.Template(t => { }).ClientTemplate("<input type='checkbox' class='checkbox' />");
                c.Bound(i => i.id).Title("ID").Width(10);
                c.Bound(i => i.farmName).Title("Farm").Width(25);
                c.Bound(i => i.domainName).Title("Domain").Width(25);
                c.Bound(i => i.applicationName).Title("App Name").Width(75);
                c.Bound(i => i.serverName).Title("Server").Width(25);
                c.Bound(i => i.sessionID).Title("Session ID").Width(10);
                c.Bound(i => i.userID).Title("User ID").Width(40);
            })

        .DataSource(data => data
        .Ajax()
        .Model(m => m.Id(p => p.id))
        .Read(read => read.Action("sessionsread", "Home", new { userID = Model.userID })))

    )


</div>

 

 

 

 

 

 

[Tsvetina]

Hello J,

I suggest that we continue work on the issue in the support thread you have opened about it. When we reach a solution, you can post a brief description here if you would like for others to see.

In case anyone else is interested, currently we are investigating if the issue is caused by missing Kendo UI style references, as the images look like the styles from kendo.common.min.css are not applied.

Regards,
Tsvetina
Progress Telerik

[J]

Thanks for your help in support. 

the issue had to do with me missing a css binding in my project..

for bootstrap I was under the impression that

"~/Content/kendo/2017.2.504/kendo.common-bootstrap.min.css" along with my style sheet was all that was required. 

you need the "~/Content/kendo/2017.2.504/kendo.common.min.css" for bootstrap < 4.x apparently.