Fit the Grid to the ClientWidth or width=100% when the windows is resized by User

[Michael Herms]

Hi Everyone, 

the subject says all i have to say. I have a Grid with the perfect size until the User change the window width. Then the User must Refresh the Page to resize the Grid. To try automatic reload when page is resizing its not he best and performance way because on resizing the window the page will reloaded many times. 

I have try to set the Width by "set_GridWidth" but it's not define. Syncfusion Version 14.1.0.46

   

@(Html.EJ().Grid<Telefonbuecher>("TelefonbuchGrid")

          .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).CrossDomain(true).InsertURL("Home/Insert").UpdateURL("Home/Update").RemoveURL("Home/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor))

          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal).ShowDeleteConfirmDialog(); })

          .AllowScrolling(true)

          .AllowSorting()

          .AllowResizeToFit()

          .AllowResizing()

          .IsResponsive() 

          .AllowPaging().PageSettings(page => page.PageSize(15)) 

          .AllowGrouping().GroupSettings(group => { group.GroupedColumns(col => { col.Add("Team"); }).ShowDropArea(false).ShowUngroupButton(false); })   /*Grouping Enabled for Teams */

          .ToolbarSettings(toolbar =>

          {

              toolbar.ShowToolbar().ToolbarItems(items =>

              {

                  items.AddTool(ToolBarItems.Add);

                  items.AddTool(ToolBarItems.Edit);

                  items.AddTool(ToolBarItems.Delete);

                  items.AddTool(ToolBarItems.Update);

                  items.AddTool(ToolBarItems.Cancel);

                  items.AddTool(ToolBarItems.Search);

              });

          })

          .Locale("de-DE")

          .Columns(col =>

          {

              col.Field("EintragId").Visible(false).IsPrimaryKey(true).Add();

              col.Field("Vorname").HeaderText("Vorname").TextAlign(TextAlign.Left).EditType(EditingType.String).ValidationRules(v => v.AddRule("required", false)).Add();

              col.Field("Nachname").HeaderText("Nachname").TextAlign(TextAlign.Left).EditType(EditingType.String).ValidationRules(v => v.AddRule("required", true)).Add();

              /* Some more column */

          }).ClientSideEvents(ev =>

          {

              ev.BeginEdit("beginEdit");

              ev.ToolbarClick("toolbarClicked");

              ev.EndAdd("endAdd");

          }).EnablePersistence()

        )}

Thanks a lot! 

[Venkatesh Ayothi Raman]

Hi Michale, 

Thank you for contacting Syncfusion support. 

We can set the grid height and width by using setDiemension method in Grid. We have created a sample for your requirement. Please refer to the sample and code example, 

Code example: 

<Window resize event> 

$(window).resize(function() { 

       var  width = $(window).width(); 

       var  height = $(window).height(); 

        var obj = $("FlatGrid").ejGrid("instance"); 

        obj.setDimension(height,width); 

 

 

        }) 

     

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/RemoteSaveAdaptorSample2046753181 

If we misunderstood your query, then could you please share more details about your requirement. 

Regards, 

Venkatesh Ayothiraman.