add multiple cick events to radContenttemplateTile

[Kevin]

Trying to add a click event on the peek template of a radtemplate tile as well as a click event to the tile itself.  If they click the tile I want it to go to the application that its is attacded to, this works and no problems.  We are trying to put a favorites linkbutton in a peek template so that they users can add the tile to there favorites which when they click it I just want the link button to have a commandname and commandargurment that save the id of the tile into a database of favorites for that user.  Can this be accomplished ???

<div>
       <telerik:RadTileList runat="server" ID="RadTileList1"></telerik:RadTileList>
   </div>

protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               PopulateTileList(0);
               PopulateRadMenu();

           }
       }

       protected void PopulateTileList(int tileId)
       {
           string sqlWhere = string.Empty;
           if (tileId == 0)
           {
               sqlWhere = string.Empty;
           }
           else
           {
               sqlWhere = " where intDirectoriteId = " + tileId;
           }


           sql = "select intAppId, strAppName, strTooltip, strUrl, strNotes, s.strColor from tblApplications a INNER JOIN tblStatus s on s.intStatusID = a.intStatusID " + sqlWhere;

           mydatatable = new DataTable();
           mydatatable = c.GetReader(sql);

           TileGroup tg = new TileGroup();
           RadTileList1.Groups.Add(tg);

           foreach (DataRow row in mydatatable.Rows)
           {
               RadContentTemplateTile tile = new RadContentTemplateTile();
               tg.Tiles.Add(tile);
               LinkButton linkfav = new LinkButton();
               linkfav.Attributes.Add("runat", "server");
               linkfav.Click += new EventHandler(linkfav_Click);
               linkfav.Text = "favorites";
               linkfav.Attributes.Add("CommandName", "AddFavorites");
               linkfav.Attributes.Add("CommandArgument", row[0].ToString());

               tile.ID = row[0].ToString();
               tile.Name = row[1].ToString();
               tile.ContentContainer.GroupingText = row[1].ToString();
               tile.ToolTip = row[2].ToString();
              // tile.NavigateUrl = row[3].ToString();
               tile.BackColor = System.Drawing.ColorTranslator.FromHtml(row[5].ToString());
               //Peektemplate
               tile.PeekTemplateSettings.Animation = PeekTemplateAnimation.Slide;
               tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
               tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
               tile.PeekContentContainer.Controls.Add(new LiteralControl(row[4].ToString()));
               tile.PeekContentContainer.Controls.Add(linkfav);
               tile.PeekTemplateSettings.CloseDelay = 0;
               tile.PeekTemplateSettings.ShowInterval = 0;

           }

       }

       private void PopulateRadMenu()
       {
           sql = "select intDirectoriteID, strDirectorite from tblDirectorite where bitActive = 1";

           rdmenu.DataTextField = "strDirectorite";
           rdmenu.DataValueField = "intDirectoriteID";
           rdmenu.CssClass = "Menuitems";
           rdmenu.DataSource = c.GetReader(sql);
           rdmenu.DataBind();
       }

       protected void rdmenu_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
       {
           switch (e.Item.Value)
           {
               case "1":
                   PopulateTileList(1);
                   break;
               case "2":
                   PopulateTileList(2);
                   break;
               case "3":
                   PopulateTileList(3);
                   break;
               case "4":
                   PopulateTileList(4);
                   break;
               case "5":
                   PopulateTileList(5);
                   break;
               case "6":
                   PopulateTileList(6);
                   break;
               case "7":
                   PopulateTileList(7);
                   break;
           }
       }

       protected void linkfav_Click(object sender, EventArgs e)
       {
               Response.Write("Try this LinkButton!");

       }
   }

[Marin Bratanov]

Hello Kevin,

Could you explain what the problem is in more detail? On my end, using the NavigateUrl for the tile and adding a Click event for a link button in its PeekTemplate seem to work perfectly fine:

<telerik:RadContentTemplateTile runat="server" ID="testTile" NavigateUrl="some-page.aspx">
    <ContentTemplate>
        <div style="width: 150px; height: 150px; background: green;">
        main content
        </div>
    </ContentTemplate>
    <PeekTemplate>
        <div style=" width: 150px; height: 150px; background: yellow;">
            <asp:LinkButton ID="Linkbutton1" Text="test me" OnClick="Linkbutton1_Click" runat="server" />
        </div>
    </PeekTemplate>
    <PeekTemplateSettings ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
</telerik:RadContentTemplateTile>

protected void Linkbutton1_Click(object sender, EventArgs e)
{
    Response.Write((sender as LinkButton).ID);
}

and I am also attaching here a short video that shows this in action.

and this works fine for a programmatically created tile as well:

<telerik:RadTileList runat="server" ID="RadTileList1">
</telerik:RadTileList>

protected void Page_Init(object sender, EventArgs e)
{
    RadContentTemplateTile tile = new RadContentTemplateTile();
    tile.ID = "testTile";
    tile.NavigateUrl = "some-page.aspx";
    TileGroup tg = new TileGroup();
    RadTileList1.Groups.Add(tg);
    tg.Tiles.Add(tile);
    LinkButton btn = new LinkButton();
    btn.ID = "someButton";
    btn.Text = "test button";
    btn.Click += btn_Click;
    tile.PeekContentContainer.Controls.Add(btn);
    tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
    tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
}

