Grid 100% width 100% height in Splitter

[Jaroslav]

Hello,

how i can set Grid to have 100% width and 100% height if the Grid is inside of Splitter? Attached pictures.

I have this Splitter. Which have first pane 25% width. In first pane is grid which i want 100% width and height. But on page load the first pane have width 100% and in this time the grid is rendered. Then the pane shrink to the 25% but the grid do not refresh his size. After i do some resize with page the grid refresh well. Also please how to add 100% height for the grid? Pictures attached. Thanks.

Also when I move the pane the grid remain same size. The grid should follow the new width.

Html.EJ().Splitter("outer").EnableAutoResize(true)
            .PaneProperties(
                p =>
                {
                    p.Add().ContentTemplate(
                        @: @AccountNavigatorAndAccountSelection()
                   ).PaneSize("25%");
                    p.Add().ContentTemplate(
                        @: @PivotAndCashflowGridAndIHBGrid()
                    );
                }
            )
            .Render();

@helper AccountNavigatorAndAccountSelection()
        {
    @Html.EJ().Splitter("AccountNavigatorAndAccountSelection").Orientation(Orientation.Vertical).EnableAutoResize(true).PaneProperties(p1 =>
            {
                p1.Add().ContentTemplate(
                    @: @AccountNavigator()
                );
                p1.Add().ContentTemplate(
                    @: @AccountSelection()
                );
            })
}

@helper AccountSelection()
{
    using (Html.CoPanel(string.Format("{0} {1}", FinLang.Account, ResLang.Selection), PanelType.Primary, cssClass: "account-selection"))
    {
        Html.RenderPartial("_AccountSelectionPartial");
    }
}

@(Html.EJ().Grid<AccountDto>(Html.id("AccountGrid"))
      .CssClass("account-grid")
      .ToolbarSettings(toolbar => toolbar.ShowToolbar(false))
      .EditSettings(x => x.AllowDeleting(true))
      .SelectionType(SelectionType.Multiple)
      .AllowFiltering()
      .FilterSettings(x => x.FilterType(FilterType.Excel))
      .AllowResizing()
      .AllowScrolling()
      .Locale(this.Culture)
      .ApplyDescriptor(new AccountDtoDescriptor(), true, false, new Column() { Field = TypeHelper.GetPropertyPath<AccountDto>(x => x.CounterpartyType), Template = "#" + Html.id("CounterpartyTypeTemplate"), TextAlign = TextAlign.Center})
)

Attachment: Grid_in_Splitter_c5d3db43.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Jaroslav, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query and if you want to Grid to behave the Grid to adjust the Width as per the Splitter, you need to use windowonresize method while on resizing. In the below code example we have called the windowonresize method on the resize and expandcollapse event of the Splitter. 

 

Please refer to the code example:- 

  @helper AccountNavigatorAndAccountSelection() 

                  { 

                    @Html.EJ().Splitter("AccountNavigatorAndAccountSelection").Orientation(Orientation.Vertical).EnableAutoResize(true).ClientSideEvents(eve => 

                  { 

                    eve.Resize("resize"); 

                    eve.ExpandCollapse("resize");  

                })  

                    .PaneProperties(p1 => 

                 { 

                    p1.Add().ContentTemplate( 

                    @: @AccountNavigator() 

                  ); 

                p1.Add().ContentTemplate( 

                    @: @AccountSelection() 

                 ); 

               }) 

              } 

 

<script type="text/javascript"> 

 

    function resize() { 

        var gridObj = $(".e-grid").ejGrid("instance"); 

        gridObj.windowonresize(); 

    } 

 

</script> 

 

Please refer to the API link:- 

https://help.syncfusion.com/api/js/ejgrid#methods:windowonresize 

https://help.syncfusion.com/api/js/ejsplitter#events:expandcollapse 

https://help.syncfusion.com/api/js/ejsplitter#events:resize 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T