resize grid always to div

[Martin Sickel]

Dear all

I have a general question, if I setup a page like this, how can I make sure that the containing grid is always resized to the divs heigh and width.

The resize should happen if I resize my browser, or if I group.

    <ej:Splitter ID="SPMain" runat="server" Height="750" Width="100%" EnableAutoResize="true" CssClass="customCSS" Orientation="Horizontal">

        <ej:SplitPane PaneSize="60%" MinSize="700" runat="server">

            <PaneContent>

                <asp:UpdatePanel runat="server" >

                    <ContentTemplate>

                        <div id="targetelement" style="overflow: auto">

                            <div style="overflow: auto">

                                <ej:Grid ID="mainGrid" AllowResizeToFit="true" AllowResizing="true" AllowPaging="True" AllowSorting="true" AllowGrouping="true" runat="server" AllowSearching="True">

                                    <Columns>

                                        <ej:Column Field="_profile" HeaderText="Profile Name"  TextAlign="Left" Width="150">

                                        </ej:Column>

                                        <ej:Column Field="_dnis" HeaderText="DNIS" TextAlign="Left" Width="80">

                                        </ej:Column>

                                        <ej:Column Field="_testsite" HeaderText="T-System" TextAlign="Left" Width="30">

                                        </ej:Column>

                                        <ej:Column Field="_todial" HeaderText="Number to dial" TextAlign="Left">

                                        </ej:Column>

                                    </Columns>

                                    <ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>

                                    <PageSettings PageSize="17" />

                                    <ScrollSettings ScrollerSize="17" Height="580" />

                                    <SearchSettings  Fields="_profile, _dnis, _todial" IgnoreCase="true" />

                                </ej:Grid>

                            </div>

                        </div>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </PaneContent>

        </ej:SplitPane>

[Seeni Sakthi Kumar Seeni Raj]

Hi Martin,  

 

We suspect you are expecting a responsive behavior of the Grid while resizing the browser window. To enable the responsiveness of the Grid, you have to set the IsResponsive and MinWidth  APIs of the Grid. Refer to the following code example and Help Document. 

    <ej:Splitter ID="SPMain" runat="server" Height="auto" Width="100%" EnableAutoResize="true" ClientSideOnResize="onResize" CssClass="customCSS" Orientation="Horizontal"> 

        <ej:SplitPane PaneSize="60%" MinSize="700" runat="server"> 

            <PaneContent> 

                <asp:UpdatePanel runat="server"> 

                    <ContentTemplate> 

                        <div id="targetelement" style="overflow: auto"> 

                            <div style="overflow: auto"> 

                                <ej:Grid ID="OrdersGrid" IsResponsive="true" MinWidth="500" runat="server"> 

                                          . . .  

                                             . . . 

                                </ej:Grid> 

                            </div> 

                        </div> 

                    </ContentTemplate> 

                </asp:UpdatePanel> 

            </PaneContent> 

        </ej:SplitPane> 

    </ej:Splitter> 

https://help.syncfusion.com/js/api/ejgrid#members:isresponsive 

https://help.syncfusion.com/js/api/ejgrid#members:minwidth 

Regards, 

Seeni Sakthi Kumar S.