Customize Tooltip for headerText

[indrani Gajjarapu]

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]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/127145/ze/MvcApplication662010543654 

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. 

Link: https://help.syncfusion.com/js/grid/cell#clipmode 

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

Regards, 

Thavasianand S. 

[indrani Gajjarapu]

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]

 

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, 

 

filterColumn method : https://help.syncfusion.com/api/js/ejgrid#methods:filtercolumn 

sortColumn method : https://help.syncfusion.com/api/js/ejgrid#methods:sortcolumn 

CustomToolbarItem :  https://help.syncfusion.com/aspnetmvc/grid/toolbar#custom-toolbar-items 

ToolbarClick : https://help.syncfusion.com/api/js/ejgrid#events:toolbarclick 

<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]

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]

  

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.  

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 

Jayaprakash K.