Master/Detail TileList events not fired

2 posts, 0 answers
  1. Wilhelm
    Wilhelm avatar
    3 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2014 Link to this post

    Currently we would like to use the RadTileList in a Master/Detail situation. This means that dependent upon the selected tile in the master-tilelist, the detail-tilelist is rendered.

    This application scenario works rather well, but fails in the following situation:
    1. Open page
    -- Ensure nothing is selected and only master items are visible.

    2. Click/select a master item, e..g A
    -- Ensure that after postback "A" is selected and no detail item is selected.

    3. Click/select a detail item, e.g. 2
    -- Ensure that after postback "2" is selected

    4. Click/select another master item, e.g. B
    -- Ensure that after postback "B" is selected and no detail item is selected.

    5. Click/select a detail item, e.g. "4"
    -- Ensure that after postback "4" is selected <-- BUG, event of TileClick/Selectionchange is not firing and thus is the selection not persisted.

    To reproduce this, I've created a new Telerik Web Application (which I cannot currently attach?).

    This new web application contains the following implementation of Default.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadTileList runat="server" ID="tlMaster" AutoPostBack="true" DataSourceID="ldsMaster" SelectionMode="Single" OnTileClick="tlMaster_TileClick" OnSelectionChanged="tlMaster_SelectionChanged">
                <DataBindings>
                    <CommonTileBinding TileType="RadContentTemplateTile" Shape="Square" DataNameField="Name" />
                    <ContentTemplateTileBinding>
                        <ContentTemplate>
                            <%#DataBinder.Eval(Container.DataItem, "Description")%>
                        </ContentTemplate>
                    </ContentTemplateTileBinding>
                </DataBindings>
            </telerik:RadTileList>
            <asp:LinqDataSource runat="server" ID="ldsMaster" OnSelecting="ldsMaster_Selecting"></asp:LinqDataSource>
        </div>
        <div>
            <telerik:RadTileList runat="server" ID="tlDetail" AutoPostBack="true" DataSourceID="ldsDetail" SelectionMode="Single" OnTileClick="tlDetail_TileClick">
                <DataBindings>
                    <CommonTileBinding TileType="RadContentTemplateTile" Shape="Square" DataNameField="Name" />
                    <ContentTemplateTileBinding>
                        <ContentTemplate>
                            <%#DataBinder.Eval(Container.DataItem, "Description")%>
                        </ContentTemplate>
                    </ContentTemplateTileBinding>
                </DataBindings>
            </telerik:RadTileList>
            <asp:LinqDataSource runat="server" ID="ldsDetail" OnSelecting="ldsDetail_Selecting"></asp:LinqDataSource>
        </div>
        </form>
    </body>
    </html>

    And the following implementation of Default.aspx.cs:
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using System.Collections.Generic;
    using System.Linq;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            /* Test case to reproduce issue:
             * 1. Open default.aspx
             * 2. Click/select a master item, e.g. "A"
             * 3. Click/select a detail item, e.g. "2"
             * 4. Click/select another master item, e.g. "B"
             * -- Currently no detail item is selected. That's good.
             * 5. Click/select a detail item, e.g. "4"
             * BUG: Click/Select event is not fired and thus is the selection not persisted.
             */
     
            if (!Page.IsPostBack)
            {
                this.tlMaster.DataBind();
            }
        }
     
        protected void tlMaster_TileClick(object sender, TileListEventArgs e)
        {
            foreach (var tile in this.tlMaster.GetSelectedTiles())
            {
                tile.Selected = false;
            }
     
            e.Tile.Selected = true;
            this.tlDetail.DataBind();
        }
     
        protected void tlMaster_SelectionChanged(object sender, TileListDataEventArgs e)
        {
            this.tlDetail.DataBind();
        }
     
        protected void ldsMaster_Selecting(object sender, LinqDataSourceSelectEventArgs e)
        {
            e.Result = new List<MasterData>
            {
                new MasterData("A", "A"),
                new MasterData("B", "B"),
                new MasterData("C", "C")
            };
        }
     
        protected void tlDetail_TileClick(object sender, TileListEventArgs e)
        {
            foreach (var tile in this.tlDetail.GetSelectedTiles())
            {
                tile.Selected = false;
            }
     
            e.Tile.Selected = true;
        }
     
        protected void ldsDetail_Selecting(object sender, LinqDataSourceSelectEventArgs e)
        {
            var selectedTiles = this.tlMaster.GetSelectedTiles();
            if (selectedTiles.Any())
            {
                var data = new List<DetailData>
                {
                    new DetailData("A", "1", "1"),
                    new DetailData("A", "2", "2"),
                    new DetailData("A", "3", "3"),
                    new DetailData("A", "4", "4"),
                    new DetailData("A", "5", "5"),
                    new DetailData("B", "1", "1"),
                    new DetailData("B", "2", "2"),
                    new DetailData("B", "3", "3"),
                    new DetailData("B", "4", "4"),
                    new DetailData("B", "5", "5"),
                    new DetailData("C", "1", "1"),
                    new DetailData("C", "2", "2"),
                    new DetailData("C", "3", "3"),
                    new DetailData("C", "4", "4"),
                    new DetailData("C", "5", "5")
                };
     
                var selectedTile = selectedTiles.Single();
     
                e.Result = data
                    .Where(dd => dd.Master == selectedTile.Name);
            }
            else
            {
                e.Result = Enumerable.Empty<DetailData>();
            }
        }
     
        private class MasterData
        {
            public string Name { get; private set; }
            public string Description { get; private set; }
     
            private MasterData() { }
            public MasterData(string name, string description)
            {
                this.Name = name;
                this.Description = description;
            }
        }
     
        private class DetailData
        {
            public string Master { get; private set; }
            public string Name { get; private set; }
            public string Description { get; private set; }
     
            private DetailData() { }
            public DetailData(string masterName, string name, string description)
            {
                this.Master = masterName;
                this.Name = name;
                this.Description = description;
            }
        }
    }

    I hope you are able to identify why the event is not triggered. One thing that I already noted is that the control id differs before and after the postback (view attached files ctrl_id_before_postback and ctrl_id_after_postback): This might have to do something with the issue.

  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 03 Apr 2014 Link to this post

    Hi Laurens,

    If you want to enable the tiles to be selected on left click, the best way is to do it on the client side. Check the following online help article: Selecting a Tile with Left Click

    In shout, you need to remove the OnTileClick handlers of both RadTileLists and add OnClientTileClicking client event handlers. The only thing, which is different from the help article is that you should call the postback method of the tiles after their selection is toggled. Here is how the page markup could look like.
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <script type="text/javascript">
                //Put your JavaScript code here.
            </script>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <div>
                <telerik:RadTileList runat="server" ID="tlMaster" AutoPostBack="true" DataSourceID="ldsMaster" SelectionMode="Single" OnSelectionChanged="tlMaster_SelectionChanged" OnClientTileClicking="toggleTileSelection">
                    <DataBindings>
                        <CommonTileBinding TileType="RadContentTemplateTile" Shape="Square" DataNameField="Name" />
                        <ContentTemplateTileBinding>
                            <ContentTemplate>
                                <%#DataBinder.Eval(Container.DataItem, "Description")%>
                            </ContentTemplate>
                        </ContentTemplateTileBinding>
                    </DataBindings>
                </telerik:RadTileList>
                <asp:LinqDataSource runat="server" ID="ldsMaster" OnSelecting="ldsMaster_Selecting"></asp:LinqDataSource>
            </div>
            <div>
                <telerik:RadTileList runat="server" ID="tlDetail" AutoPostBack="true" DataSourceID="ldsDetail" OnTileDataBound="tlDetail_TileDataBound" SelectionMode="Single" OnClientTileClicking="toggleTileSelection">
                    <DataBindings>
                        <CommonTileBinding TileType="RadContentTemplateTile" Shape="Square" DataNameField="Name" />
                        <ContentTemplateTileBinding>
                            <ContentTemplate>
                                <%#DataBinder.Eval(Container.DataItem, "Description")%>
                            </ContentTemplate>
                        </ContentTemplateTileBinding>
                    </DataBindings>
                </telerik:RadTileList>
                <asp:LinqDataSource runat="server" ID="ldsDetail" OnSelecting="ldsDetail_Selecting"></asp:LinqDataSource>
            </div>
        </form>
        <script>
            function toggleTileSelection(sender, args) {
                args.set_cancel(true);
                var tile = args.get_tile();
                tile.toggleSelection();
                tile.postback();
            }
        </script>
    </body>
    </html>


    Regards,
    Stanimir
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top