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.
Unfortunately, activation email could not send to your email. Please try again.

Tooltips for buttons in Grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 11:24 AM

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.

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.

;