jQuery Grid Plugin - jqGrid - Topic: Adding more than 1 jqGrid to the same page http://www.trirand.com/blog/?page_id=393/help/adding-more-than-1-jqgrid-to-the-same-page Simple:Press Version 5.7.5.3 rrodriguez1975 on Adding more than 1 jqGrid to the same page http://www.trirand.com/blog/?page_id=393/help/adding-more-than-1-jqgrid-to-the-same-page#p29575 Help http://www.trirand.com/blog/?page_id=393/help/adding-more-than-1-jqgrid-to-the-same-page#p29575 Is it possible to add more than 1 jqGrid to the same page? if so, could you tell me how? I have two jgGrid, both in the same page, but one appears in one tab and the another in another tab. I have a jquery ui tab. My problem is that only one is shown, the another not. Any ideas what's wrong?

<div id="jqGrid" class="jqGrid">
    @Html.Partial("../Grids/_ComponentGrid")
</div>

<div id="jqGridCapsules" class="jqGrid">
    @Html.Partial("../Grids/_CapsuleGrid")
</div>

Partial views:

../Grids/_ComponentGrid:

<table id="_componentGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_componentPager" style="text-align: center;">
</div>

../Grids/_CapsuleGrid

<table id="_capsuleGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_capsulePager" style="text-align: center;">
</div>

I have debugged it with Internet explorer and as I can see, it seems like jqGrid is being applied correctly for first (I post main div, within them there are others divs nested):

<div class="jqGrid" id="jqGrid">

    <div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox__componentGrid" style="width: 790px;" dir="ltr">

<div class="ui-widget-overlay jqgrid-overlay" id="lui__componentGrid"/>

<div class="loading ui-state-default ui-state-active" id="load__componentGrid" style="display: block;">

<div class="ui-jqgrid-view" id="gview__componentGrid" style="width: 790px;">

<div class="ui-jqgrid-resize-mark" id="rs_m_componentGrid">

<div class="ui-state-default ui-jqgrid-pager ui-corner-bottom" id="_componentPager" style="width: 790px; text-align: center;" dir="ltr">

</div>

However, for second is not being applied as generated code is:

<div class="jqGrid" id="jqGridCapsules">

<table id="_capsuleGrid" cellspacing="0" cellpadding="0">

<div id="_capsulePager" style="text-align: center;">

as you can see for second, the code generated is completely different from the first. It should be the same as first. So it seems like jqGrid style is not being applied to the second one, Why? What's happening? any ideas, please?

]]> Mon, 30 Sep 2013 15:41:49 +0300