ToolbarItems in Grid are not rendered correctly at the start until I resize the window

[Daniel]

Hi!

I used custom toolbarItems in Grid are not rendered correctly at the start until I resize the window:

How I can fix this?

Attached the view.

Thanks, regards!

Attachment: Index_2d9f0c4d.zip

[Thavasianand Sankaranarayanan]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

We suggest you to refresh the Grid toolbar by using refreshOverflow method in respective tab selected (this tab selected event only for other than the first tab Grid) event to resolve this misalignment issue. For the first tab Grid we suggest you to use Grid dataBound event to refresh the Grid toolbar by using refreshOverflow method. Please refer the below code snippet, 

Tab: 

 

@Html.EJS().Tab("ej2Tab").Created("created").Selected("selected").Items(new List<TabTabItem>{ 

    new TabTabItem { Header = new TabHeader { Text = "Datos Generales" }, Content = "#Grid1" }, 

    new TabTabItem { Header = new TabHeader { Text = "Secciones" }, Content = "#Grid2" }, 

    new TabTabItem { Header = new TabHeader { Text = "Medicamentos" }, Content = "#Grid3" }, 

    new TabTabItem { Header = new TabHeader { Text = "Notas" }, Content = "#Grid4" } 

}).Render() 

 

First Grid: 

 

<div id="Grid1" style="display: none"> 

    @(Html.EJS().Grid("DatosGeneralesGrid").DataBound("dataBound") 

                                  . . . . . .  

    ) 

</div> 

 

<script type="text/javascript"> 

    var flag = false; 

    // other than the first tab Grid 

    function selected(args) { // tab selected event 

        var grid = args.selectedContent.querySelector(".e-grid"); 

        if (!ej.base.isNullOrUndefined(grid)) { 

            grid.ej2_instances[0].toolbarModule.toolbar.refreshOverflow(); // refresh the Grid toolbar 

        } 

    } 

 

    // For the first tab Grid 

    function dataBound(args) { // First Grid dataBound event 

        if (flag) { 

            flag = false; 

            this.toolbarModule.toolbar.refreshOverflow(); 

        } 

    } 

 

    function created(args) { // tab created event 

        if (this.selectedItem == 0) { 

            flag = true; 

        } 

    } 

</script> 

Also, from your code we found that you have rendered all the Grids in the initial rendering of the tab control. In this case, some Grid event handlers are not initialized properly for all of these Grids. So, we suggest you to render the each Grid while selecting the respective tab by using the tab selecting event to avoid some unwanted issues in future. 

Regards, 

Thavasianand S. 

[Daniel]

Hi! The solution is working fine :)

About the suggestion to render each grid when selecting respective tab, what is the code/method in JS to render the grids?

var grid = document.getElementById("DatosGeneralesGrid").ej2_instances[0]........;

or

var grid = document.getElementById("DatosGeneralesGrid").....;

Thansk again! 

Regards

[Seeni Sakthi Kumar Seeni Raj]

Hi Daniel, 

You can render the Grid in tab selected event like as below code snippet, 

@Html.EJS().Tab("ej2Tab").Selected("selected").ContentTemplate(@<div> 

 

    <div class="e-tab-header"> @*tab header elements*@ 

        <div>Grid1</div> 

        <div>Grid2</div> 

    </div> 

 

    <div class="e-content"> @*tab content elements*@ 

        <div> 

            @Html.EJS().Grid("Gridone").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging(true).Columns(col => 

            { 

                    col.Field("OrderID").HeaderText("OrderID").Add(); 

                    col.Field("EmployeeID").HeaderText("EmployeeId").Add(); 

               }).Render() 

        </div> 

        <div> 

            <div id="secondGrid" class="sync-grid"></div> 

        </div> 

    </div> 

 

</div>).Render() 

 

<script type="text/javascript"> 

       function selected(args) { // tab selected event 

            if (args.selectedIndex == 1) { 

                var data = @Html.Raw(Json.Encode(ViewBag.datasource)); 

                var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis']; 

                var listObj = new ej.dropdowns.DropDownList({ 

                    dataSource: sportsData, 

                    placeholder: "Select games" 

                }); 

                var listObj1 = new ej.dropdowns.DropDownList({ 

                    dataSource: sportsData, 

                    placeholder: "Select games" 

                }); 

                var grid = new ej.grids.Grid({ 

                    dataSource: data, 

                    allowPaging: true, 

                    dataBound: function () { 

                        listObj1.appendTo('#ddE'); 

                        listObj.appendTo('#ddElement'); 

                    }, 

                    toolbar: ["Add", "Edit", "Delete", "Update", "Cancel", { template: "<input id='ddElement'/>" }, { template: "<input id='ddE'/>"}], 

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                    columns: [ 

                        { field: 'OrderID', headerText: 'Order ID', width: 120 }, 

                        { field: 'Freight', headerText: 'Freight', format: 'C2', width: 120 }, 

                        { field: 'ShipCity', headerText: 'Ship City', width: 150 } 

                    ] 

                }); 

                grid.appendTo(args.selectedContent.querySelector('.sync-grid')); 

            } 

        } 

</script> 

We have prepared the sample with this requirement and you can find that sample from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid704709486.zip 

In the above sample, we have appended the Grid with respective element by using selected event of the tab component. We suggest you to use this way to render the Grid to avoid the misalignment issues in Grid. 

Regards, 

Seeni Sakthi Kumar S. 

[Daniel]

Perfect! thanks for the sample.. I will apply it in my code.

Regards!

[Hariharan J V]

Hi Daniel,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Regards,
Hariharan