Kendo UI with AngularJs: How to bind data on textbox fields when user select row in a grid

Question

I am working with Kendo UI and angular grid application. In my application I define Kendo TabStrip. In first tab I have Kendo UI grid with data and second tab contains appropria

Answer 1

I am solve that problem. I was added change event function in $scope.gridMaster:

$scope.gridMaster = {
    ...
    change: function () {
        var dataItem = this.dataItem(this.select());
        $scope.accountNumber = dataItem.AccountNo;
        $scope.postingDate = dataItem.PostingDate;
        $scope.description = dataItem.Description;
        $scope.maturityDate = dataItem.MaturityDate;
        $scope.documentType = dataItem.DocumentType;
    }
}

And I was change ng-model in my HTML page:

<div id="tabstrip-2" style="overflow: hidden">
                        <div id="tabStrip2Half1">
                            <div class="divHeightStyle">
                                <label for="accountNumber" class="labelTextSize">Account Number:</label>
                                <input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="postingDate" class="labelTextSize">Posting Date:</label>
                                <input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
                            </div>
                            <div class="divHeightStyle">
                                <label for="desccription" class="labelTextSize">Description:</label>
                                <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
                            </div>
                        </div>
                        <div id="tabStrip2Half2">
                            <div class="divHeightStyle">
                                <label for="documentType" class="labelTextSize">Document Type:</label>
                                <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="documentType" />
                            </div>

                            <div>
                                <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
                                <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
                            </div>
                        </div>
                    </div>