CODEWITHSUNDEEP
angularjskendo-ui
Tim
Tim

Reputation: 8919

dynamically setting kendo window title and content in angular then open window when a button on the form is clicked

Here's the basic scenario: next to some of my form fields, I have a little button with a question mark image. If the user clicks on the button, I want to display a help message for that particular field, using kendo window. I want to set the title of the modal window to the relevant form fieldname, and to set the window content with a help message for that field.

Code below is from the example I'd like to build on: http://kendo-labs.github.io/angular-kendo/#/Window

If you notice in the ng-click event of the button, the open() method of the kendo-window is being invoked. But the title is statically set with k-title. I have changed that to point to scope variables.

I need to invoke a function in my Controller, which will change the $scope.helpTitle and $scope.helpContent based on which form field the user is asking about, and then open the kendo window.

What is "the Angular way" to dynamically set the title and content of the kendo modal window based on which field the user is asking for help on and then open the window?

I already have the help content in a local object; no need to fetch it via 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>

Upvotes: 4

Views: 8966

Answers (1)

Scription
Scription

Reputation: 645

You can do the following:

notice that the minute you worte k-window="win2" a scope variable was created referencing this window. 

$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();

Upvotes: 5

Related Questions