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

Master/Detail TileList events not fired

1 Answer 106 Views

TileList

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

Wilhelm asked on 01 Apr 2014, 09:49 AM

ctrl_id_before_postback.png

ctrl_id_after_postback.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

1 Answer, 1 is accepted

answered on 03 Apr 2014, 12:05 PM

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.

<html xmlns="http://www.w3.org/1999/xhtml">

<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.