Retrieve the child grid's data source in Kendo using Angular

I am currently working with a master detail grid in Kendo Grid and using the Angular version of the Kendo Grid.

One interesting feature I have added is a custom button for adding a new record in each row of the grid. When this button is clicked, a new record is added below that particular row.

Here is the code snippet that is functioning as expected:

Button Template

<img src='images/save.png' ng-click='onClick()'
 class='k-grid-add' title='Add new record' alt='Create'/>

The click function

$scope.onClick = function ()
{               
    var grid = $scope.grid;    
    var sel = grid.select();    
    var item = grid.dataItem(sel);    
    var index = grid.dataSource.indexOf(item);
    grid.dataSource.insert(index + 1, {});
}

All seems to be working smoothly so far. However, I am now faced with the challenge of adding a similar button to each row in the child grid. The issue lies in retrieving the dataSource of the child grid within Angular. If I can access the child grid, I believe the above code can be utilized to add a new row based on the index.

Thank you for your time, please feel free to reach out if more information is needed.

Thanks

Answer №1

After experimenting with different methods, I found a solution that works for me. By implementing the following function and attaching it to the click event of the add button in the child grid row, I was able to achieve the desired outcome.

$scope.customAddClick = function ($event) {
    var childGrid = $($event.currentTarget).closest(".k-grid").data("kendoGrid");
    var sel = childGrid.select();
    var item = childGrid.dataItem(sel);
    var index = childGrid.dataSource.indexOf(item);
    childGrid.dataSource.insert(index + 1, {});
};

To link this function to the add button, I used the ng-click attribute as shown below:

ng-click='customAddClick($event)'

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

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Facing a simple problem and seeking a solution. I am using ng-repeat to dynamically create select boxes with ng-options displaying the same values. The ng-repeat is used to iterate through model options. <div data-ng-repeat="condition in model.condit ...

When should the grecaptcha.execute() function be invoked while utilizing Invisible reCAPTCHA V2?

I recently implemented invisible reCAPTCHA successfully, but I'm wondering if I did it correctly when calling grecaptcha.execute(). After loading the API script with an explicit call like this: <script src="https://www.google.com/recaptcha/api.js ...

Access denial encountered when attempting to submit upload in IE8 using JavaScript

When running the submit function on IE8, I am receiving an "access is denied" error (it works fine on Chrome and Firefox for IE versions above 8): var iframe = this._createIframe(id); var form = this._createForm(iframe, params); ... ... ...

How can I achieve the same functionality as C# LINQ's GroupBy in Typescript?

Currently, I am working with Angular using Typescript. My situation involves having an array of objects with multiple properties which have been grouped in the server-side code and a duplicate property has been set. The challenge arises when the user updat ...

Can someone help me uncover the previous URL for login using just JavaScript? I've tried using document.referrer but it's not giving me the

Currently, I am utilizing express with pug templates and pure JavaScript. In order to enhance the user experience of my log in system, I would like to save the URL that someone came to the login page with, so that I can redirect them back to it once they h ...

Is your Phonegap and Jquery app experiencing delays in script loading?

I recently developed a phonegap + JQM application and encountered an issue with the loading time of external JavaScript files. To elaborate, when the app starts, the initial file that appears is loader.html. In this file, I have included several JS files ...

Executing Actions Prior to Redirecting

I am working on implementing a timer process using a custom JQuery plugin that will redirect to the login page after a specific number of minutes. Additionally, when the timer reaches zero, I need to execute a task, which in this case involves making a cal ...

Unlocking the Power of Javascript Promises in FileReader

I am facing an issue with my code. Here is the HTML snippet: <input type='file' multiple> And this is my JavaScript code: var inputFiles = document.getElementsByTagName("input")[0]; inputFiles.onchange = function(){ var fr = new File ...

Utilizing an SSL certification (pem file) within JavaScript

Currently in the process of developing a program to extract data from the FAA's AIDAP database. I received a security certificate in the form of a .p12 file, which I have successfully converted into a .pem file. However, I am encountering difficulties ...

Do multiple AJAX calls share parameters?

I have a JavaScript function as shown below: function makeAjaxCall(outerParameter1, outerParameter2, outerDivId, paramInput){ $.ajax({ type: "POST", url: "some time taking LargeWebMethod or URL", //may take some time to return output dat ...

Fade in an image using Javascript when a specific value is reached

Here's the select option I'm working with: <div class="okreci_select"> <select onchange="changeImage(this)" id="selectid"> <option value="samsung">Samsung</option> <option value="apple">App ...

In Typescript, interfaces are required to have properties written in Pascal Case instead of camel Case

Currently, I am facing a strange issue in my ASP.NET 5 application where I am using Angular 1.4 with TypeScript and RXJS. Somehow, during the runtime, all my interface properties are getting converted from camel casing to Pascal casing. This unexpected beh ...

What is the best way to retrieve AJAX post data from the request in Symfony2?

My goal is to efficiently upload a file using jquery-file-upload (blueimp) and include some data in a cross-domain environment. To achieve this, I have utilized code from the basic.html file provided by jqueryfileupload on the client side. Additionally, I ...

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

I need help troubleshooting an error I'm encountering while trying to implement react-odometer js with react-visibility-sensor in next js. Can anyone provide guidance on how to resolve this issue? Here is the code snippet causing the problem: https:/ ...

The textbox fails to update when the condition in the IF statement is met

In the following code, I have an input box with the ID volumetric_weight that gets updated on keyup. However, the second textbox with the ID volumetric_price does not update as expected, even though I believe I wrote it correctly. I am wondering if there ...

What is the simplest way to test an npm module while coding?

Currently, I am in the process of making modifications to @editorjs/nested-list. To streamline my testing process without extensive installations, I have created a simple web page: <html> <head> <script src="https://cdn.jsdelivr.net/npm ...

Array in Javascript reset to null after its second iteration

''' const users = [] const addUser = ({ id, username, room }) => { // Clean the data username = username.trim().toLowerCase() room = room.trim().toLowerCase() // Validate the data if (!username || !room) { r ...

Type of JavaScript map object

While exploring TypeScript Corday, I came across the following declaration: books : { [isbn:string]:Book}={}; My interpretation is that this could be defining a map (or dictionary) data type that stores key-value pairs of an ISBN number and its correspon ...

The error message "Uncaught TypeError: Unable to retrieve the 'length' property of an undefined object in Titanium" has occurred

Here is the data I am working with: {"todo":[{"todo":"Khaleeq Raza"},{"todo":"Ateeq Raza"}]} This is my current code snippet: var dataArray = []; var client = new XMLHttpRequest(); client.open("GET", "http://192.168.10.109/read_todo_list.php", true); c ...