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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

It doesn´t show the toolbar correctly

Thread ID:

Created:

Updated:

Platform:

Replies:

149122 Nov 14,2019 08:34 PM UTC Nov 20,2019 10:11 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Ricardo
Asked On November 14, 2019 08:34 PM UTC

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 [Syncfusion]
Replied On November 15, 2019 09:46 AM UTC

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, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Pavithra S. 


Ricardo
Replied On November 15, 2019 08:00 PM UTC

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 [Syncfusion]
Replied On November 18, 2019 12:31 PM UTC

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
Replied On November 19, 2019 03:36 PM UTC

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 [Syncfusion]
Replied On November 20, 2019 10:11 AM UTC

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, 
 
 
Regards, 
Pavithra S. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon