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

Tooltips for buttons in Grid column

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



1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team 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 


Loader.
Up arrow icon