Two independend Grids on one page, paging fails

Jul 18, 2014 at 7:25 AM
Hello,
on my page I have 2 indipendent grids, each in a separate div so that they should be displayed one below the other.
If I open this page the grids are displaying their different data and everything seems to be ok.
But if I now e.g. use the pager of the second grid to see the second page of that grid, a new grid appears directly after the first grid and does not replace the second grid. Now I got3 grids on the page and curiously now the pager works on newly second grid as expected.
Here ist the code of the grids part of the page.
<div class="paddLeft16 margtop20">
    <h4 class="orange">Heading1</h4>
    @if (Model.Member.OrgaFunktionen.Any())
    {
        <div class="Grid800"> //set the width of the Table
            <div id="OrgaGrid">
                @Html.Grid(Model.Member.OrgaFunktionen).Named("OrgaGrid").SetLanguage("de").Columns(cols =>
                {
                    cols.Add(c => c.MaId, true);
                    cols.Add(c => c.OrgaId, true);
                    cols.Add(c => c.FktId, true);
                    cols.Add(c => c.DST, "Dst").Sortable(true).Titled("Dienststelle").SetWidth(80);
                    cols.Add(c => c.ORG, "Org").Sortable(true).SetWidth(400);
                    cols.Add(c => c.FKT, "Fkt").Sortable(true).Titled("Funktion");
                    cols.Add()                      // Remove - Link
                        .Sanitized(false)           
                        .Encoded(false)             
                        .RenderValueAs(c => Html.ActionLink("Remove", "RemoveMaFunction", new { MaId = c.MaId, OrgaId = c.OrgaId, FktId = c.FktId })
                        .ToHtmlString())
                        .SetWidth(90);
                }).WithPaging(5, 20, "OrgaGridPg")
            </div>
        </div>
    }
    else
    {
        <h4 class="orange">nothing defined</h4>
    }

</div>
<hr />
<div class="paddLeft16">
    <h4 class="orange">Heading2</h4>
    @if (Model.Member.Roles.Any())
    {
        <div class="Grid800">
            <div id="RollenGrid">
                @Html.Grid(Model.Member.Roles).Named("RollenGrid").SetLanguage("de").Columns(cols =>
                {
                    cols.Add(r => r.Id, true);
                    cols.Add(r => r.Name, "Name").Sortable(true).Titled("Rolle").SetWidth(100);
                    cols.Add(r => r.Description, "Desc").Sortable(true).SetWidth(300);
                    cols.Add()                      
                        .Sanitized(false)           
                        .Encoded(false)             
                        .RenderValueAs(r => Html.ActionLink("Remove", "RemoveFromRolle", new { RollenId = r.Id, MaId = Model.Member.Id })
                        .ToHtmlString())
                        .SetWidth(90);
                }).WithPaging(5, 20, "RollenGridPg")
            </div>
        </div>
    } 
    else
    {
        <h4 class="orange">nothing defined</h4>
    }

</div>
As you can see, the grids are named differently and positioned in divs with different Ids.
Did I something wrong? What should be changed to fix this.
Coordinator
Jul 28, 2014 at 4:14 AM
Hi,

It's a very strange behaviour. When you click at the second page to what URL you redirect ?
Aug 5, 2014 at 10:46 AM
Sorry for that delay for my answer. I was on holidays. It seems that was an error of javascript. I reinstalled javascript, javascript.ui and bootstrap completely.
Now I find that it works as expected.