Drop Menu Option in Details View

[Saswati Soumya Satapathy]

Hi,

I want to implement drop menu option in the details view. Can we implement that, if yes how? I have attached a screenshot for reference.

Attachment: Capture_d5168b83.zip

[Sowmiya Padmanaban]

Hi Saswati, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with File Manager component. Before providing the solution for your requirement, we would like to confirm your exact requirement with File Manager. Can you please, confirm whether you are expecting any of the following cases with File Manager? 

 

Case 1: 

 

If you want to display the dropdown in each row of FileManager component. We have used Grid component as a sub component inside FileManager component. 

 

In Grid component, we have provided support for adding header columns to open custom context menu. Check the below case in Grid component sample. We suspect that you like to hide/display the columns based on the selection from that menu.   

 

You can choose the visibility of the column by using the columnMenu feature of grid. Please refer the below code example, sample and documentation for more information.  

 

  

<div class="control-section">  

    @(  

            @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").ShowColumnMenu(true).DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>  

            {  

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add();  

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

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

                col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();  

  

            }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render()  

    )  

</div>  

 

Sample: https://www.syncfusion.com/downloads/support/forum/154799/ze/1547991988505860.zip  

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/?no-cache=1#column-menu  

 

Sample demos: https://ej2.syncfusion.com/aspnetmvc/Grid/ColumnMenu#/material  

 

Are you expecting to achieve the above functionality in Grid element available within details view of File manager?  

 

Screenshot:  

 

  

 

If it does not meet your requirement, Please get back us with detailed description about your exact requirement scenario.  

 

Case 2: 

 

Are you expecting to add extra row in FileManager component (Setting button as a header of that row). When clicking the row header to display the dropdown. 

 

Can you please ensure the exact requirement. Based on your update, we will check the feasibility of achieving your requirement in FileManager component. 

 

Refer the below link to know more about the FileManager component. 

 

UG documentation-https://ej2.syncfusion.com/aspnetmvc/documentation/file-manager/getting-started/ 

 

Demo link-https://ej2.syncfusion.com/aspnetmvc/FileManager/Overview#/material 

 

Please let us know the requested details. 

 

Regards,  

Sowmiya.P