Grid Toolbar display on top and bottom of data table

[ROBERT DEJOURNETT]

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

[Mohammed Farook J]

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> 

... 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/toolbar-both2071056473  

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/toolbar/getting-started-asp-mvc#getting-started  

 

Please get back to us for further assistance. 

 

Regards, 

J Mohammed Farook 

[ROBERT DEJOURNETT]

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]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/140962/ze/SA88BB~1757241966.zip 

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#methods:addrecord  

 

https://help.syncfusion.com/api/js/ejgrid#methods:startedit  

 

https://help.syncfusion.com/api/js/ejgrid#methods:getrowbyindex  

 

https://mvc.syncfusion.com/demos/web/toolbar/default 

 

https://help.syncfusion.com/js/toolbar/getting-started 

 

 

Please get back to us if you have any queries. 

 

 

Regards, 

Vignesh Natarajan 

 

[ROBERT DEJOURNETT]

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]

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