This is a migrated thread and some comments may be shown as answers.

loading grid with ajax call messes up formatting

2 Answers 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
J
Top achievements
Rank 1
J asked on 28 Jul 2017, 01:19 PM

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>
 
 
 

 

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 01 Aug 2017, 09:04 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
J
Top achievements
Rank 1
answered on 01 Aug 2017, 01:27 PM

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.

Tags
Grid
Asked by
J
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
J
Top achievements
Rank 1
Share this question
or