What steps are involved in updating the dataSource and refreshing a kendo grid with fresh data?

In the Add owner grid configuration, I have a function called $scope.addProcessOwner. When a user clicks on each owner, a new array object is created with the data stored in selectedOwners. Now, I want to set selectedOwners as the dataSource of the selected owner grid.

1- How can I set selectedOwners as the dataSource of selectedOwnerGridOptions?

2- How can I refresh the selected owner grid once an owner is selected from the Add owner grid?

grid.html

Add owner

<div kendo-grid="ownerSearch" options="ownerSearchResultGrid"
                    k-rebind="getOwnerSearchResultGrid"></div>

Selected owner

<div kendo-grid="selectedOwner" options="selectedOwnerGridOptions" k-data-source="selectedOwnerGrid"></div>

Ctrl.js

 var selectedOwners = [];
   $scope.addProcessOwner = function(dataItem){
                var selectedOwner = {
                    fullName: dataItem.fullName,
                    workerKey: dataItem.workerKey,
                    stdId: dataItem.stdId,
                    workEmailAddressText: dataItem.workEmailAddressText
                };
                 var isExists = function(e) {
                  if (e.fullName === selectedOwner.fullName && e.workerKey === selectedOwner.workerKey) {
                      return true;
                  }
                };
                if (!selectedOwners.some(isExists)) {
                  selectedOwners.push(selectedOwner);
                }
                console.log('WORKER DATA',JSON.stringify(selectedOwners));
                $scope.selectedOwnerGrid = selectedOwners;
                $scope.selectedOwnerGridOptions.dataSource.read();
            };

Answer №1

Forget about using:

$scope.selectedOwnerGrid = selectedOwners;
$scope.selectedOwnerGridOptions.dataSource.read();

Opt for this instead:

$scope.selectedOwnerGridOptions.dataSource.data(selectedOwners);

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

Encountering an issue when receiving a 400 status code in axios

Currently, I am utilizing Vue along with Axios to construct a single page application frontend. In situations where the server responds with a 400 error in CROS, the browser's console displays the following: (2) POST http://dev.sportx.one/api/token/ ...

Nested ng-repeat in AngularJS allows for the creation of form fields with dynamic

Greetings! I am currently working on a nested form field setup similar to the following: <table> <tbody ng-repeat="student in students"> <tr> <td colspan="3">{{student.sname}}</td> </tr> <tr> ...

Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing. Check out th ...

Having trouble accessing session value within an AngularJS file

Is there a recommended method for accessing session values from an angularjs file that's written in asp.net(C#)? I attempted to use the following code but was unsuccessful: $session.get(key) ...

Picture enclosed in a div element with blurred borders

I have a question regarding an image that was dynamically changed using JavaScript. The issue I'm facing is that the new image appears to be placed on top of a background image, resulting in a clear square outline around it. I'd like to know if t ...

What is the best way to store information in my express server using Angular?

After spending several hours on this issue, I am feeling stuck. Initially dealing with a CORS problem, I managed to solve it. However, my goal is to utilize $resource without creating a custom post method. My API follows RESTful standards where POST /artis ...

Exploring Frontend Package Dependencies in Different Versions

As I develop the React frontend for a library package, I want to clearly display to users the specific version of the library being utilized. Apart from manual methods or relying on Node.js, I am unsure of alternative approaches to achieve this. I am curi ...

for each and every object, execute the asynchronous function

I have a scenario where I need to loop through objects, call an async method ("search") with a callback, and then write the results (resultSet) to a JSON file once all objects are processed. The issue I'm facing is that the writeFile function is execu ...

Implementing sort functionality in React with filter capabilities

Is it possible to display the Sort By feature in React? Additionally, is it feasible to Filter data based on the sort category selected in the dropdown menu, which includes options such as male, female, or all? // Gather a list of names const names = data ...

Set navigation to switch to `position: fixed` after scrolling a certain distance

I'm currently working on adjusting the navigation to have a position: fixed right below the black header. I suspect that there might be some necessary tweaks needed in the JavaScript code, but I'm unsure about the specific changes required at thi ...

Angular directive failed to correctly retrieve object

I have a person object loaded from the backend that is structured as follows: { "PersonId":"19894711-2eb9-4edf-92c6-85de2b33d1bb", "Firstname":"Jacky", "Lastname":"Chan", "DateOfBirth":"1963-09-18T00:00:00", "CreateDate":"2015-12-11T09 ...

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

I am currently passing the response of this action in text form, but I would like to display it in a table format. Is there a way to do this? function loadAditivos(){ $('#aditivoAbertoInformacoesTexto').html('<div id="loaderMaior ...

Using Node.js for a game loop provides a more accurate alternative to setInterval

In my current setup, I have a multiplayer game that utilizes sockets for asynchronous data transfer. The game features a game loop that should tick every 500ms to handle player updates such as position and appearance. var self = this; this.gameLoop = se ...

Proper approach for mapping JSON data to a table using the Fetch API in a React.js application

Struggling to map some elements of JSON to a Table in Customers.jsx, but can't seem to figure out the correct way. How do I properly insert my Fetch Method into Customers.jsx? Specifically managing the renderBody part and the bodyData={/The JsonData/} ...

Problem with bcrypt npm installation on Mac OS X 10.9 and Node v0.10.22

Operating System Information: Mac OS X 10.9 Node version: v0.10.22 An error occurs when attempting to install the bcrypt package. Any suggestions on how to resolve this issue? Any assistance would be highly appreciated. > [email protected] install /U ...

The behavior of the "checked" attribute in VueJS checkboxes does not always match their actual state

In this example, I have created a todo-list with checkboxes that can be checked or unchecked based on whether a task is completed or not. If you uncheck a checkbox in the "Complete tasks" section, the next checkbox will also appear unchecked even if it is ...

Struggling to fully understand and implement jQuery's click() method, as well as navigate event.data

Currently, I am in the process of developing a small script that allows users to dynamically change the background image of a webpage for design comparison purposes. Although I have a basic version working, I am facing a minor issue that I am determined t ...

Modify the base URL with JavaScript

Is it possible to dynamically change the href using JavaScript? I attempted to make this change with the code below in my HTML file, but unfortunately, it didn't work: <base href="/" /> <script type="text/javascript"> function setbasehr ...

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Apologies in advance if this question has already been addressed, and I am struggling to adapt it to my specific scenario. My objective is to adjust the positioning of the two images shown in the screenshot example below so that they align with the grey b ...

Create artwork by drawing and adding text to an image before saving it

I am looking to enhance my website by adding a feature that allows users to draw on images hosted on the server. Additionally, I want users to have the ability to add text to the image and save their edits as a new picture. While it may seem like a simple ...