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

Tooltips for buttons in Grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

129396 Mar 15,2017 08:54 PM UTC Mar 16,2017 03:24 PM UTC ASP.NET MVC 1
loading
Tags: Grid
Pieter Bart van Straalen
Asked On March 15, 2017 08:54 PM UTC

Hi,

I have a MVC grid and the last column of the grid I have three buttons. To get the buttons in the grid column I use the code below: 

col.Width(100).Commands(command=>{
                        command
                        .Type("btn1")
                        .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                        {
                            Click = "onClick" ,
                            PrefixIcon = "e-icon e-handup",
                            ContentType = ContentType.ImageOnly,
                            Size = ButtonSize.Mini,
                        }).Add();
                        command
                        .Type("btn2")
                        .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                        {
                            Click = "onClick",
                            PrefixIcon = "e-icon e-handup",
                            ContentType = ContentType.ImageOnly,
                            Size = ButtonSize.Mini
                        }).Add();
                        command
                        .Type("btn3")
                        .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                        {
                            Click = "onClick" ,
                            PrefixIcon = "e-icon e-handup",
                            ContentType = ContentType.ImageOnly,
                            Size = ButtonSize.Mini
                        }).Add();
                    }).Add();


How do a add a tooltip text to the buttons? When I have a button on the main page I can add a tooltip using the following code:

<div id="ControlRegion">

@Html.EJ().Button("button").Size(ButtonSize.Small).ContentType(ContentType.ImageOnly).PrefixIcon("e-icon e-handup")

</div>

<script>

   $("#button").ejTooltip({ content: "Toltip text" });

</script>


This approach does not seem to work for the buttons in the Grid. I tried (using the debugger) to get the html id of the buttons and then use as show above, but that also does not work.

How should I approach this problem? Any help and ideas are welcome!


Regards,

  Pieter



Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 16, 2017 03:24 PM UTC

Hi Pieter, 

Thanks for contacting Syncfusion support. 

To add the tooltip text to the buttons, use dataBound event of ejGrid. This event will be triggered when the grid is bound with data during initial rendering. In this event we will find the button and add the tooltip for all the buttons. 

Find the code example and sample:  


@(Html.EJ().Grid<EmployeeView>("MasterGrid") 
     ----------------------- 
     .Columns(col => 
     { 
       col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add(); 
       col.Field("FirstName").HeaderText("First Name").Width(100).Add(); 
       col.Width(100).Commands(command => 
       { 
           command 
           .Type("btn1") 
           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 
           { 
               Click = "onClick", 
               PrefixIcon = "e-icon e-handup", 
               ContentType = ContentType.ImageOnly, 
               Size = ButtonSize.Mini, 
           }).Add(); 
           command 
           .Type("btn2") 
           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 
           { 
               Click = "onClick", 
               PrefixIcon = "e-icon e-handup", 
               ContentType = ContentType.ImageOnly, 
               Size = ButtonSize.Mini 
           }).Add(); 
           command 
           .Type("btn3") 
           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 
           { 
               Click = "onClick", 
               PrefixIcon = "e-icon e-handup", 
               ContentType = ContentType.ImageOnly, 
               Size = ButtonSize.Mini 
           }).Add(); 
       }).Add(); 
      }) 
        .ClientSideEvents(eve => { eve.DataBound("dataBound"); }) 
) 
 
 
<script type="text/javascript"> 
    function dataBound(args) { 
        this.element.find(".e-button").ejTooltip({ content: "Toltip text" }); 
    } 
</script> 


Refer to the Help document for the dataBound event. 


Regards, 
Prasanna Kumar N.S.V 


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

or the page will be automatically redirected to 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

;