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.
Syncfusion Feedback

Customize Tooltip for headerText

Thread ID:

Created:

Updated:

Platform:

Replies:

127145 Oct 28,2016 03:04 PM UTC Nov 2,2016 01:38 PM UTC ASP.NET MVC 5
loading
Tags: Grid
indrani Gajjarapu
Asked On October 28, 2016 03:04 PM UTC

Hi,

I have a situation where i want to display Header text as "English Lit.." using .HeaderText("<div>" + Model.All.Table.Columns[item.Key.ToString()].Caption + "</div>")

However i want the tooltip to display full name which i have as an extended Property for the datatable (Model.All.Table.Columns[item.Key.ToString()].ExtendedProperties["FullName"])

I could set the tooltip for the grid content but not the headers. Can you please let me know how i can achieve this??

Thanks in advance


Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 31, 2016 12:55 PM UTC

Hi Indirani, 

Query : Customize Header text tooltip for Grid column header  

We can enable header tooltip for the Grid column header by using the HeaderTooltip property of the Grid column.  

The Tooltip property of the grid columns is used to enable tooltip for both header and content of the corresponding column. Whereas, the HeaderToolTip property of the column is used to enable tooltip only for the header.  

We have created a sample, which can be downloaded from the below location. 


In the above sample, while hovering the Grid column header “Address corresponding…”, it will show the customized header tooltip as we have given value in the HeaderTooltip property. Please refer the below code example.  

@(Html.EJ().Grid<object>("Editing") 
               .Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/") 
               .AllowPaging() 
                .Columns(col => 
                { 
                    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add(); 
                    col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); 
                    col.Field("ShipCity").HeaderText("ShipCity").Width(90).Add(); 
                    col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add(); 
                    col.Field("ShipAddress").HeaderText("Address corresponding to Shipment").HeaderTooltip("Address corresponding to Shipment").ClipMode(ClipMode.EllipsisWithTooltip).Width(55).Add();  // customized header text tooltip for grid column header 
                    col.Field("EmployeeID").HeaderText("EmployeeID").Width(80).Add(); 
                     
                }) 
                 
) 

Please refer to the below documentation links for more information. 


We will include the details on the headerTooltip property and refresh the documentation online. 

Regards, 
Thavasianand S. 


indrani Gajjarapu
Replied On October 31, 2016 01:15 PM UTC

Hi,

Thank you so much..funny i missed .HeaderTooltip

Anyway thanks for your quick reply..

Quick Question: I have seen responsive filtering and sorting in mobile mode. Is there a way for me to achieve that in normal desktop mode. I would like to implement filtering and sorting in the toolbar and onClick, Column names will be listed in a modal as it does in mobile mode.

Jayaprakash Kamaraj [Syncfusion]
Replied On November 1, 2016 12:27 PM UTC

 
Hi Indrani, 
 
We have rendered responsive filter and sort icon in mobile mode only for UI appearance. Filtering operation is performed by rendering filter dialog corresponds to the particular column. So, it is not common use case to display responsive filter and sort icon in desktop mode.    
   
Please use the below workaround to achieve your requirement where we have used custom toolbar button and toolBarClick event of Grid. In this event, we need to use filterColumn method  when $(args.target).text() as Filter else we need to use sortColumn method of ejGrid. Please refer to the below help document, code example.   
 
Help document for, 
 




<button id="btnOpen" > Filter </button>  
<button id="btnclose"> Sort </button>  
@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("Editing")  
        .Datasource((IEnumerable<object>)ViewBag.dataSource)  
                .ToolbarSettings(tool => tool.ShowToolbar().CustomToolbarItems(newList<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID ="#filter" }, new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID ="#sort " } }))  
.ClientSideEvents(eve => eve.ToolbarClick("click").Create("create"))  
  
        .Columns(col =>  
        {  
  
        })  
)  
 .. 
 
<script>  
      
    function click(args) {  
        if ($(args.target).text() == " Filter") {  
             
 var grid = $("#FlatGrid").ejGrid("instance");  
 
 
            grid.filterColumn(OrderID, "equal", value, "and"true); // OrderID as columnName 
 
        }  
        else {  
            …   
               gridObj.sortColumn("OrderID", "ascending"); // OrderID as columnName 
        }  
  
  
 }  
</script>  


Regards, 

Jayaprakash K. 


indrani Gajjarapu
Replied On November 1, 2016 03:34 PM UTC

Hi,

Thanks for your reply.

I understand its a strange requirement. But, I don't want it to be predefined filter by using filterColumn method.

I want the same excel filter type dropdown to be shown in the toolbar with an additional field in  it to select columns to be filtered.

As i have many columns in my table, the filter icon in each column effecting the look of the grid..

Can  you please help me to get the same filter functionality in the toolbar for the user end.

Jayaprakash Kamaraj [Syncfusion]
Replied On November 2, 2016 01:38 PM UTC

  
Hi Indrani, 
A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates.  
 
Regards, 

Jayaprakash K.
 


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.

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

;