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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Dropdownbutton

Dropdownbutton

I inserted bootstrap dropdownbutton in grid column, but it won't open dropdown.

<script type="text/x-jsrender" id="rowAction">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            Akcije za označene
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a rel='nofollow' href="#" onclick="ispisiVirmane()">Ispis virmana</a></li>
        </ul>
    </div>
</script>

...
col.HeaderText("Akcije").Template("#rowAction").TextAlign(TextAlign.Center).Width(100).Add();
...

Is there a way to fix this or is there some other way to implement this?

Thanks!
Bernard.

3 Replies
SA Saravanan Arunachalam Syncfusion Team August 28, 2017 07:13 AM UTC

Hi Bernard, 
Thanks for contacting Syncfusion’s support. 
We are sorry that we are unable to reproduce the reported issue, hence we suspect that you have refer the jquery which is lower than 1.9 version which may be the cause of the issue. So, we suggest you to ensure whether you have referred bootstrap.js and bootstrap.css file and also ensure the jQuery version which is higher than 1.9 version. Please refer to the below code example. 
<head> 
        <meta charset="utf-8" /> 
        <title>@ViewBag.Title  - My ASP.NET MVC Application</title> 
        
        <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
        <link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    @Styles.Render("http://cdn.syncfusion.com/15.3.0.26/js/web/flat-azure/ej.web.all.min.css") 
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"></script>   
    @Scripts.Render("~/Scripts/jsrender.min.js") 
    <script src="~/Scripts/jquery.validate.min.js"></script> 
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://cdn.syncfusion.com/15.3.0.26/js/web/ej.web.all.min.js"></script> 
 
         
    </head> 
 
<style> 
    /* To adjust row height based on the menu*/ 
    .dropdown-menu{ 
        position: relative; 
    } 
</style> 
 
 
And also we have created a sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


BJ Bernard Jurlina August 28, 2017 04:45 PM UTC

Hi Saravanan,

thanks for the attached example, the thing was in style which I was missing.

<style> 
    /* To adjust row height based on the menu*/ 
    .dropdown-menu{ 
        position: relative; 
    } 
</style> 

Regards,
Bernard.

SA Saravanan Arunachalam Syncfusion Team August 29, 2017 04:56 AM UTC

Hi Bernard,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


Loader.
Up arrow icon