With the latest release of Firefox version 59.0, we are not able to click on tiles in a tilelist and have them navigate to the specified NavigateURL. We verified this even on the demo on the Telerik site: https://demos.telerik.com/aspnet-ajax/tilelist/examples/overview/defaultcs.aspx Workaround <telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" ScrollingMode="None" Width="640px" SelectionMode="Single" EnableDragAndDrop="true"></telerik:RadTileList> <script> var $T = Telerik.Web.UI; $T.RadTileList.prototype._handleClickAfterDragging = function (draggable, args) { var tile = draggable.tile, shouldHandleClick = this.get_enableDragAndDrop() && !this._isTouchEvent(args._domEvent) && draggable._deltaX < 5 && draggable._deltaY < 5; if (shouldHandleClick) { tile.set_dragStarted(false); if (!$telerik.isMobileSafari) { tile._mouseClickHandler(); } draggable._deltaY = 0; draggable._deltaX = 0; } } </script>
Here is a set of rules to get back the colors div.RadTile_Bootstrap { color: #fff; background-color: #337ab7; } div.RadTile_BlackMetroTouch, div.RadTile_Metro { color: #fff; background-color: #25a0da; } div.RadTile_Office2010Blue { color: #333; background-color: #dbe3ee; } div.RadTile_Office2010Black { color: #fff; background-color: #6f6f6f; } div.RadTile_Office2010Silver { color: #333; background-color: #e2e5e9; } div.RadTile_Outlook { color: #333; background-color: #d6e6f4; } div.RadTile_Silk { color: #fff; background-color: #14afca; } div.RadTile_Simple { color: #333; background-color: #ececec; } div.RadTile_Sunset { color: #333; background-color: #e88d49; } div.RadTile_Telerik { color: #333; background-color: #eee; } div.RadTile_Vista { color: #333; background-color: #eff7fc; } div.RadTile_Web20 { color: #333; background-color: #e7f1ff; } div.RadTile_WebBlue { color: #333; background-color: #5d9fb7; } div.RadTile_Windows7 { color: #1e395b; background-color: #b8cbde; }
The Click event is not raised at all.
Possible workarounds: - switch to the Classic RenderMode of the TileList: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/mobile-support/render-modes - disable DragAndDrop: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/functionality/drag-and-drop
When items are data bound, their IDs should be stored in the ViewState so the next time they are recreated (upon a postback), they have the same IDs, so postback events can be raised. Also, when a new datasource is provided to the tilelist, keeping track of the IDs will let the control create tiles with the same IDs that were used instead of incremental ones. Both of these will prevent the tiles ID change in the first two page loads after a DataBind() call. Note that this applies only for the case when AppendDataBoundItems is false; when it is true new datasources should only add items. A workaround is to set IDs to the tiles manually when they are created (this can be done with a simple counter variable). To accommodate for rebinding the tilelist, its controls collection must be cleared prior to databinding as a workaround. A sample is attached that shows these in action.
If a target field is not provided in the data source and you need all tiles to have the same Target, you can use the TileCreated event to set this property. A sample is attached.
This issue manifests only when there is a single column of tiles, i.e., there are no more groups and no second column of tiles exists in the group. If the tile number can be expected, you can change the Height/TileRows property to create two columns. Or, split the tiles between two groups. Of course, setting EnableDragAndDrop to false will also eliminate the issue.
In some cases, according to a condition, after the data from a request arrives, the developer may want to prevent further requests from this same tile. This should be possible by setting the update interval to 0. In the meantime, you can add dynamically (and remove when needed) a handler for the OnClientDataLoading event that will cancel the event and thus - the request. For example: <telerik:RadLiveTile ID="MyLivetile" UpdateInterval="1000" OnClientTemplateDataBound="MyLivetile_OnClientTemplateDataBound" runat="server"> <WebServiceSettings Path="Default.aspx" Method="MyPagemethod" UseHttpGet="false" /> <ClientTemplate> some template that uses the data </ClientTemplate> </telerik:RadLiveTile> <script type="text/javascript"> function MyLivetile_OnClientTemplateDataBound(sender, args) { var completed = args.get_dataItem().Completion; if (completed) { sender.add_dataLoading(preventLiveTileRequests); } } function preventLiveTileRequests(sender, args) { args.set_cancel(true); } </script>
At present, all events are fired when a tile is clicked, because dragging starts immediately.
This is a visible title for each group (separate from the Group.Name property), like in the Windows 8.1 Start.
A possible workaround is to cancel the OnClientClicking and OnClientSelecting events of the tile. Additionally, add a custom CSS class that will also enable you to apply some custom styling to disabled tiles, because most browsers do not have a disabled state for div elements. The CSS class is what is used to distinguish disabled tiles instead of the disabled attribute. NOTE: this will be fixed in the Q1 2014 SP1 release. Here is a workaround example for RadTileList: <script type="text/javascript"> function preventDisabledTileClicks(tileList, args) { var tile = args.get_tile(); if ($telerik.$(tile.get_element()).hasClass("disabledTile")) { args.set_cancel(true); } } </script> <telerik:RadTileList ID="RadTileList1" runat="server" SelectionMode="Multiple" OnClientTileSelecting="preventDisabledTileClicks" OnClientTileClicking="preventDisabledTileClicks"> <Groups> <telerik:TileGroup> <telerik:RadTextTile runat="server" ID="S5_1" Text="5S"> </telerik:RadTextTile> <telerik:RadTextTile runat="server" ID="OEE_2" Text="OEE" CssClass="disabledTile" Enabled="false"> </telerik:RadTextTile> <telerik:RadTextTile runat="server" ID="SMED_3" Text="SMED" CssClass="disabledTile" Enabled="false"> </telerik:RadTextTile> <telerik:RadTextTile runat="server" ID="VSM_4" Text="VSM" CssClass="disabledTile" Enabled="false"> </telerik:RadTextTile> <telerik:RadTextTile runat="server" ID="RCM_5" Text="RCM" CssClass="disabledTile" Enabled="false"> </telerik:RadTextTile> <telerik:RadTextTile runat="server" ID="TPM_6" Text="TPM" CssClass="disabledTile" Enabled="false"> </telerik:RadTextTile> </telerik:TileGroup> </Groups> </telerik:RadTileList> If you are using Standalone tiles you can attach to their OnClientSelecting and OnClientClicking events. Instead of getting the tile from the event arguments, you will get it as the first argument the handler receives. To make this more reusable, you can use ASP Themes to apply this on an application level and include the script in a common script on a master page.
With more than 9 columns (36 wide tiles or 72 square tiles with TileRows=4) the subsequent tile columns fall down on a second row. With TileRows=2 the breaking point would be 19 wide or 37 square tiles. Ways around this are: - separating tiles into more groups, if possible. When databinding the DataGroupNameField is used to point to the desired group name as a field in the datasource - when creating tiles programmatically you can count them and create new groups when needed - if you do not need any special functionality provided by RadTileList you can consider creating standalone tiles
A possible workaround is to override the CSS for tiles that need no selection abilities: <telerik:RadContentTemplateTile runat="server" ID="RadContentTemplateTile1" EnableSelection="false" CssClass="noSelection"> </telerik:RadContentTemplateTile> .noSelection div.rtileSelectedIcon { display: none; } div.RadTile.rtileSelected.noSelection { border: 2px solid transparent; }
The same number of tiles that are hidden from the given group are lost from its end upon postback.