PROJECT DESCRIPTION
When using RenderMode Mobile, RadGrid was designed to only render the following buttons in its CommandItem: Add New Records, Save/Cancel (when EditMode="Batch"), finally the buttons for all export types. The aim is to reduce the number of controls for mobile devices. Nevertheless, it is possible to customize the CommandItem and add more buttons to it as necessary.
SOLUTION
To achieve the described behavior, set the RenderMode property of RadGrid to Mobile, CommandItemDisplay property of MasterTableView to any of the following: Top, Bottom, TopAndBottom. Once done, we will create the buttons and adding them to the command item. For that the ItemCreated server-event will be used.
Markup
C# - ItemCreated event handler
VB - ItemCreated event handler
Protected Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
Dim grid = TryCast(sender, RadGrid)
If TypeOf e.Item Is GridCommandItem AndAlso grid.ResolvedRenderMode = RenderMode.Mobile Then
Dim settings As GridCommandItemSettings = grid.MasterTableView.CommandItemSettings
Dim commandItem As GridCommandItem = TryCast(e.Item, GridCommandItem)
Dim commandItemCell As TableCell = TryCast(commandItem.Cells(0), TableCell)
If settings.ShowRefreshButton Then
Dim refreshButton As ElasticButton = New ElasticButton("t-font-icon rgIcon rgRefreshIcon", "t-text rgButtonText")
refreshButton.CssClass = "t-button t-button-icontext rgActionButton rgRefresh"
refreshButton.Text = settings.RefreshText
refreshButton.ID = "RefreshButton"
refreshButton.CommandName = "RebindGrid"
refreshButton.ToolTip = refreshButton.Text
refreshButton.CausesValidation = False
refreshButton.UseSubmitBehavior = False
refreshButton.OnClientClick = String.Format("if(!$find('{0}').rebind()) return false;", commandItem.OwnerTableView.ClientID)
commandItemCell.Controls.Add(refreshButton)
End If
End If
End Sub
At this point, the button is rendered, however, it does not have an icon. Here is how you can apply icon for the newly created button using CSS.
CSS