Dropdown button in grid columns and dialog box header

[Rizwan]

Hi, I need help with two control

1. Who to render dropdown button in a grid column in a custom template.

2. Dropdown button and tooltip in dialog box header in custom code.

I am using. Header() in dialog box header.

Please check my code

Code and snapshot are attached.

Thank you

Attachment: button_b5e0ddc3.zip

[Balaji Sekar]

Hi Jannvhi, 

 

Query #1: Who to render dropdown button in a grid column in a custom template. 

 

Based on your query we have created a sample with bound the dropdown button in the Grid column using column.Template feature.  

 

Please refer the below code example and sample for more information. 

[Index.cshtml] 

  @Html.EJS().Grid("DefaultPaging").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

     

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add(); 

    col.HeaderText("").Template("#EXTemplate").Width("150").Add(); 

 

 

}).Height("400").AllowSorting().AllowPaging().Toolbar(new List<string>(){ "Search" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render() 

</div> 

<script type="text/x-jsrender" id="EXTemplate"> 

 

    <div class="rebot-btn-brand btn-group"> 

        <button type="button" class="btn btn-xs rebot-blue radius-btn dropdown-toggle" style="width: 90px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-download small"></span>Download</button> 

        <ul class="dropdown-menu"> 

            <li><a rel='nofollow' href="#">action</a></li> 

            <li><a rel='nofollow' href="#">another action</a></li> 

            <li><a rel='nofollow' href="#">something else here</a></li> 

            <li role="separator" class="divider"></li> 

            <li><a rel='nofollow' href="#">separated link</a></li> 

        </ul> 

    </div> 

</script> 

<style> 

    .btn-group { 

        display: inline-block !important 

    } 

 

    .e-grid .e-rowcell:not(.e-editedbatchcell) { 

        opacity: initial; 

    } 

 

    .e-grid .e-rowcell.e-templatecell { 

        overflow: visible; 

    } 

 

    .dropdown-menu { 

        line-height: 1.5; 

    } 

</style> 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/163184/ze/Grid-Dropdown-bind-column-template-2074675306.zip 

 

Query #2:  Dropdown button and tooltip in dialog box header in custom code 

 

Before proceeding your query please ensure that you facing dropdown button issue in EJ2 Dialog component or dropdown button issue in out side of EJ2 Dialog. Please share more details about this query that will help to validate further. 

 

Regards, 

Balaji Sekar