Dynamically setting the name and contents of the kendo window to angular, then open the window when you click a button on the form

Here is the main scenario: next to some of my form fields, I have a small button with a question mark. If the user clicks the button, I want to display a help message for this particular field using the kendo window. I want to set the title of the modal window to the corresponding field name of the form and set the contents of the window using the help message for this field.

The code below is an example on which I would like to build: http://kendo-labs.imtqy.com/angular-kendo/#/Window

If you notice ng-clickbuttons in the event , the open()kendo window method is called . But the name is statically set using k-title. I changed this to point to scope variables.

I need to call a function in my controller that will change $scope.helpTitle, and $scope.helpContenton the basis of the fields of the form, which asks the user, and then open the window kendo.

What is the β€œAngular method” for dynamically setting the title and contents of a kendo modal window based on which field the user is prompted for and then the window opens?

I already have help content in a local object; no need to fetch it through Ajax.

<div ng-controller="MyCtrl">
  <div style="position: relative; width: 400px; height: 100px">

    <button id="ExpirationDateHelp" class="k-button" ng-show="!win2visible" ng-click="win2.open()">help</button>


    <div kendo-window="win2" k-title="helpTitle"
         k-width="600" k-height="200" k-visible="false"
         k-content="{template:   helpContent }"
         k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
  </div>
</div>
+4
source share
1 answer

You can do the following:

, , worte k-window = "win2" , .

$scope.DlgOptions = {
            modal: true,
            title: "My Dyanamic Title",
            width: 1080,
            visible: false,
            draggable: false,
            pinned: true,
            resizable: false
        };

        $scope.win2.setOptions($scope.splashDlgOptions);
        $scope.win2.center();
        $scope.win2.open();
+5

All Articles