How to pass data to kendo window using angularjs

Question

I've shown part f the code because it is a big controller and view. I'm trying to pass k-options with data to the modal but it isn't set.

vm.subItemOptions = {};
vm.editPlanSubItem = function() {
// some custom logic to get the data
      var params = {
                planItems: planItems,
                child: child,
                index: index,
                key: key
            };
            
            vm.subItemOptions = params; // trying to pass data to modal unsuccessfully

            vm.editPopup.center();
            vm.editPopup.open();
            
}

 <div ng-controller="MainCtrl as vm">
        <div class="demo-section k-content">
            <button class="k-button"  ng-click="vm.editPlanSubItem()">Edit</button>
        </div>
        
         <div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
             k-width="600" k-height="200" k-visible="false"
             k-content="{ url: siteURL + '/public/scripts/views/edit-sub-item.html'}"
             k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
        </div>

Part of the modal view edit-sub-item.html is:

<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
    <div class="modal-content">
        <div class="color-line"></div>
        <div class="modal-header">
            <h3 class="modal-title" ng-bind="message"></h3>
            <div class="row">
                <div class="col-md-12">
                    <label class="item-goal">Goal</label>
                    <div class="plan-items-td">
                        <input ng-disabled="params.planItems[0].Status === 'Approved'" type="text"
                               class="k-textbox plan-items"
                               ng-model="params.planItems[params.index].children[params.key].Goal">

                    </div>
                </div>
            </div>
            //other code
         
        </div>
    </div>
</div>

How could I pass params to the modal?

José Gabriel Reyes García · Accepted Answer · 2018-02-07 17:16:04Z

If you are using angularjs 1.5+ I would recommend to use a component (and if you even have an opportunity go with the component based architecture like React, Angular and Vue.js are going with). Anyways, with the components it's pretty straight forward. First the parent component:

<div ng-controller="MainCtrl as vm">
  <div class="demo-section k-content">
      <button class="k-button"  ng-click="vm.editPlanSubItem()">Edit</button>
  </div>
        
  <div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
     k-width="600" k-height="200" k-visible="false"
     k-on-open="win2visible = true" k-on-close="win2visible = false">
    <edit-sub-item params="vm.subItemOptions"></edit-sub-item>
  </div>
</div>

Then in the edit-sub-item component:

// Add any injected param in this component like $scope if you need, or any service that you created
function editSubItemController(){
  var vm = this;
  
  // Need to be in one of the component lifecycle hooks
  vm.$onChanges = function(props){
    console.log(vm.params);
  }
}

angular.module('ApplicationName').component("editSubItem", {
    controllerAs: 'vm',
    controller: editSubItemController,
    templateUrl: './public/scripts/views/edit-sub-item.html',
    bindings: {
        params: '<' //one way binding
    }
});

<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
    <div class="modal-content">
        <div class="color-line"></div>
        <div class="modal-header">
            <h3 class="modal-title" ng-bind="message"></h3>
            <div class="row">
                <div class="col-md-12">
                    <label class="item-goal">Goal</label>
                    <div class="plan-items-td">
                        <input ng-disabled="vm.params.planItems[0].Status === 'Approved'" type="text"
                               class="k-textbox plan-items"
                               ng-model="vm.params.planItems[vm.params.index].children[vm.params.key].Goal">

                    </div>
                </div>
            </div>
            //other code
         
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

How to pass data to kendo window using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related