This is a migrated thread and some comments may be shown as answers.

Cell Selection Ripple Effect

2 Answers 15 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Omar
Top achievements
Rank 1
Omar asked on 10 Nov 2016, 06:12 AM

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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Angel Petrov
Telerik team
answered on 14 Nov 2016, 11:43 AM
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
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Omar
Top achievements
Rank 1
answered on 14 Nov 2016, 12:24 PM

I tested your code snippet and it work. Thank you

Tags
Grid
Asked by
Omar
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Omar
Top achievements
Rank 1
Share this question
or