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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Toolbar display on top and bottom of data table

Thread ID:

Created:

Updated:

Platform:

Replies:

140963 Nov 14,2018 03:18 PM UTC Nov 19,2018 11:25 AM UTC ASP.NET MVC 5
loading
Tags: Grid
ROBERT DEJOURNETT
Asked On November 14, 2018 03:18 PM UTC

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


Mohammed Farook J [Syncfusion]
Replied On 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"}, 
    }).Clicked("toolbarClick").Render() 
</div> 
 
<script> 
    function toolbarClick(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.id == "excel") { 
            grid.excelExport(); 
        } 
        else  if (args.item.id == "pdf") { 
            grid.pdfExport(); 
        } 
    } 
</script> 
... 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
J Mohammed Farook 


ROBERT DEJOURNETT
Replied On 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">
        <ul>
            <li id="OtherFormat" title="Convert PDF files to Word or Excel Online…">
                <div class="PdfDocument e-icon convertToOthers "></div>
            </li>
        </ul>
    </div>
    @Html.EJ().Toolbar("ToolbarItem").Width("auto").EnableSeparator(true).Height("33px")
   
    <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;
        }
        </style>
</div >


Vignesh Natarajan [Syncfusion]
Replied On November 16, 2018 12:18 PM UTC

Hi ROBERT, 
 
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 
 
@(Html.EJ().Grid<OrdersView>("Grid") 
          .Datasource((IEnumerable<object>)ViewBag.datasource) 
          .AllowPaging() 
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
          .ToolbarSettings(toolbar =>{ 
                toolbar.ShowToolbar().ToolbarItems(items => { 
                    items.AddTool(ToolBarItems.Add); 
                    items.AddTool(ToolBarItems.Edit); 
                   items.AddTool(ToolBarItems.Delete); 
               }); 
 
          }) 
 
          .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")) 
 
<style> 
    .material .frame { 
        width: 497px; 
    } 
</style> 
<script type="text/javascript"> 
    function click(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        if (args.text == "add") { 
            gridObj.addRecord(); 
        } 
        else if (args.text == "edit") { 
            var inx = gridObj.model.selectedRowIndex; 
            var row = gridObj.getRowByIndex(6); 
            gridObj.startEdit(row); 
        } 
          
      } 
    </script> 
    
 
 
 
 
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. 
 
 
Regards, 
Vignesh Natarajan 
 


ROBERT DEJOURNETT
Replied On 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)
                gridObj.startEdit(gridObj.getSelectedRows()); 
        }

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

        if (args.text == "Save") { // ??            
            gridObj.endEdit();
        }

        if (args.text == "Cancel") { // ??            
            gridObj.refreshContent(true);
        }

        if (args.text == "Excel Export") {
            gridObj.export("/Grid/ExportToExcel");
        }
    }

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;
        
    }
</style>


Vignesh Natarajan [Syncfusion]
Replied On 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.   
 
 
Regards, 
Vignesh Natarajan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon