Cell Selection Ripple Effect

3 posts, 1 answers
  1. Omar
    Omar avatar
    13 posts
    Member since:
    Oct 2016

    Posted 10 Nov 2016 Link to this post

    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. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1090 posts

    Posted 14 Nov 2016 Link to this post

    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.
  3. Omar
    Omar avatar
    13 posts
    Member since:
    Oct 2016

    Posted 14 Nov 2016 in reply to Angel Petrov Link to this post

    I tested your code snippet and it work. Thank you

Back to Top