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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146048 Jul 17,2019 06:22 PM UTC Jul 24,2019 06:40 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Daniel
Asked On July 17, 2019 06:22 PM UTC

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 [Syncfusion]
Replied On July 19, 2019 01:09 PM UTC


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
Replied On July 19, 2019 02:46 PM UTC

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 [Syncfusion]
Replied On July 22, 2019 10:25 AM UTC

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, 


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
Replied On July 22, 2019 02:38 PM UTC

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

Regards!

Hariharan J V [Syncfusion]
Replied On July 24, 2019 06:40 AM UTC

Hi Daniel,

Thanks for your update.

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

Regards,
Hariharan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon