template dropdown column not shown items in columns

[Sergiy Tokarchuk]

So I make the template column and put there :

       

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

<button class="btn btn-xs"><i class="icol-doc-pdf"></i> action</button>

<button class="btn btn-xs dropdown-toggle" data-toggle="dropdown">

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

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

<li><a rel='nofollow' href="#"><i class="icol-color-swatch-1"></i> Edit</a></li>

<li><a rel='nofollow' href="#"><i class="icol-font"></i> Send</a></li>

</ul>

</div>

So now I have a nice grid with dropdown column but when I open dropdown in the row I see (View attach File) that items in dropdown are invisible and lay under the grid

Attachment: err_2a1749bb.zip

[Ragavee U S]

Hi Sergiy Tokarchuk

 

Thanks for your interest in Syncfusion products.

 

We have analyzed the reported query and found that the cause of the issue is that the dropdown – menu is hidden behind the table cells “td”.

 

In order to overcome this issue, we suggest you to override the css properties of the template column by using the cssClass property of the Grid columns. Please refer the below code snippet.

 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >

           

            <Columns>

                . . .

               <ej:Column HeaderText="Dropdown Column" Template="true" TemplateID="#dropdownTemplate" Width="110" CssClass="customClass"/>

            </Columns>

        </ej:Grid>

    

<style>

    .customClass, .e-gridcontent {

        overflow: visible !important;

    }

 

For your convenience, we have created a simple sample based on your requirement and the same can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/Sample1803269814.zip

 

Please get back to us if you need any further assistance.

 

Regards

Ragavee U S