Angular-Kendo grid edit template - how to get access to those fields in the controller code

Question

In my AngularJS app, I'm using a Kendo grid with an edit template. This way when a user clicks on the EDIT button, I can control the editable fields in the modal popup.

Now in this edit template, I have added some custom functionality; that is, a simple "Add" option. This Add option will call into a function within my controller code. All good so far.

The problem is: when I click on the "Add" link, I cannot get access to the fields within the controller by way of dataItem.fieldName .

Here's my HTML :

   <div class="col-lg-5">  
            <span id="userKriGrid"
                kendo-grid="settings.userRiskMsrGrid" 
                k-data-source="settings.userRiskMsrGridDS"
                k-options="settings.riskMsrGridOptions" 
                k-rebind="settings.riskMsrGridOptions">
            </span>
   </div>

and the grid settings within my js controller:

settings.riskMsrGridOptions = {   // Kendo grid settings
	selectable: true,
	columns: [
	  { field: "id", width: "10px", hidden: true },
	  { field: "name", title: "Risk Measure", width: "5px", },                           
	  { field: "kri_group", title: "Cube", width: "20px", hidden: true },
	  { field: "kri", title: "Result Vector", width: "20px", hidden: true},
	  { field: "kri_alias", title: "KRI Name", width: "20px", hidden:true },
	  { field: "aggreg_formula", title: "KRI Expression", width: "35px", hidden: true },
	  { command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], title: "Edit", width: "5px" }
	],
	editable: {
		mode: "popup",
		template: kendo.template($("#editorTemplate").html())   // loaded up in index.html		
	},
	edit: function (e) {
		var window = e.container.data("kendoWindow");
		window.title("Risk Measure Edit");
	}            
};

And I'm loading an external template (i.e. http://docs.telerik.com/kendo-ui/framework/templates/load-remote ). Please note the ng-click event in the button calls into settings.addToDefRiskMsr(e)

<script id="editorTemplate" type="text/x-kendo-template">
	<form class="form-horizontal">
		<fieldset>				
		<div class="form-group">
			<label class="col-md-4 control-label" for="textinput">Risk Measure</label>  
			<div class="col-md-3">
				<input id="textinput" ng-model="dataItem.name"  class="form-control input-md" type="text" >            
			</div>
            <div class="col-md-2">  <!-- ADD BUTTON HERE !!! -->
                <button type="button" class="btn btn-default" ng-click="settings.addToDefRiskMsr(e)" >
                  <span title="add to Risk Measure grid" class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Add to DRM
                </button>                
            </div>
		</div>

	

		</fieldset>
	</form>
</script>

Again, the template code above uses dataItem.fieldName to pull the field I want to the user have edit access to.

Now how do I get access to that field within my controller ? dataItem.name DOES NOT WORK !

    settings.addToDefRiskMsr = function (e) {
        var riskMeasureName = dataItem.name;    // NOT WORKING !!!

your advice is appreciated.

regards, Bob }

Hey have you tried seeing if $scope.dataItem.name is the item you are trying to get? — scniro
I need to review my code. I may have resolved it, and forgot to update here. — bob.mazzo
cool let me know i'd be happy to look into this with you. Do you have a Pluker for this? — scniro
Hi @bob.mazzo, how did you resolve this? I've just ran into the same issue. In fact, I'm not using scope, I use the latest "controllerAs" method, which means I access all the fields in my template as ctrl.dataItem.myfield. But when I try to use the same inside my controller, there's no dataItem at all! — AsGoodAsItGets
oh my goodness. I'm sorry for never having posted my final resolution on this. I will have to check the code at home tonight...I'll get back to you on this... — bob.mazzo

AsGoodAsItGets AsGoodAsItGets · Accepted Answer · 2016-12-19T11:35:18

If you're using the original jQuery-based Kendo UI (i.e. not the new version made from the ground-up for Angular 2) with Angular 1.5+ and you're using the controllerAs method, you may find that the dataItem field is not always accessible in your controller. In my case, I had an edit template with an ng-show attribute which was calling a controller method, passing a dataItem field, and I noticed that dataItem was sometimes undefined inside the controller. So, my solution was to inject $scope in the controller and then dataItem is accessible as $scope.$parent.dataItem.

Imho, this is a bug in Kendo UI.

Angular-Kendo grid edit template - how to get access to those fields in the controller code

1 Answers