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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

126157 Sep 27,2016 06:12 PM Sep 28,2016 11:55 PM ASP.NET Web Forms 3
loading
Tags: Grid
Michael Lambert
Asked On September 27, 2016 06:12 PM

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>

Karthick Kuppusamy [Syncfusion]
Replied On September 28, 2016 09:27 AM

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. 

 


Michael Lambert
Replied On September 28, 2016 11:05 AM

Thanks Karthic, worked great!

Karthick Kuppusamy [Syncfusion]
Replied On September 28, 2016 11:55 PM

Hi Michael, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 
K.Karthick. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;