It doesn´t show the toolbar correctly

[Ricardo]

As I showing in the image in the .zip I want to show the tooltip menu but it doesn´t show it correctly; I asking for a solution that brings the menu options to the front like contex menu but in each toolbar menu on it´s right cell.

p.s. I include the source code from the view which I am trying to made the tooltip

Attachment: Pictures_a35c66ec.zip

[Pavithra Subramaniyam]

Hi Ricardo, 

 

We checked your reported query with the provided sample code and based on that we are able to understand that your requirement is to render a menu with items as a separate cell in each of the grid columns. You can achieve this by rendering our EJ2 Menu control in the column using column template. This is explained below, 

 

Initially render a grid and define a template column with a ul element inside it. 

 

@Html.EJS().Grid("parentgrid").QueryCellInfo("QueryCellInfo").DataSource((IEnumerable<object>)ViewBag.Employees).Columns(col => 

{ 

   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

   col.Field("Name").HeaderText("Name").Width("125").Add(); 

   col.Field("Title").HeaderText("Title").Width("180").Add(); 

   col.Field("City").HeaderText("City").Width("135").Add(); 

  col.HeaderText("Actions").Width("135").Template("#template").Add(); 

}).AllowSorting().Render() 

 

<script id="template" type="text/x-template"> 

  <ul class="menu"></ul> 

</script> 

 

Then in the queryCellInfo event (Triggers before each cell element is appended to grid) check if it is template cell and if so initialize the Menu control and append it to the cell. 

 

<script> 

  function QueryCellInfo(args) { 

    if (args.column.headerText === "Actions") { 

      // Get the ul element inside the cell 

      // you can set unique id for the menu ul element 

      var menuEle = args.cell.querySelector('.menu'); 

      // Menu items 

      var menuItems = [ 

        { 

          iconCss: 'e-icons MT_Menu', 

          items: [ 

            { text: 'Cut', iconCss: 'e-icons Cut' }, 

            { text: 'Copy', iconCss: 'e-icons Copy' }, 

            { text: 'Paste', iconCss: 'e-icons Paste' }, 

          ] 

        } 

      ]; 

 

      // Initialize Menu component. 

      var menuObj = new ej.navigations.Menu({ items: menuItems }); 

      menuObj.appendTo(menuEle); 

    } 

  } 

</script> 

 

Icon styles for the menu items. 

 

<style> 

  .MT_Menu::before { 

        content: '\e984'; 

  } 

 

  .Cut::before { 

    content: '\e604'; 

  } 

 

  .Copy::before { 

    content: '\e60d'; 

  } 

 

  .Paste::before { 

    content: '\e601'; 

  } 

 

  // Removes the caret icon displayed in the menu 

  .e-menu-wrapper ul .e-menu-item .e-caret::before { 

    content: '' !important; 

  } 

 

  .e-menu-wrapper ul.e-menu { 

    width: 44px; 

  } 

</style> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

https://ej2.syncfusion.com/javascript/documentation/menu/es5-getting-started/ 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149122/ze/GridWithMenuInColumn707195335  

 

Let us know if you have any concerns. 

 

Regards, 

Pavithra S. 

[Ricardo]

thanks, it worked perfectly but now I would like to make the root item menu smaller. I tried but the submenu didn´t show on the right position I wanted to fixed but It didnt work correctly

[Pavithra Subramaniyam]

Hi Ricardo, 

Based on your query we suspect your requirement is to adjust the size of the rendered menu. You can achieve this by setting required height and width to the menu’s class, 

<style> 

  .e-menu-parent.e-ul { 

    height: 120px; 

    width: 100px; 

  } 

</style> 

If we misunderstood your query please get back to us with the details so that we can check and provide you the solution for it. 

 

Regards, 

Pavithra S. 

[Ricardo]

thanks for the answer and it was usefull but I meant about the "menubar", how do I make it smaller and move the ".e-menu-parent.e-ul"?  in such a way it won´t look out of place?

[Pavithra Subramaniyam]

Hi Ricardo, 

 

You can achieve your requirement by customizing the following menu related styles in your application, 

 

// Adjusting position of the menu element 

.e-menu-wrapper { 

    margin-left: 11px; 

} 

 

// Modifying the width of the parent menu item 

.e-menu-wrapper ul.e-menu { 

    width: 20px; 

} 

 

// Adjusting the position of the caret icon rendered inside the menu 

.e-menu-wrapper ul.e-menu .e-menu-item { 

    padding-left: 3px; 

    padding-right: 3px; 

    width: 20px; 

} 

 

We have modified the previously provided sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149122/ze/GridWithMenu426352405  

 

Regards, 

Pavithra S.