custom toolbar command

3 posts, 0 answers
  1. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2017

    Posted 06 Jun 2017 Link to this post

    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. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2017

    Posted 06 Jun 2017 in reply to Adam Link to this post

    solved it on my own, thanks!
  3. Stefan
    Admin
    Stefan avatar
    2885 posts

    Posted 08 Jun 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top