Tooltips for buttons in Grid column

[Pieter Bart van Straalen]

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]

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> 

Sample: http://www.syncfusion.com/downloads/support/forum/129396/ze/Sample1421032122947686 

Refer to the Help document for the dataBound event. 

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

Regards, 

Prasanna Kumar N.S.V