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.
Unfortunately, activation email could not send to your email. Please try again.

Dropdownbutton

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 03:13 AM

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 12:45 PM

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 12:56 AM

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.

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.

;