We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Toolbar display on top and bottom of data table

Is it possible to show this in both locations?  Right now it's just on the top.

5 Replies

MF Mohammed Farook J Syncfusion Team November 15, 2018 08:46 AM UTC

Hi Robert, 
Query: Is it possible to show this in both locations? 
We have analyzed your query and prepared a sample with a toolbar at the bottom as well for the grid. To achieve your requirement, we suggest to render a toolbar component after the grid and provide the required items for the toolbar. Please refer to the below sample and documentation for your reference. 
Code Example: 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 
}).AllowPaging().AllowExcelExport().AllowPdfExport().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" }).Render() 
<div class="e-grid"> 
    @Html.EJS().Toolbar("defaultToolbar").Items(new List<Syncfusion.EJ2.Navigations.ToolbarItem> { 
    new Syncfusion.EJ2.Navigations.ToolbarItem { Id= "excel", Type = Syncfusion.EJ2.Navigations.ItemType.Button, Text = "ExcelExport", PrefixIcon= "e-excelexport" }, 
    new Syncfusion.EJ2.Navigations.ToolbarItem { Id= "pdf", Type = Syncfusion.EJ2.Navigations.ItemType.Button, Text = "PdfExport", PrefixIcon= "e-pdfexport"}, 
    function toolbarClick(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.id == "excel") { 
        else  if (args.item.id == "pdf") { 
Please get back to us for further assistance. 
J Mohammed Farook 

RD ROBERT DEJOURNETT November 15, 2018 02:23 PM UTC

Thanks, is it possible to use the EJ toolbar?  I am not sure if I have a license for the EJ2 stuff.  I dont think I do.

I got as far as creating the toolbar, but not sure what the right URL is for the icons, and not sure how to handle the click event.

<div class="e-grid">
    <div id="ToolbarItem">
            <li id="OtherFormat" title="Convert PDF files to Word or Excel Online…">
                <div class="PdfDocument e-icon convertToOthers "></div>
    <style type="text/css" class="cssStyles">

        .e-tooltxt .e-icon {
            background-image: url('http://js.syncfusion.com/UG/Web/Content/pdf-icon.png');
            background-repeat: no-repeat;
            display: block;
            height: 30px;
            width: 30px;

        .convertToOthers {
            background-position: -349px 0px;
</div >

VN Vignesh Natarajan Syncfusion Team November 16, 2018 12:18 PM UTC

Thanks for the update. 
Query :- Is it possible to show this in both locations in EJ1 Grid? 
As per your request we have prepared a sample with a toolbar at the top as well as bottom of the Grid. We have rendered the toolbar after the Grid has been rendered and bind click event for the Toolbar Items.  
Please refer to the code example 
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
          .ToolbarSettings(toolbar =>{ 
                toolbar.ShowToolbar().ToolbarItems(items => { 
          .Columns(col =>{ 
                         .    .   .        
@Html.EJ().Toolbar("editingToolbar").Items(s =>{ 
                  s.Add().SpriteCssClass("e-icon e-addnew").TooltipText("add"); 
                  s.Add().SpriteCssClass("e-icon e-edit").TooltipText("edit"); 
              }).Width("100%").EnableSeparator(true).Height("25px").ClientSideEvents(eve => eve.Click("click")) 
    .material .frame { 
        width: 497px; 
<script type="text/javascript"> 
    function click(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        if (args.text == "add") { 
        else if (args.text == "edit") { 
            var inx = gridObj.model.selectedRowIndex; 
            var row = gridObj.getRowByIndex(6); 
For your convenience we have prepared a sample which can be downloaded from below link 
Refer our help documentation for your reference 
Please get back to us if you have any queries. 
Vignesh Natarajan 

RD ROBERT DEJOURNETT November 16, 2018 01:31 PM UTC

Hi thanks for this.  This is right.  I also have excel export on my grid toolbar, and do not have the add function.

The bottom toolbar is this:

  @Html.EJ().Toolbar("editingToolbar").Items(s =>
    s.Add().SpriteCssClass("e-edititem e-toolbaricons e-icon e-edit").TooltipText("Edit");
    s.Add().SpriteCssClass("e-deleteitem e-toolbaricons e-icon e-delete").TooltipText("Delete");
    s.Add().SpriteCssClass("e-saveitem e-toolbaricons e-disabletool e-icon e-save").TooltipText("Save");
    s.Add().SpriteCssClass("e-cancel e-toolbaricons e-disabletool e-icon e-gcancel").TooltipText("Cancel");
    s.Add().SpriteCssClass("e-excel e-toolbaricons e-excelIcon e-icon").TooltipText("Excel Export");
}).ClientSideEvents(e => e.Click("toolbarClick")).Width("100%")

The script is:

 function toolbarClick(args) {

        var gridObj = $("#SchedulerGrid").ejGrid("instance");

        if (args.text == "Edit") { // not yet implimented
            if (gridObj.getSelectedRows().length > 0)

        if (args.text == "Delete") { // works
            var _person_id = $("#GridData").val();
            gridObj.deleteRecord("person_id", { person_id: _person_id }); 

        if (args.text == "Save") { // ??            

        if (args.text == "Cancel") { // ??            

        if (args.text == "Excel Export") {

Also you will need the toolbar images from the sample code for a toolbar.  Here is the style.

<style type="text/css">
    .e-toolbar .e-ul .e-tooltxt > div {
        display: block;
        background-image: url('/Content/images/Toolbar/ui-icons-dark.png');
        height: 22px;
        width: 22px;
        padding: 2px 4px 0px 6px;

VN Vignesh Natarajan Syncfusion Team November 19, 2018 11:25 AM UTC

Hi Robert, 
Thanks for the update. 
We are glad to hear that your query has been resolved. 
Please let us know if you need further assistance regarding this query.   
Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon