We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Resize issue with ej:grid in Tab control with IsResponsive set to True

Resize issue with ej:grid in Tab control with IsResponsive set to True

I have 2 grids each inside a different content section of a tab control.  Initially every works.  When I switch between tabs the grids are properly sized.  Though once I resize the window, the grid on the tab section that is visible sizes fine, but when I switch tabs the grid on that tab is sized with it's width at a minimum. If I resized the window the grid resizes fine again, but the grid on the other tab is now sized at a minimum...



        <ej:Tab ID="tbMain" runat="server"  >
            <Items>
                <ej:TabItem  ID="OneCloud" Text="OneCloud" >
                    <ContentSection>
                        <ej:Button ID="btnExcel" runat="server" Text="Excel" OnClick="btnOCExcel_Click"></ej:Button>
                        <ej:Grid ID="grdBudget" runat='server' DetailsTemplate="#tabGridContents" AllowFiltering="True" AllowResizing="True" AllowSorting="True" AllowTextWrap="True"
                            AllowMultiSorting="True" AllowPaging="True" EnableRowHover="False" AllowReordering="True" ShowStackedHeader="true" ShowColumnChooser="true"
                            AllowScrolling="true" MinWidth="500" IsResponsive="true"                   
                            OnServerEditRow="grdBudget_ServerEditRow" OnServerAddRow="grdBudget_ServerAddRow">
                            <EditSettings AllowEditing="True" AllowAdding="True" EditMode="Normal" />
                            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,update,cancel,search"></ToolbarSettings>
                            <Columns>
                                <ej:Column Field="RequestID" Width="75" HeaderText="Req. ID" AllowEditing="false" IsIdentity="true" IsPrimaryKey="true">
                                </ej:Column>
                                <ej:Column Field="Period" Width="75" HeaderText="Period" EditType="Dropdown" >
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column Field="BU" Width="100" HeaderText="BU" EditType="Dropdown"  >
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column Field="Description" Width="200" HeaderText="Business Objective">
                                </ej:Column>
                                <ej:Column Field="ProjectName" Width="150" HeaderText="Project Name">
                                </ej:Column>
                                <ej:Column HeaderText="MBO" Width="150" Field="MBO" EditType="Dropdown">
                                </ej:Column>
                                <ej:Column HeaderText="Grouping" Width="90" Field="Grouping">
                                </ej:Column>
<%--                                <ej:Column HeaderText="Service" Field="ISChoice" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>--%>
                                <ej:Column Field="Ranking" Width="75" HeaderText="Rank" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="New/Exp" Width="90" Field="NewExpand" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column HeaderText="Current TB/Org" Width="75" Field="CurrentTestbedOrg">
                                </ej:Column>
                                <ej:Column HeaderText="Location" Width="90" Field="Location" EditType="Dropdown">
                                </ej:Column>

                                <ej:Column HeaderText="Tier" Width="75" Field="OCTier" EditType="Dropdown">
                                </ej:Column>
                                <ej:Column HeaderText="Memory (GB)" Width="90" Field="Memory" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="Storage (GB)" Width="90" Field="Storage" EditType="Numeric" >
                                </ej:Column>
                                <ej:Column HeaderText="S. Type" Width="90" Field="StorageType" EditType="Dropdown">
                                </ej:Column>

                                <ej:Column HeaderText="Imp. Not Funded" Width="200" Field="ImpNotFunded" >
                                </ej:Column>
                                <ej:Column HeaderText="Add. Requirements" Width="200" Field="AddlRequirements">
                                </ej:Column>
                                <ej:Column HeaderText="Qtr Needed" Width="75" Field="QtrNeeded" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="Request" Width="75" Field="DepRequest" EditType="Boolean" TextAlign="Center" AllowFiltering="false">
                                </ej:Column>
                                <ej:Column HeaderText="Consolidate Ratio" Width="150" Field="DepConsolidRatio" AllowFiltering="false" >
                                </ej:Column>
                                <ej:Column HeaderText="Notes" Width="200" Field="Notes" >
                                </ej:Column>

                                <ej:Column HeaderText="Requester" Width="150" Field="Requester" >
                                </ej:Column>
                                <ej:Column HeaderText="Technical" Width="150" Field="ContactTechnical" >
                                </ej:Column>
                                <ej:Column HeaderText="BU" Width="150" Field="ContactBU" >
                                </ej:Column>
                                <ej:Column HeaderText="VP" Width="150" Field="ContactVP" >
                                </ej:Column>
                            </Columns>
                            <StackedHeaderRows>
                                <ej:StackedHeaderRow>
                                    <StackedHeaderColumns>
                                        <ej:StackedHeaderColumn Column="OCTier,Memory,Storage,StorageType" HeaderText="OneCloud" TextAlign="Center" CssClass="onecloud" />
                                        <ej:StackedHeaderColumn Column="Requestor,ContactTechnical,ContactBU,ContactVP" HeaderText="Contact" TextAlign="Center" CssClass="haas" />
                                        <ej:StackedHeaderColumn Column="DepRequest,DepConsolidRatio" HeaderText="Depreciation" TextAlign="Center" CssClass="dep" />
                                    </StackedHeaderColumns>
                                </ej:StackedHeaderRow>
                            </StackedHeaderRows>
                            <ClientSideEvents DetailsDataBound="detailGridData" ActionComplete="complete" />
                            <PageSettings PageSize="10" />
                            <FilterSettings FilterType="FilterBar" />
                        </ej:Grid>
                    </ContentSection>
                </ej:TabItem>
                <ej:TabItem ID="HaaS" Text="HaaS">
                    <ContentSection>
                        <ej:Button ID="btnExHaaS" runat="server" Text="Excel" OnClick="btnExHaaS_Click" ></ej:Button>
                        <ej:Grid ID="grdHaas" runat="server" DetailsTemplate="#tabGridContents" AllowFiltering="True" AllowResizing="True" AllowSorting="True" AllowTextWrap="True"
                            AllowMultiSorting="True" AllowPaging="True" EnableRowHover="False" AllowReordering="True" ShowStackedHeader="true" ShowColumnChooser="True"
                            AllowScrolling="true" MinWidth="500" IsResponsive="true"
                            OnServerAddRow="grdBudget_ServerAddRow">
                           <EditSettings AllowEditing="True" AllowAdding="True" EditMode="Normal"  />
                           <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,update,cancel,search"></ToolbarSettings>
                            <Columns>
                                <ej:Column Field="RequestID" Width="75" HeaderText="Req. ID" AllowEditing="false" IsPrimaryKey="true">
                                </ej:Column>
                                <ej:Column Field="Period" Width="75" HeaderText="Period" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column Field="BU" Width="100" HeaderText="BU" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column Field="Description" Width="200" HeaderText="Business Objective">
                                </ej:Column>
                                <ej:Column Field="ProjectName" Width="150" HeaderText="Project Name">
                                </ej:Column>
                                <ej:Column HeaderText="MBO" Width="150" Field="MBO" EditType="Dropdown">
                                </ej:Column>
                                <ej:Column HeaderText="Grouping" Width="90" Field="Grouping">
                                </ej:Column>
<%--                                <ej:Column HeaderText="Service" Field="ISChoice" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>--%>
                                <ej:Column Field="Ranking" Width="75" HeaderText="Rank" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="New/Exp" Width="90" Field="NewExpand" EditType="Dropdown">
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>
                                <ej:Column HeaderText="Current TB/Org" Width="100" Field="CurrentTestbedOrg">
                                </ej:Column>
                                <ej:Column HeaderText="Location" Width="90" Field="Location" EditType="Dropdown">
                                </ej:Column>

                                <ej:Column HeaderText="Tier" Width="75" Field="HaaSTier" EditType="Dropdown">
                                </ej:Column>
                                <ej:Column HeaderText="Qty" Width="75" Field="HaaSQty" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="S. Type" Width="90" Field="StorageType" EditType="Dropdown" >
                                </ej:Column>
                                <ej:Column HeaderText="Storage (GB)" Width="90" Field="Storage" EditType="Numeric" >
                                </ej:Column>
                                <ej:Column HeaderText="Infra Type" Width="90" Field="InfraType" EditType="Dropdown" >
                                </ej:Column>
                            
                                <ej:Column HeaderText="Imp. Not Funded" Width="200" Field="ImpNotFunded" >
                                </ej:Column>
                                <ej:Column HeaderText="Add. Requirements" Width="200" Field="AddlRequirements">
                                </ej:Column>
                                <ej:Column HeaderText="Qtr Needed" Width="75" Field="QtrNeeded" EditType="Numeric">
                                </ej:Column>
                                <ej:Column HeaderText="Request" Width="75" Field="DepRequest" EditType="Boolean" AllowFiltering="false">
                                </ej:Column>
                                <ej:Column HeaderText="Consolidate Ratio" Width="150" Field="DepConsolidRatio" AllowFiltering="false" >
                                </ej:Column>
                                <ej:Column HeaderText="Notes" Width="200" Field="Notes" >
                                </ej:Column>

                                <ej:Column HeaderText="Requester" Width="150" Field="Requester" >
                                </ej:Column>
                                <ej:Column HeaderText="Technical" Width="150" Field="ContactTechnical" >
                                </ej:Column>
                                <ej:Column HeaderText="BU" Width="150" Field="ContactBU" >
                                </ej:Column>
                                <ej:Column HeaderText="VP" Width="150" Field="ContactVP" >
                                </ej:Column>
                            </Columns>
                            <StackedHeaderRows>
                                <ej:StackedHeaderRow>
                                    <StackedHeaderColumns>
                                        <ej:StackedHeaderColumn Column="HaaSTier,HaaSQty,StorageType,Storage,InfraType" HeaderText="HaaS" TextAlign="Center" CssClass="onecloud" />
                                        <ej:StackedHeaderColumn Column="Requestor,ContactTechnical,ContactBU,ContactVP" HeaderText="Contact" TextAlign="Center" CssClass="haas" />
                                        <ej:StackedHeaderColumn Column="DepRequest,DepConsolidRatio" HeaderText="Depreciation" TextAlign="Center" CssClass="dep" />
                                    </StackedHeaderColumns>
                                </ej:StackedHeaderRow>
                            </StackedHeaderRows>
                            <ClientSideEvents DetailsDataBound="detailGridData" ActionComplete="complete" />
                            <PageSettings PageSize="10" />
                            <FilterSettings FilterType="FilterBar" />
                        </ej:Grid>
                    </ContentSection>
                </ej:TabItem>
            </Items>
        </ej:Tab>

3 Replies
KK Karthick Kuppusamy Syncfusion Team September 28, 2016 01:27 PM UTC

Hi Michael, 

Thanks for Contacting Syncfusion support. 

We have analyzed your scenario we suggest you to use the ClientSideOnActive event of the tab for your requirement.While switch the tab from one to another after resize we have to call the windowonresize method for resizing the grid. 

Please  find the code example. 

 
<ej:Tab ID="Defaulttab" runat="server"  Width ="1200px" ClientSideOnActive="onactive"  > 
        <Items> 
            <ej:TabItem Id="tab0" Text="Tab 1"> 
          <ContentSection> 
          <div> 
            <ej:Grid ID="Grid1"    AllowPaging="True" AllowScrolling="True" MinWidth="500" IsResponsive="true" 
               runat="server"> 
              … 
              …          
</ej:Grid> 
    </div> 
      </ContentSection> 
</ej:TabItem> 
            <ej:TabItem Id="tab1" Text="Tab 2"> 
                <ContentSection> 
                     <div> 
            <ej:Grid ID="Grid2" runat="server" AllowPaging="True" AllowScrolling="True" MinWidth="500" IsResponsive="true"> 
            .. 
            ... 
        </ej:Grid> 
    </div> 
      </ContentSection> 
            </ej:TabItem> 
         </Items> 
    </ej:Tab> 
    <script> 
        function onactive(args) { 
            if (args.activeIndex == 0) { 
                var obj = $('#<%= Grid1.ClientID %>').ejGrid("instance"); 
                obj.windowonresize();//resize the first grid if activeIndex is equal to 0 
            } 
            else { 
       var obj = $('#<%= Grid2.ClientID %>').ejGrid("instance") 
                obj.windowonresize();//resize the second grid if activeIndex is equal to 1 
            } 
        } 
</script> 
</asp:Content> 


Please refer the following UG links for your reference. 

For your reference we have created a sample based on your requirement and same it can be downloaded from the following location. 

Please let us know if you have any concern. 

Regards, 
K.Karthick. 

 


ML Michael Lambert September 28, 2016 03:05 PM UTC

Thanks Karthic, worked great!

KK Karthick Kuppusamy Syncfusion Team September 29, 2016 03:55 AM UTC

Hi Michael, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 
K.Karthick. 


Loader.
Up arrow icon