Hi,
I'm using RadTileList and creating the tiles dynamically based on user inputs. If user clicks on add, we will capture the data and create a tile and will Render in the UI. User can delete a tile, create a new tile with some inputs. We require Drag and Drop functionality and need to store the position of each tile. I'm using the below method to capture the position. ProjectAssetsTileList.GetAllTiles() is giving always "0" on page load. Please suggest a way to persist the TileList Tiles and Order.
protected List<DomainDAL.ProjectAsset> CaptureAssetPosition(List<DomainDAL.ProjectAsset> workingProjectAssets) { if (ProjectAssetsTileList.GetAllTiles().Count > 0) { foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted)) { int position = ProjectAssetsTileList.GetAllTiles().FindIndex(x => x.Name == asset.AssetId.ToString()); asset.SequenceNumber = position; } } List<DomainDAL.ProjectAsset> sorted = workingProjectAssets.OrderBy(x => x.SequenceNumber).ToList(); return sorted; }
4 Answers, 1 is accepted
Hi Phani,
Ensure that the tiles are created in the Page_Init event always: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/server-side-programming/programmatic-creation.
Regards,
Telerik
Rank 1
Thanks for your reply Marin.
Can you please guide me on the below issue.
In Page_Init, I'm creating the TileList by looping through a Collection. When user changes the order, the sequence details have to be updated into the source collection. I tried the below code to accomplish the functionality. Page_Init is getting fired and I'm loosing the order I've arranged. Can you please provide your inputs. What exactly I need do in my scenario.
<telerik:RadTileList runat="server" AutoPostBack="false" ID="ProjectAssetsTileList" EnableViewState="true" Width="97%" EnableDragAndDrop="true" OnTileDataBound="ProjectAssetsTileList_TileDataBound" OnClientTileDropped="SaveTileOrder" SelectionMode="None"> </telerik:RadTileList> <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function SaveTileOrder(sender,args) { var ajaxManager = $find("<%= RadAjaxManagerforPlayer.ClientID %>"); ajaxManager.ajaxRequest("SaveTileOrder"); }</script>
In Code Behind:
protected void RadAjaxManagerforPlayer_AjaxRequest(object sender, AjaxRequestEventArgs e) { string[] arguments = e.Argument.Split(','); if (arguments[0]=="SaveTileOrder") { ReArrangeAssetPosition(); } }protected void ReArrangeAssetPosition() { if (Session["ProjectAssets"] != null) { workingProjectAssets = (List<DomainDAL.ProjectAsset>)Session["ProjectAssets"]; if (ProjectAssetsTileList.GetAllTiles().Count > 0) { foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted)) { int position = ProjectAssetsTileList.GetAllTiles().FindIndex(x => x.Name == asset.AssetId.ToString()); asset.SequenceNumber = position; } } List<DomainDAL.ProjectAsset> sorted = workingProjectAssets.OrderBy(x => x.SequenceNumber).ToList(); Session["ProjectAssets"] = sorted; } }protected void Page_Init(object sender,EventArgs e) { bool isAjaxReqest = IsAjaxRequest(this.Request); if (!isAjaxReqest) { if (Session["ProjectAssets"] != null && Session["PrjID"] != null && Request.QueryString["Id"].ToString() == Session["PrjID"].ToString()) { workingProjectAssets = (List<DomainDAL.ProjectAsset>)Session["ProjectAssets"]; SetImageGalleryDataSource(workingProjectAssets); } else { if ((Request.QueryString["Id"] != null && Request.QueryString["Id"].ToString() != "")) { workingProjectAssets = DomainDAL.GetAllProjectAssets(Project.ProjectID); Session["ProjectAssets"] = workingProjectAssets; Session["PrjID"] = Project.ProjectID; SetImageGalleryDataSource(workingProjectAssets); } } lblProjectTitle.Text = Project.Title.Length > 25 ? Project.Title.Substring(0, 25) + "..." : Project.Title; lblProjectTitle.ToolTip = Project.Title; BindDataToTileList(workingProjectAssets); if (linkSaveAssets.InnerText == "Saved") linkSaveAssets.Disabled = true; if (!IsPostBack) { SetProjectInfo(); if ((Request.QueryString["Id"] != null && Request.QueryString["Id"].ToString() != "")) { workingProjectAssets = DomainDAL.GetAllProjectAssets(Project.ProjectID); Session["ProjectAssets"] = workingProjectAssets; Session["PrjID"] = Project.ProjectID; SetImageGalleryDataSource(workingProjectAssets); } // Session["update"] = Server.UrlEncode(System.DateTime.Now.ToString()); } } }
Rank 1
We have TileList Creation Logic in BindDataToTileList(workingProjectAssets); method.
protected void BindDataToTileList(List<DomainDAL.ProjectAsset> workingProjectAssets) { TileGroup group = new TileGroup(); foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted)) { RadContentTemplateTile contTile = new RadContentTemplateTile(); contTile.ContentTemplate = new ContentTemplate(asset); contTile.CssClass = "card"; contTile.Name = asset.AssetId.ToString(); contTile.OnClientClicked = "OnClientTileClicking"; contTile.Attributes.Add("assetid", asset.AssetId.ToString()); if (asset.ContentType == Constants.ContentType.Image) { contTile.Attributes.Add("type", "image"); contTile.Attributes.Add("img_Url", String.Format("{0}/{1}/{2}", BLOB_ROOT_URL, asset.Container, asset.ImageUrl)); contTile.Attributes.Add("img_caption", asset.Caption); contTile.Attributes.Add("asset_spotlight", Convert.ToString(asset.Spotlight)); if (asset.Spotlight) contTile.CssClass = contTile.CssClass + " spotlightcard"; else contTile.CssClass = contTile.CssClass + " nospotlightcard"; } else if (asset.ContentType == Constants.ContentType.Video) { contTile.Attributes.Add("type", "video"); contTile.Attributes.Add("video_Url", String.Format("{0}/{1}/{2}", BLOB_ROOT_URL, asset.Container, asset.ImageUrl)); contTile.CssClass = contTile.CssClass + " nospotlightcard"; }else { contTile.Attributes.Add("type", "text"); contTile.Attributes.Add("asset_title", asset.AssetName); contTile.Attributes.Add("asset_subtitle", asset.Caption); contTile.Attributes.Add("asset_spotlight", Convert.ToString(asset.Spotlight)); if (asset.Spotlight) contTile.CssClass = contTile.CssClass + " spotlightcard"; else contTile.CssClass = contTile.CssClass + " nospotlightcard"; } group.Tiles.Add(contTile); } if (ProjectAssetsTileList.Groups.Count > 0) ProjectAssetsTileList.Groups.RemoveAt(0); ProjectAssetsTileList.Groups.Add(group); Session["CustomPersistenceSettingsKey"] = this.Session.SessionID; string fileId = Session["CustomPersistenceSettingsKey"].ToString(); PersistRadTileList.StorageProviderKey = fileId; PersistRadTileList.SaveState(); }Hello Phani,
Can you confirm that the data from the data source is always in the same order because this is important? Once the TileList controls has its tiles (i.e., you have created them in Page_Init in the same sequence with the same data), it will maintain their order, so you do not usually need to change the underlying data source. You can easily confirm this with the code from the article I sent.
I see the RadPersistenceManager being used only to store indexes on the Page_Init event, while it is better to do that later, e.g., in Page_Load. Since I do not see code related to loading the tiles order, you may not need it at all. If used, you could try removing the custom logic that reorders the data source, and leave storing the tiles order to the PersistenceManager and the TileList. Note that the persistence key should be customized according to your users, because the session ID may not be the same for the same user in different occasions.
If neither helps, could you try adding IDs to the tiles and ensure those IDs will not change?
Regards,
Marin BratanovTelerik