Using Kendo UI and AngularJs: A guide to binding data to textbox fields upon row selection in a grid

I have been collaborating with Kendo UI and angular grid application. In my project, I've set up a Kendo TabStrip where the first tab contains a Kendo UI grid filled with data, and the second tab has textbox fields that should be populated when a user selects a row in the grid. The grid loads data perfectly but there seems to be an issue with binding the data to the textbox fields. Can anyone provide guidance on how to bind data to textbox fields when a user selects a row in the grid?

Here is the JSON data stored in a separate file:

[
  { "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentType": "doc1" },
  { "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentType": "doc2" },
  { "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentType": "doc3" },
  { "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentType": "doc4" },
  { "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentType": "doc5" },
  { "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentType": "doc6" }


]

This is my Angular service code stored in a separate file:

angular.module("app").factory('myService', function ($http) {

  return {
      getAll: function (onSuccess, onError) {
          return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
              onSuccess(data);
          }).error(function (data, status, headers, config) {
              onError(data);
          });
      }
  }


});

Here is my controller code stored in a separate file:

var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {

$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
    $scope.tabStrip.select(0);
});

$scope.masterDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            url = "/Scripts/app/data/json/master/masterGridData.js",
            myService.getAll(function (data) {
                options.success(data);
            }).error(function (data) {
                options.error(data);
            })
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                AccountNo: { type: "string" },
                PostingDate: { type: "string" },
                MaturityDate: { type: "string" },
                Description: { type: "string" },
                DocumentType: { type: "string" }
            }
        }
    },
    pageSize: 16
});

$scope.gridMaster = {
    columns: [
            { field: "Id", hidden: true },
            { field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
            { field: "PostingDate", title: "Posting Date", width: "70px" },
            { field: "MaturityDate", title: "Maturity Date", width: "70px" },
            { field: "Description", title: "Description", width: "170px" },
            { field: "DocumentType", hidden: true }
    ],
    dataSource: $scope.masterDataSource,
    selectable: true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 16,
        pageSizes: ["50", "100", "200", "All"]
    },
    toolbar: [{
        name: "create"
    }]
};


});

This is the HTML code for my project:

<html>
<head>
    <!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
     <div class="divH3Style">
         <h3 class="h3LabelForm">Grid Master</h3>
     </div>
     <div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
                            <ul>
                                <li>Overview</li>
                                <li>Update</li>
                            </ul>


                        <div id="tabstrip-1">
                            <div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
                            </div>
                        </div>

                        <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="masterDataSource.data.AccountNo" 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="masterDataSource.data.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="masterDataSource.data.Description" />
                                </div>
                                <div class="datepickerStyle">
                                    <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                    <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="masterDataSource.data.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="masterDataSource.data.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>
                    </div>
</body>
</html>

If anyone can offer assistance or advice on this matter, it would be greatly appreciated.

javascriptangularjskendo-uikendo-ui-grid

Answer №1

I successfully resolved that issue by implementing a 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;
    }
}

Furthermore, I made adjustments to the ng-model in my HTML code:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty replicating the same effect across all five canvas elements

After following the code provided by j08691 here for canvas, everything worked flawlessly. However, I encountered an error in JavaScript when trying to implement it on multiple canvas elements. As a beginner in JavaScript, I would greatly appreciate any as ...

javascripthtmlcanvas

Alter data in MongoDB based on specific circumstances

Currently, I am utilizing node.js and mongoose for a project. The task at hand involves updating database information only if the required field either does not exist in the database or its value is less than 'x'. Specifically, this pertains to ...

javascriptnode.jsmongodbmongoosebackend

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

Sharing and showcasing files directly from a local directory

Recently diving into NodeJS and web development, I've successfully used multer to upload a single file within my web application. The file gets uploaded to my "uploads" folder flawlessly, and now I'm planning on storing the file path in my databa ...

javascriptnode.jsexpressuploadmulter

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

I am aware of the potential for a Cross-Site Forgery Attack that can target requests returning arrays by manipulating the Array constructor. For instance, let's say I have a site with a URL: foo.com/getJson that provides the following array: [&apos ...

javascriptjsonxsssecurityxmlhttprequest

Displaying an error message within the input field

I recently incorporated the jQuery validate plugin to check a contact form I created, but I'm encountering an issue. My goal is to have the error class display inline with the input field where the error occurred. However, it is only appearing in bloc ...

javascriptjqueryhtmlcss

The input value linked with Vue is not displaying on the DOM

I am attempting to connect a property of an item within an array in the data object of Vue to the value attribute of an input tag using binding. However, when I inspect the DOM of a web browser, it does not display. <template v-for="role in roles"> ...

javascriptvue.jsinputbindingv-model

What is the most effective way to use checkboxes to apply multiple filters to an array of objects?

Let me simplify the description. Within the App component, I fetch data from a JSON file and store it in the flightsList array. My goal is to filter this array based on checkboxes selected in the FlightOptions and Airlines components. The issue that I&a ...

javascriptvue.jsfilter

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

I am having an issue with a JSON file in which there are strings of characters attached to many of the field names. This is making it difficult for me to target those objects in JS. The structure looks like this: "bk:ParentField": { "bk:Field": "Va ...

javascriptjsonnode.jsparsingfs

Having difficulty leveraging the full capabilities of the Jquery.load() function

I'm currently facing an issue where the results I want to display to the user are not filtering properly based on their selection. I've been using GET on the same page (users.php?rid=) to process this, but for some reason, it seems to be loading ...

javascriptphpjqueryhtml

Change the spread operator in JavaScript to TypeScript functions

I'm struggling to convert a piece of code from Javascript to Typescript. The main issue lies in converting the spread operator. function calculateCombinations(first, next, ...rest) { if (rest.length) { next = calculateCombinations(next, ...res ...

javascripttypescript

What causes a delay in the start of a child process in Node.js?

I am in the process of developing a global node command line program that can execute any console command I provide it with in a new console window, whether on a Windows or Unix system. The goal is for the program to exit after it spawns its process so tha ...

javascriptnode.jsprocess

execute the changePage() function in jQuery using the data stored in localStorage

In my jQuery mobile page, I have a simple setup: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.2"> <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" /> < ...

javascriptjqueryhtmljquery-mobile

JavaScript functionality is not operational when accessed from a network drive

I'm having an issue running the following file. It works perfectly when run from a local drive but fails to execute when placed on a network drive. Any insights on why this may be happening? The code snippet below is what I am attempting to run, util ...

javascriptjqueryajaxnode.jsjquery-ui

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

javascripthtmlhead

Utilize VueJS to pass back iteration values using a custom node extension

Hey there! I'm currently working on a Vue app that generates a color palette based on a key color. The palette consists of 2 lighter shades and 2 darker shades of the key color. To achieve this, I have set up an input field where users can enter a hex ...

javascriptvue.js

Tips for distinguishing between elements in React

I am facing an issue with zooming images on mouse hover using CSS. I have a code snippet that works well, but it zooms both images simultaneously. How can I differentiate between mouse movements over different elements in ReactJS? Here is the code: .styl ...

javascriptreactjsjsx

Steer clear of directly altering a prop within reusable components

I am facing an issue with reusing a custom dropdown that I have created in my component file where props are the value options in the dropdown. When I try to select the dropdown, I get a Vue warning message: [Vue warn]: Avoid mutating a prop directly sinc ...

javascriptvue.js

Exploring the power of Firebase with Vue Js lifecycle methods

I am attempting to retrieve data from a specific user in Firebase and push that data into designated input fields. The path in Firebase is located here: var query = db.ref('Clients/'+ clientName +'/form/'); I retrieve the data in the ...

javascriptfirebasefirebase-realtime-databasevue.jsvuejs2

What possible reasons could be causing the ng-show directive to malfunction?

This form displays contact information. <div class="row" ng-controller="contactsCtrl"> <form ng-show="addFormShow"> <h3>Add Contact</h3> <!-- Add form --> <div class="row"> <div class="large ...

angularjsangularjs-directiveng-show