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
30
How to set title of entire row in gridview
posted

i am trying to set the title of the entire row in grid view on mouse over, am not able to find any property to set entire row.

am trying like e.Row.Title="my tooltip" 

  • 80
    Offline posted

    Hello Rajasekaran,

    After investigating your requirement to incorporate tooltip functionality for each row within the WebDataGrid, I can suggest two viable approaches that could be implemented:

    Cell Tooltip Assignment: Tooltips could be assigned to each cell in every row of the grid. This approach ensures that regardless of where a user hovers within a row, a tooltip will be consistently displayed. WebDataGrid provides an event we can bind to OnInitializeRow. Then a server-side method could be created to apply the tooltip, Row {e.Row.Index+1}, across all cells in a row, thereby achieving a uniform tooltip for the entire row.

     

     

    protected void WebDataGrid1_InitializeRow(object sender, RowEventArgs e)
    
            {
    
                for (int i = 0; i < e.Row.Items.Count; i++)
    
                {
    
                    e.Row.Items[i].Tooltip = $"Row {e.Row.Index + 1}";
    
                }
    
     
    
            }

    Row Title Attribute via JavaScript: Post initialization of the grid, a JavaScript snippet could be utilized to dynamically assign the title attribute to each row. Upon hovering, this triggers the browser's native tooltip display mechanism.

     

    <body>
    
        <form id="form1" runat="server">
    
            <div>
    
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
                <ig:WebDataGrid ID="WebDataGrid1" OnInitializeRow="WebDataGrid1_InitializeRow"  runat="server" Height="350px" Width="400px">
    
                    
    
                </ig:WebDataGrid>
    
     
    
            </div>
    
        </form>
    
        <script type="text/javascript">
    
            document.addEventListener('DOMContentLoaded', function () {
    
                var rows = document.querySelectorAll('#<%= WebDataGrid1.ClientID %> tr');
    
     
    
                rows.forEach(function (row) {
    
                    // Set the title attribute for each row
    
                    row.setAttribute('title', 'some tooltip');
    
                });
    
            });
    
        </script>
    
       
    
    </body>

    Review the provided code snippets and if you have any questions let me know.

    Best Regards,

    Arkan Ahmedov,

    Infragistics