Bootstrap Dropdown is hidden behind rows

[Haseeb]

Hi,

I have been using Syncfusion JS Grid component, and it has been working great so far.. i have added column template to render bootstrap dropdown and it is not being rendered properly. Dropdown menu is behind the grid row. Select component is rendered properly but bootstrap dropdown menu is behind the row.

 

[Balaji Sekar]

Hi Haseeb, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are facing the problem with dropdown popup. We checked this query in our end and achieved the dropdownlist item populating on wrong position while click on Bootstrap dropdown which is rendered in Grid row using column template. Please refer the below code example and sample for more information.  

[Index.cshtml] 

 

<script type="text/x-jsrender" id="actionTemplate"> 

    <div class="btn-group" style="position:relative;"> 

    <div class="btn-group" style="display: inline-block; margin-left:5px;"> 

            <button type="button" class="btn btn-success">Actions</button> 

            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 

                <span class="caret"></span> 

                <span class="sr-only">Toggle Dropdown</span> 

            </button> 

            <ul class="dropdown-menu" style="z-index:99999;position:absolute;" role="menu"> 

                <li><button id="buttonItems">Associer des articles</button></li> 

                <li><button id="buttonCreateItemone">Créer un article</button></li> 

                <li><button id="buttonCreateItemtwo">Créer un article</button></li> 

                <li><button id="buttonCreateItemtwo">Créer un article</button></li> 

            </ul> 

        </div> 

        </div> 

   

</script> 

<style> 

    .e-grid .e-rowcell.e-templatecell { 

        overflow: visible !important; 

    } 

    .e-grid .e-gridcontent { 

        overflow: visible !important; 

    } 

    .e-grid .e-gridcontent .e-content { 

        overflow: visible !important; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/172675-934084953.zip 

Screenshot: 

 

Regards, 

Balaji Sekar. 

[Haseeb]

Thanks, it has solved the issue.

[Vignesh Natarajan]

Hi Haseeb,  

Thanks for the update. 

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries  

Regards, 

Vignesh Natarajan