Kendo grid editable template from directive

Question

I am trying to create a kendo grid (angularjs) and attached a personalized editor <div my-directive-editor></div> via grid options editable.template. On my directive editor (angularjs directive), i specify the structure of HTML from remote file and link it via templateUrl. Upon running the application, everything works great when i first click the Add New Entry but when i cancel the popup dialog and click again the Add New Entry an error will show $digest already in progress in angular format.

I tried instead using templateUrl I used template and formatting the whole HTML structure as string and passed it there and it goes well without the error but as i can see, it is hard for the next developer to manage the very long HTML string so it would be great if i can separate it to remote file and just link it to templateUrl. I prepared a dojo to play with CLICK HERE the content of TestTemplate.html is the HTML string from template.

This is my directive

 app.directive('grdEditor',
   [          
    function () {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          dataItem: '=ngModel'
        },
        //template: '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>',
        templateUrl: 'http://localhost/Angular/TestTemplate.html',
        /*template: function(){
            return '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>';
        },*/
        controller: function ($scope, $attrs, $timeout) {
          $scope.optGender = {
            dataTextField: 'Text',
            dataValueField: 'Value',
            dataSource: 
            {
                data: [
                {
                    Text: 'Male', 
                    Value: 1
                }, 
                {
                    Text: 'Female', 
                    Value: 2
                }]
            }
          };
        }
      };
    }
  ]);

and this is my kendo grid options (partial)

 $scope.optGrid = {
              editable: {
                mode: "popup",
                window: {
                    minHeight: '320px',
                    minWidth: '365px',
            },
                template: '<div grd-editor ng-model="dataItem"></div>',
            },
            toolbar: ['create', 'excel'],
            excel: {
                allPages: true
            },
 .....................

Any help would be appreciated.

TIA

Farhan C K Farhan C K · Accepted Answer · 2015-05-05T05:27:06

i think a there is problem with templateUrl. you don't need to give http:// you just need to give path from your base directory or directory of your index.html

Kendo grid editable template from directive

1 Answers