Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Akshay Shanbhag
45
How to display Tooltip on template data field in web datat grid.
posted


following is my template data field column.
I am using the code for displaying tooltip in web data grid as follows:

  

// For showing the tooltip in the grid.

       

function initGrid(grid, args) {

           

var rows = grid.get_rows();

           

var rowCount = rows.get_length();

           

var cellCount = rowCount > 0 ? rows.get_row(0).get_cellCount() : 0;

           

for (var r = 0; r < rowCount; ++r) {

               

var row = rows.get_row(r);

               

for (var c = 0; c < cellCount; ++c) {

                   

var cell = row.get_cell(c);

                   

var cellEl = row.get_cell(c).get_element();

                    cellEl.title = cell.get_text();

                }

            }

        }


 

But I get link button control's client id on the tooltip in the template data field. However it is working fine for normal columns.

<ig:TemplateDataField Header-Text="<%$ resources:screenlabel="" message_title="">"                                                       

Key="MESSAGE_TITLE" Width="150px">                                                            

<ItemTemplate>                                                              

<als:LinkButton runat="server" ID="lbtnSubject" Text='<%# eval="" message_title="">'                                                

OnClick="lbtnSubject_Click" />                                                             

ItemTemplate>                                              

ig:TemplateDataField>

 

 

I want to display item template text in tooltip.
Thanks

-Akshay

  • 290
    Suggested Answer
    posted

    Hello Akshay,

    Thank you for contacting Infragistics. I took a look at your question and modified the function initGrid() to match your requirements as follows: 

     

    function initGrid(grid, eventArgs){
            var rows = grid.get_rows();
            var rowCount = rows.get_length();
            var cellCount = rowCount > 0 ? rows.get_row(0).get_cellCount() : 0;
            for (var r = 0; r < rowCount; ++r) {
                var row = rows.get_row(r);
                for (var c = 0; c < cellCount; ++c) {
                    var cell = row.get_cell(c);
                    var cellEl = row.get_cell(c).get_element();
                    var cellText = cell.get_text();
                    cellEl.title = ($(cellText).length == 0) ? cellText : $(cellText).text();
                   
                }
            }
    }

     

    To help reduce the time and complexity, I referenced jquery library. To access jquery, please add the following line in your code in your markup. 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

     

    Please feel free to reach out to me if this does not answer your question or if anything is unclear.