On Ajax call Grid Updated but css not applied :(

Sep 4, 2014 at 2:53 PM
All things working fine 1st time data render fine but when click on any page number then with Ajax call data fetch successfully all headers and footer css remain the same but css of table rows de-attached not included please if you have any suggestion tell me
Advance Thanks
Oct 13, 2014 at 1:00 PM
Same is here... no clue how to resolve it.

regards,
mcamail2002@gmail.com
Oct 13, 2014 at 1:36 PM
But i solved this issue.
Oct 15, 2014 at 7:55 AM
Could you pls share the solution?

regards,
mcamail2002@gmail.com
Oct 15, 2014 at 8:06 AM
Place only grid in your partial like all styling div's are placed on main page For example.
<div class="gridStyle"> <div class="tableStyle"> @Html.Partial("_StudentGrid",Model.List) </div> </div> Your partial

@using GridMvc.Html
@using GridMvc.Sorting
@model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<RBTP.Models.Student>

@Html.Grid(Model,"_Grid").Named("studentGrid").Columns(columns =>
{
    columns.Add(car => car.Name).Titled("Name").SetWidth(100).Encoded(false).Sanitized(false).Sortable(true).SortInitialDirection(GridSortDirection.Ascending);
    columns.Add(car => car.OwnershipDuration).Titled("Ownership Duration").SetWidth(100).Encoded(false).Sanitized(false).Sortable(true);
    columns.Add(car => car.Address).Titled("Address").SetWidth(100).Encoded(false).Sanitized(false).Sortable(true);
    //columns.Add(car => car.Condition).Titled("Condition").SetWidth(100).Encoded(false).Sanitized(false).Sortable(true);
}).WithPaging(2).Filterable().WithMultipleFilters()

Here you note that grid is placed without combination of div's within partial you may wrap div's in main div as i showed you above.
Oct 15, 2014 at 11:01 AM
Could you please share the complete code including action, partial view and main view

regards,
mcamail2002@gmail.com
Oct 15, 2014 at 11:22 AM

Action:

[HttpGet]
    public ActionResult IndexGrid(int? page)//you can get data from filter here
    {
        //you can apply filters for your data here
        var vm = Person.GetPeople().AsQueryable();
        var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory();
        var grid = ajaxGridFactory.CreateAjaxGrid(vm, page.HasValue ? page.Value : 1, page.HasValue, 5);
        return Json(new
        {
            Html = grid.ToJson("_IndexGrid", this),
            grid.HasItems
        }, JsonRequestBehavior.AllowGet);
    }

Main View:

<div class="table table-bordered"> @Html.Partial("_IndexGrid", Model) </div> @section scripts
 {
<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        var ajaxUrl = '/Home/IndexGrid';
        pageGrids.nameGrid.ajaxify({
            getPagedData: ajaxUrl,
            getData: ajaxUrl
        });
        pageGrids.nameGrid.refreshFullGrid();
    });
</script>
}

_IndexGrid:

@using GridMvc.Html
@using GridMvc.Sorting
@{
ViewBag.Title = "IndexGrid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>IndexGrid</h2> @model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<Mvc5DemoSite.Controllers.Person>

@Html.Grid(Model).Named("nameGrid").Columns(columns =>
                    {
                        columns.Add(x => x.ID).Titled("PersonId").SetWidth(10);
                        columns.Add(x => x.Forename).Sortable(true);
                        columns.Add(x => x.Surname).Sortable(true);
                        columns.Add(x => x.Gender).Sortable(false);
                        columns.Add(x => x.DOB).Sortable(false);
                    }).WithPaging(5,10)

on first time load, grid css is working fine. but on paging css is not working.

regards,
mcamail2002@gmail.com
Oct 15, 2014 at 11:28 AM
Its working fine on sorting but not working when page is changing using pager.
Oct 15, 2014 at 12:51 PM
No need to call pageGrids.nameGrid.refreshFullGrid(); this in your script remove it and tell me what will be happening.?
Oct 15, 2014 at 1:09 PM
Now i have changed the implementation like below:

Main View:

@model IEnumerable<Mvc5DemoSite.Controllers.Person>
@Html.Partial("_IndexGrid", Model)

Action for Main View:

return View(Person.GetPeople());

Partial View:

@using GridMvc.Html
@using GridMvc.Sorting
@{
ViewBag.Title = "IndexGrid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>IndexGrid</h2> @model IEnumerable<Mvc5DemoSite.Controllers.Person>
@Html.Grid(Model).Named("nameGrid").Columns(columns =>
                    {
                        columns.Add(x => x.ID).Titled("PersonId").SetWidth(10);
                        columns.Add(x => x.Forename).Sortable(true);
                        columns.Add(x => x.Surname).Sortable(true);
                        columns.Add(x => x.Gender).Sortable(false);
                        columns.Add(x => x.DOB).Sortable(false);
                    }).WithPaging(5,10)

Now paging & sorting working but without ajax. means page is refreshing on every event.
Oct 15, 2014 at 1:12 PM
my gtalk id is mcamail2002