custom toolbar command

[Adam]

I am trying to add a custom command into the toolbar to launch a modal and can't get the grid to render or template to function properly.  This is all in angularjs.

 

<div class="page page-forms-common">
    <div class="pageheader">
       <h2>Transactions</h2>
    </div>

    <div ng-include="'views/card/CardHeader.html'" ng-controller="CardHeaderCtrl"></div>
    <br />

    <div>

       <kendo-grid options="transactionGridOptions" id="transactionsGrid">

       </kendo-grid>

    </div>
    <script type="text/ng-template" id="DisputeTransactions.html">
       <div>
          <div class="modal-header">
             <h3 class="modal-title custom-font">Dispute Notes</h3>
          </div>
          <div class="modal-body">
             <label for="noteHistory">
                Previous Notes:
             </label>
             <label for="newNote">
                Add Note:
             </label>
             <textarea></textarea>
          </div>
          <div class="modal-footer">
             <button class="btn btn-orange" ng-click="cancel()">Cancel</button>
             <button class="btn btn-blue" ng-click="ok()">Submit</button>
          </div>
       </div>
    </script>
    <script type="text/ng-template" id="disputeButtonTemplate">
       <div id="toolbar"
           data-role="toolbar">
          <button ng-click="openDispute('lg')">Dispute</button>
       </div>
    </script>
</div>

 

var transactionData = [
    {
       "TransactionId": "1",
       "Transaction_Date": "02/14/2017 17:00:000",
       "Transction_Amount": "$200.00",
       "Merchant_Name": "1-800-Flowers",
       "Transaction_Description": "home delivery",
       "Balance": "$1500.00"
    }, {
       "TransactionId": "2",
       "Transaction_Date": "02/15/2017 17:00:000",
       "Transction_Amount": "$300.00",
       "Merchant_Name": "Shane Co",
       "Transaction_Description": "Shane Co in-store purchase",
       "Balance": "$1200.00"
    }, {
       "TransactionId": "3",
       "Transaction_Date": "02/16/2017 08:30:000",
       "Transction_Amount": "$200.00",
       "Merchant_Name": "King Soopers",
       "Transaction_Description": "foo",
       "Balance": "$1000.00"
    }
];

app.controller("TransactionGridCtrl", function ($scope, $uibModal) {

    $scope.transactionGridOptions = {
       toolbar: [{ name: "excel" }, { name: "pdf" }, { template: kendo.template($('#disputeButtonTemplate').html()) }],
       dataSource: {
          data: transactionData
       },
       columns: [
          { template: "<input type='checkbox' class='checkbox' />", width:"30px" },
       {
          field: "TransactionId",
          hidden: true
       },
       {
          field: "Transaction_Date",
          title: "Transaction Date",

       },
       {
          field: "Transction_Amount",
          title: "Transction Amount"
       },
       {
          field: "Merchant_Name",
          title: "Merchant Name"
       },
       {
          field: "Transaction_Description",
          title: "Transaction Description"
       },
       {
          field: "Balance",
          title: "Balance"
       }],
       noRecords: true,
       editable: false,
       sortable: true,
       reorderable: true,
       pageable: {
          pageSize: 20,
          previousNext: true,
          input: true,
          buttonCount: 5,
          pageSizes: [20, 30, 40, "all"],
          info: true,
          messages: {
             page: "Enter page"
          }
       },
       filterable: {
          mode: "menu",
          ignoreCase: true,
          operators: {
             string: {
                eq: "Equal to",
                contains: "Contains",
                startswith: "Begins with"
             },
             date: {
                eq: "Equal to",
                gt: "After",
                lt: "Before",
                eq: "Equals",
                gte: "After or equal to",
                lte: "Before or equal to"
             }
          }
       },
       pdf: {
          allPages: false,
          fileName: "Transactions.pdf"
       },
       excel: {
          fileName: "Transactions.xslx",
          filterable: true
       }
    }


    $scope.openDispute = function (size) {
       alert("hi");
       //var modalInstance = $uibModal.open({
          //templateUrl: 'TransferFunds.html',
          //controller: 'TransferFundsCtrl',
          //size: size
       //});
    }

});

[Adam]

solved it on my own, thanks!

[Stefan]

Hello Adam,

I'm glad that the issue is resolved.

Still, the provided code for the template looks good.

If the issue is not specific to the application and can occur in common scenario, please share the resolution with the Kendo UI community, it will be highly appreciated.

Regards,
Stefan
Progress Telerik