Put Separator in RadToolBar

2 posts, 0 answers
  1. Hardik
    Hardik avatar
    8 posts
    Member since:
    Jan 2017

    Posted 22 Aug 2017 Link to this post

    I want to add Separator in RadToolBar as per attached screenshot

    <telerik:RadToolBar ID="accoADEGridToolBar" runat="server"
                                OnClientButtonClicking="onToolBarClientButtonClicking"
                                AutoPostBack="true"
                                Width="99.50%" OnClientLoad="onToolBarClientLoad" OnLoad="accoADEGridToolBar_Load">
                                <Items>
                                    <telerik:RadToolBarButton Text="Refresh" CommandName="RebindGrid" ImageUrl="Images/Refresh.gif">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarDropDown CssClass="drp_selectedMode" Text="Edit Mode:" >
                                        <Buttons>
                                            <telerik:RadToolBarButton CssClass="drp_BatchEditMode" Text="Batch" Value="Batch" CommandName="Batch"></telerik:RadToolBarButton>
                                            <telerik:RadToolBarButton CssClass="drp_EditFormsEditMode" Text="Embedded Form" Value="Embedded Form" CommandName="EditForms"></telerik:RadToolBarButton>
                                            <telerik:RadToolBarButton CssClass="drp_InPlaceEditMode" Text="Inline" Value="Inline" CommandName="InPlace"></telerik:RadToolBarButton>
                                            <telerik:RadToolBarButton CssClass="drp_PopUpEditMode" Text="Modal Dialog" Value="Modal Dialog" CommandName="PopUp"></telerik:RadToolBarButton>
                                        </Buttons>
                                    </telerik:RadToolBarDropDown>
                                    <telerik:RadToolBarButton Text="Edit selected" CommandName="EditSelected" ImageUrl="Images/Edit.gif" Visible='<%# accoADEGrid.EditIndexes.Count == 0 && accoADEGrid.MasterTableView.EditMode != GridEditMode.Batch %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Save changes" CommandName="UpdateEdited" ImageUrl="Images/Update.gif" Visible='<%# accoADEGrid.EditIndexes.Count > 0 %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Save pending changes" CommandName="SaveChanges" PostBack="false" ImageUrl="Images/Update.gif" Visible='<%# accoADEGrid.MasterTableView.EditMode == GridEditMode.Batch %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Insert new row" PostBack="<%# accoADEGrid.MasterTableView.EditMode != GridEditMode.Batch %>" CommandName="InitInsert" ImageUrl="Images/AddRecord.gif" Visible='<%# !accoADEGrid.MasterTableView.IsItemInserted %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Save new row" CommandName="PerformInsert" ImageUrl="Images/Insert.gif" Visible='<%# accoADEGrid.MasterTableView.IsItemInserted %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Cancel (all)" CommandName="CancelAll" ImageUrl="Images/Cancel.gif" Visible='<%# accoADEGrid.EditIndexes.Count > 0 || accoADEGrid.MasterTableView.IsItemInserted %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Cancel pending changes" CommandName="CancelChanges" ImageUrl="Images/Cancel.gif" Visible='<%# accoADEGrid.MasterTableView.EditMode == GridEditMode.Batch %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Delete selected" CommandName="DeleteSelected" ImageUrl="Images/Delete.gif" Visible="<%# accoADEGrid.MasterTableView.EditMode != GridEditMode.Batch %>">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Show child items" CommandName="ShowLinkedInstance" ImageUrl="Images/Edit.gif" Enabled="false" Visible='<%# liID.Value != "" && !this.Page.ClientQueryString.Contains("RelationID") %>'>
                                    </telerik:RadToolBarButton>
                                    
                                    <telerik:RadToolBarButton PostBack="false" Text="Show Query" OuterCssClass="rightButton showHideQueries" CommandName="ShowQuery" ImageUrl="Images/Refresh.gif" Enabled="true" ClientIDMode="Static"></telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Excel Export" OuterCssClass="rightButton" CommandName="ExportToExcel" ImageUrl="Images/Edit.gif" Enabled="true" ClientIDMode="AutoID">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="Fullscreen" OuterCssClass="rightButton OpenInFullscreen" CommandName="Fullscreen" ImageUrl="Images/Fullscreen.png" Enabled="true" ClientIDMode="AutoID" Visible='<%# ( Request.QueryString["DisplayMode"] != null && Request.QueryString["DisplayMode"] == "WebPart") %>'>
                                    </telerik:RadToolBarButton>
                                </Items>
                            </telerik:RadToolBar>
  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 24 Aug 2017 Link to this post

    Hi Hardik,

    By setting the property IsSeparator to true, the button will be displayed as separator.
    <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>

    You can find more detailed information in this article.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top