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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dropdownbutton

Thread ID:

Created:

Updated:

Platform:

Replies:

132337 Aug 27,2017 08:34 PM UTC Aug 29,2017 04:56 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Bernard Jurlina
Asked On August 27, 2017 08:34 PM UTC

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.

Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Bernard Jurlina
Replied On 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{ 
        positionrelative; 
    } 
</style> 

Regards,
Bernard.

Saravanan Arunachalam [Syncfusion]
Replied On 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. 


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.

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

;