Category / Section
How to add custom toolbar button in PivotClient?
1 min read
This KB illustrates that how to add custom toolbar button in PivotClient.
Solution:
You can add a custom button in PivotClient toolbar using the following code examples with respective to JS, ASP and MVC platforms.
JavaScript
<div id="customBtn" style="margin-left:5px;">CustomButton</div> <div id="PivotClient1" style="min-height: 275px; min-width: 525px;"/> <script type="text/javascript"> $(function () { $("#PivotClient1").ejPivotClient({ url: "../wcf/OlapClientService.svc", title: "OLAP Browser", chartLoad: "AddingCustomButton" }); }); $("#customBtn").ejButton({ size: "normal", showRoundedCorner: true, click: "btnClick", }); function AddingCustomButton(args) { $(".reportToolbar").append($("#customBtn")); } function btnClick(e) { alert("Click event fired!!!"); } <script/>
ASP
<ej:PivotClient ID="PivotClient1" runat="server" Url="../wcf/OlapClientService.svc"> <ClientSideEvents ChartLoad="AddingCustomButton" /> </ej:PivotClient> <ej:Button ID="customBtn" runat="server" Size="Large" Type="Reset" OnClick="btnClick" ShowRoundedCorner="true" Text="CustomButton"></ej:Button> <script type="text/javascript"> function AddingCustomButton(args) { $(".reportToolbar").append($("#customBtn")); } function btnClick(e) { alert("Click event fired!!!"); } <script/>
MVC
@Html.EJ().Pivot().PivotClient("PivotClient1").Url(Url.Content("~/wcf/OlapClientService.svc")).Title("OLAP Browser").ClientSideEvents(oEve => { oEve.ChartLoad("AddingCustomButton"); }) @Html.EJ().Button("customBtn").Text("CustomButton").Size(ButtonSize.Normal).ShowRoundedCorner(true).ClientSideEvents(e => e.Click("btnClick")) <script type="text/javascript"> function AddingCustomButton(args) { $(".reportToolbar").append($("#customBtn")); } function btnClick(e) { alert("Click event fired!!!"); } <script/>