ToolbarClick doesn't work

[Bassem Ben ALI]

this is my grid:

@{

    List<object> toolbarItems = new List<object>();

    toolbarItems.Add("Search");

    toolbarItems.Add(new { template = "<a id='add' class='e-toolbaricons @ViewBag.btnCreate iconeBtnAdd e-icon'></a>"});

    toolbarItems.Add(new { template = "<a id='update' class='buttonDetail e-toolbaricons iconeBtnEdit e-icon'></a>" });

    toolbarItems.Add(new { template = "<a id='delete' class='e-toolbaricons @ViewBag.btnDelete iconeBtnDelete e-icon'></a>" });

}

@Html.EJS().Grid("FlatGrid").DataSource((System.Data.DataTable)ViewBag.DataSource).EnableVirtualization().ToolbarClick("toolbarClick").AllowResizing(true).Height("100%").Width("100%").AllowFiltering().AllowSorting().AllowSelection().FilterSettings(filter =>

{ filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Toolbar(toolbarItems).Render()

Also i added this script:

function toolbarClick(args) {

    if (args.item.id === 'add') {

        openModalCreate();

    }

    if (args.item.id === "update") {

        onGridClickDetails(args);

    }

    if (args.item.id === "delete") {

        onGridConfirmDelete(args);

    }

}

When i run the click isn't detected, it doesn't come to this part of script.

[Bassem Ben ALI]

Also i like to show the index of current page and number of rows with virtualisation.

[Dhivya Rajendran]

 Hi Bassem,  

  

Thanks for contacting Syncfusion support. 

  

Query : ToolbarClick doesn't work

 

We have validated your query and created a sample for your reference. In the below sample we have created a custom toolbar for Grid. When create a custom toolbar items for Grid then you need set value for the id property because we have performed the custom actions based on the toolbar item id value.  

 

Kindly refer to the below code example and sample for more information. 

[index.cshtml]

@{ 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { template = "<div><input type='checkbox' id='check' checked=''>Accept</input></div>" , id = "check" }); 

    . . . 

} 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120"). Add(); 

    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 

}).AllowGrouping().Height("300").ToolbarClick("toolbarClick").Toolbar(toolbarItems).Render() 

<script> 

    function toolbarClick(args) { 

        if (args.item.id === "check") { 

            alert("Custom toolar template") 

        } 

    } 

</script> 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvc-custom-toolbar351317308

 

You can get the total records count and current page values by using the totlaRecordsCount and currentPage property of page settings in Grid.

Refer the below help documentation link for more information.

 

var gridObj = document.getElementById('Grid').ej2_instances[0]; 

var total = gridObj.pageSettings.totalRecordsCount; // To get total records count  

var currentPage = gridObj.pageSettings.currentPage;// To get the current page values

 

Help documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/api-pageSettingsModel.html?lang=es5

 

Regards,

R.Dhivya