void btn_Click(object sender, EventArgs e)
{
    Response.Write((sender as LinkButton).ID);
}

and I am attaching a second video that illustrate this as a reference.

I suggest testing out my sample and comparing it with your setup to see what are the differences that cause the issue.

In case you have drag and drop enabled, I would also advise examining this KB article on handling the needed client-side events: http://www.telerik.com/support/kb/aspnet-ajax/tilelist/details/drag-and-drop-with-contenttemplatetile-input-elements.


Regards,

Marin Bratanov
Telerik

 

 

[Kevin]

Hi Marin,
Thank for the response.  The issue we are having is that when a url is set for the tile from the database its uses that as the URL no matter if we assign a different one to the linkbutton in the peek template.  If we dont assign a url to tile url it works just fine and goes where we want it too.  Only problem is that all the tiles will have a URL for them to go somewhere so our peektemplate linkbutton always goes to that place as well.  her eis the code attached below, we change to how you are doing it but 2 issues.  One our tiles double load on page and create and error when we pick on the rad menu and the peektemplate linkbutton goes to same location as the tile url.

<form id="form1" runat="server">
       <telerik:RadScriptManager runat="server" ID="scriptManager1"></telerik:RadScriptManager>
       <h2><strong>Applications List</strong></h2>
       <div class="divRight">
           <telerik:RadMenu ID="rdmenu" runat="server" Flow="Vertical" OnItemClick="rdmenu_ItemClick"></telerik:RadMenu>
       </div>
       <div style="margin-left:310px">
           <telerik:RadTileList runat="server" ID="RadTileList1"></telerik:RadTileList>
       </div>
   </form>

protected void Page_Init(object sender, EventArgs e)
       {

           PopulateTileList(0);
           PopulateRadMenu();
       }

       protected void Page_Load(object sender, EventArgs e)
       {

           //if (!IsPostBack)
           //{
           //    PopulateTileList(0);
           //    PopulateRadMenu();
           //}

       }

       protected void PopulateTileList(int tileId)
       {
           string sqlWhere = string.Empty;
           if (tileId == 0)
           {
               sqlWhere = string.Empty;
           }
           else
           {
               sqlWhere = " where intDirectoriteId = " + tileId;
           }

           sql = "select intAppId, strAppName, strTooltip, strUrl, strNotes, s.strColor from tblApplications a INNER JOIN tblStatus s on s.intStatusID = a.intStatusID " + sqlWhere;

           mydatatable = new DataTable();
           mydatatable = c.GetReader(sql);

           TileGroup tg = new TileGroup();
           RadTileList1.Groups.Add(tg);

           foreach (DataRow row in mydatatable.Rows)
           {
               RadContentTemplateTile tile = new RadContentTemplateTile();
               tg.Tiles.Add(tile);

               LinkButton linkfav = new LinkButton();
               linkfav.Text = "favorites";
               linkfav.Click += linkfav_Click;
               tile.PeekContentContainer.Controls.Add(linkfav);

               tile.ID = row[0].ToString();
               tile.Name = row[1].ToString();
               tile.ContentContainer.GroupingText = row[1].ToString();
               tile.ToolTip = row[2].ToString();
               tile.NavigateUrl = row[3].ToString();
               tile.BackColor = System.Drawing.ColorTranslator.FromHtml(row[5].ToString());
               //Peektemplate
               tile.PeekTemplateSettings.Animation = PeekTemplateAnimation.Slide;
               tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
               tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
               tile.PeekContentContainer.Controls.Add(new LiteralControl(row[4].ToString()));
               tile.PeekTemplateSettings.CloseDelay = 0;
               tile.PeekTemplateSettings.ShowInterval = 0;

           }

       }


       private void PopulateRadMenu()
       {
           sql = "select intDirectoriteID, strDirectorite from tblDirectorite where bitActive = 1";

           rdmenu.DataTextField = "strDirectorite";
           rdmenu.DataValueField = "intDirectoriteID";
           rdmenu.CssClass = "Menuitems";
           rdmenu.DataSource = c.GetReader(sql);
           rdmenu.DataBind();
       }

       protected void rdmenu_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
       {

               switch (e.Item.Value)
               {
                   case "1":
                       PopulateTileList(1);
                       break;
                   case "2":
                       PopulateTileList(2);
                       break;
                   case "3":
                       PopulateTileList(3);
                       break;
                   case "4":
                       PopulateTileList(4);
                       break;
                   case "5":
                       PopulateTileList(5);
                       break;
                   case "6":
                       PopulateTileList(6);
                       break;
                   case "7":
                       PopulateTileList(7);
                       break;
               }


       }

       protected void linkfav_Click(object sender, EventArgs e)
       {
           Response.Redirect("http://www.apple.com");
       }
   }

[Marin Bratanov]

Hello Kevin,

I am attaching here a sample page built on top of this code that seems to work fine for me, so if anyone else has the same issue, this could be helpful.

As for double loading of tiles, you can also try clearing the Tiles collection and the Controls collection of the TIleList before generating the new tiles.

Regards,

Marin Bratanov
Telerik