Cell Selection Ripple Effect

[Omar]

I was trying to use a listbox with clientdatasource. But since the listbox cannot be rebinded yet, I decided to switch either grid or listview.

I was having some trouble selecting an item from listview so I'm using a grid with clientitemtemplate to fit by data into a single column.

What I want is to apply the ripple effect available when selecting an item in listbox to the grid,

so when I select a cell from the column it will have the ripple effect. 

if you can please provide me with a solution.

[Angel Petrov]

Hi,

Indeed you can attach ripple effect to the cells. In order to achieve this you can use the MaterialRippleManager and initialize a ripple zone. A possible realization of the targeted scenario is provided in the following code snippet.

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <script>
        function gridCreated(sender) {
            Telerik.Web.UI.MaterialRippleManager.getInstance().initializeRippleZone({
                element: sender.get_masterTableView().get_element(),
                rippleConfigurations: [
                    {
                        containerSelector: ".rgRow > td, .rgAltRow > td"
                    }
                ]
            });
        }
    </script>
    <telerik:RadGrid ID="RadGrid1" Width="97%" AllowPaging="True" Skin="Material"
        OnNeedDataSource="RadGrid1_NeedDataSource" RenderMode="Lightweight" PageSize="15" runat="server"
        AllowSorting="true" GridLines="None" >
        <MasterTableView Width="100%">
        </MasterTableView>
        <ClientSettings>
            <Selecting CellSelectionMode="SingleCell" />
            <ClientEvents OnGridCreated="gridCreated" />
        </ClientSettings>
    </telerik:RadGrid>
</form>

Regards,
Angel Petrov
Telerik by Progress

[Omar]

I tested your code snippet and it work. Thank you