Column bootstrap dropdown display error

[lixo lixo]

I have a template column in my grid that has a boostrap dropdown. This template has a common button and a dropdown. The grid has the following layout (according to "Image1" in the attachment). When clicking on the dropdown, it is displayed only at the limit of the td (according to "Image2" of the attachment). In an internet search, they recommended placing the following code in the dropdown "onclick" (You can check it in the "Image5" in the attachment). After placing, it is displayed normally, but when scrolling, the grid does not follow responsiveness (according to "image3" in the attachment). The grid initialization source is attached (as in "Image4" in the attachment) and the source in the template column (as in "Image5" in the attachment).

PS .: Sorry for the English, I'm Brazilian and I used the Google translator

Attachment: PrintsSyncfusion_c823d835.zip

[Rajapandi Ravi]

Hi lixo, 

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/162868-438930905.zip 

Screenshot: 

 

And in your query you also mentioned that “when scrolling the grid does not follow responsiveness”. We have checked your query at our end and try to reproduce the issue. But it was unsuccessful. So please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards,
Rajapandi R