This is a migrated thread and some comments may be shown as answers.

custom toolbar command

2 Answers 169 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 06 Jun 2017, 04:44 PM

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
       //});
    }
 
});

2 Answers, 1 is accepted

Sort by
0
Adam
Top achievements
Rank 1
answered on 06 Jun 2017, 05:02 PM
solved it on my own, thanks!
0
Stefan
Telerik team
answered on 08 Jun 2017, 08:35 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Adam
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or