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. Image for the cookie policy date

Customize Tooltip for headerText

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


5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



IG indrani Gajjarapu 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.


JK Jayaprakash Kamaraj Syncfusion Team 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. 



IG indrani Gajjarapu 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.


JK Jayaprakash Kamaraj Syncfusion Team 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.
 


Loader.
Live Chat Icon For mobile
Up arrow icon