Add buttons to RadGrid CommandItem when using Mobile RenderMode

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    570 posts

    Posted 30 Jul 2018 Link to this post

    Requirements

    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    ASP.NET, CSS, C#, VB


    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

    <telerik:RadGrid ID="RadGrid1" runat="server" RenderMode="Mobile"
            OnItemCreated="RadGrid1_ItemCreated"   
            OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView CommandItemDisplay="Top">
            <!-- columns here -->
        </MasterTableView>
    </telerik:RadGrid>

    C# - ItemCreated event handler
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        RadGrid grid = sender as RadGrid;
        if (e.Item is GridCommandItem && grid.ResolvedRenderMode == RenderMode.Mobile)
        {
            GridCommandItemSettings settings = grid.MasterTableView.CommandItemSettings;
            GridCommandItem commandItem = e.Item as GridCommandItem;
            TableCell commandItemCell = commandItem.Cells[0] as TableCell;
     
            if (settings.ShowRefreshButton)
            {
                var btn = new ElasticButton("t-font-icon rgIcon rgRefreshIcon", "t-text rgButtonText");
                btn.CssClass = "t-button t-button-icontext rgActionButton rgRefresh";
                btn.Text = settings.RefreshText;
                btn.ID = "RefreshButton";
                btn.CommandName = "RebindGrid";
     
                btn.ToolTip = btn.Text;
                btn.CausesValidation = false;
                btn.UseSubmitBehavior = false;
                btn.OnClientClick = String.Format("if(!$find('{0}').rebind()) return false;", commandItem.OwnerTableView.ClientID);
                commandItemCell.Controls.Add(btn);
            }
        }
    }

    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

    <style>
        .RadGrid .rgRefreshIcon:before {
            content: "\e106";
            color: black;
        }
    </style>

     

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.