Adding Refresh Button To Toolbar

[Frank Carr]

Do you have an example of how to add a refresh button, with a graphic, not text, to the Grid toolbar? The button should clear all filters/searches.

 

I suppose this could be done by reloading the entire partial view of the grid but since this seems to be built in on the paging bar I thought there might be a shortcut to doing this.

 

[Sandhya D]

Hi Frank,

Thanks for your interest in using  syncfusion Products.

Your requirement  to add the toolbar item with  refresh can be achieved by adding the item in ToolBar, In  ClientSideEvents using "onToolbarClickEvent" we can remove the filters and search options while refresh. Please refer the code below.

[view.cshtml]

@(Html.Syncfusion().Grid<Product>("Editings").Datasource(Model)

.Filtering(filter =>

{

 filter.AllowFiltering(true);

 filter.FilterMode(FilterMode.Default);

})

   .AllowSearching(true)

 .Datasource(Model)

                 .Caption("Product Details")

                 .AutoFormat(Skins.Marble)

                 .EnablePaging()

                        .PageSettings(page => { page.PageSize(5).PageCount(5); })

                        .Column(cols =>

                 {

                        cols.Add(c => c.Id).HeaderText(" ID");

                        cols.Add(c => c.Name).HeaderText("Name");

                        cols.Add(c => c.Description).HeaderText("Description");

                        cols.Add(c => c.Quantity).HeaderText("Quantity");

                 })

                 .ClientSideEvents(e => e.OnToolbarClickEvent("OnToolbarClickEvent"))

                 .ToolBar(tools =>

                 {

                    tools.Add(GridToolBarItems.Search);

                    tools.Add("Refresh", "Refresh");

                 })

)

[script ]

<script type="text/javascript">

    var gridObj = null;

    function OnToolbarClickEvent(sender, args) {

        gridObj = sender;

        if ($(args._currentItem).children("a.Refresh").length > 0) {

            gridObj._filters = [];

            gridObj._searchResults = [];

            gridObj.sendRefreshRequest();

        }

       }

</script>

<style>

        .Refresh {

            background-image: url("/Images/111.png");

        }

    </style>

We have attached sample for your reference.Please get back to us if you need further assistance.

Regards,

Sandhya

GridEditing_6908f0f4.zip