Javascript not work on Virtualization

Radzen.Blazor Components
1

Hi I have used javascript in my radzen datagrid where when i hover over my text inside the datagrid column i was showing copy clipboard button using javascript.. this is working perfectly when i add pagination to datagrid . But when i used virtulization property of datagrid and removed my pagination then when i hover over text inside the column the copy clipboard button is not visible . Indirectly my javascript stop working while hovering.

2

Hi @Yogi,

Please check our forum FAQ for tips how to improve your question.

3

Hi @korchev , thanks for the reply . Let me explain you my question Currently we are using radzen datagrid . Where we need to add copy clipboard functionality when user mousehover over column text we need to show copy clipboard button when user mouseout we need to hide that button. This copy clipboard functionality i have achieved using javascript moueover and mouseout event listener. Currenltly we have added pagination to the grid with page size of 25 . since we have huge records. Now we have to remove the pagination and add the virtulization so that user can scroll over all the records. But with virtulization my javascript mouseover and mouseout event stoped working. Do we have solution for this.

4

Hi @Yogi,

I am afraid with this little info provided I can't help. Probably somebody else from the community can.

5

Hi Team, Let me add few more context Below is my code where I have added mouseover and mouseout event on div . When user mouseover the value inside the column it remove action-button css and add the show-button CSS on mouseout i am doing the reverse. This working fine when i added AllowPaging="true" and removed the virtulization. But when i added the virtulization as true and AllowPaging="false" then my mouseover and mouseout event is slowing down and not working as expected .

 <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowVirtualization="true"
                 Data="@Data">
     <Columns>
         @foreach (var column in Columns)
         {
             
                 <RadzenDataGridColumn @key=@column.Key Title="@column.Key" Width="@column.Value.Width" Frozen="@column.Value.Frozen"
                                       Filterable="@column.Value.Filterable" Property="@column.Key">
                     <Template Context="data">
					        var Id = Guid.NewGuid().ToString();
							<div class="copy-clipboard" @onmouseover="() => ShowButton(Id)" @onmouseout="() => HideButton(Id)">
                                 <RadzenButton class="action-button" id=@Id Click=@(args => CopyToClipboard(@val.Value)) Icon="content_copy" Size="ButtonSize.ExtraSmall" ButtonStyle="ButtonStyle.Secondary" />
                                 <span>@data[column.Key]</span>
                             </div>
					 </Template>
                 </RadzenDataGridColumn>
         }
     </Columns>
 </RadzenDataGrid>
6

The id is probably not the one you expect when virtualization is enabled. Check it with your developer tools. I suggest using a method that generates predictable ID from the data which doesn't change for the same item.

var id = data.Id; // or something similar

You can also just use CSS to hide and show the button:

.action-button {
  display: none;
}

.copy-clipboard:hover .action-button {
    display: inline-block;
}
7

Thanks @korchev for your reply.

8

Hi @korchev with css hover my button show/hide issue resolved. Now I want to show button at the end of the column . Do RadzenDatagridColumn have any built in property to achieve this.

9

It doesn't but you can use RadzenStack in it and align it however you want it.