What is the best way to extract raw data from a kendo dataSource?

After fetching data for my Kendo grid from the backend and populating it in the

alignedProcessesToRiskGridOptions
, I noticed that while the data is displayed in the grid, I also need access to the raw data for additional logic. Is there a way to retrieve data from the dataSource or directly call the RiskService AngularJs factory to assign it to a variable like gridData?

ctrl.js

   $scope.alignedProcessesToRiskGridOptions = RiskService.alignedProcessToRiskGrid();
    $scope.alignedProcessesToRiskGridOptions.dataSource = RiskService.getAlignedProcessesToRiskGridDataSource($stateParams.riskId);
    gridData = $scope.alignedProcessesToRiskGridOptions.dataSource.data();
    console.log('RISK DATA', gridData);

factory.js

getAlignedProcessesToRiskGridDataSource: function(riskKey) {
        var countNew = 0;
        return new kendo.data.DataSource({
                    type: 'json',
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    transport: {
                        read: function(options) {
                            var gridSearchObject = {
                                skip: options.data.skip,
                                take: options.data.take,
                                pageSize: options.data.pageSize,
                                page: options.data.page,
                                sorting: options.data.sort,
                                filter: options.data.filter
                            };
                            return $http.post(
                                'app/risk/rest/allAlignedProcessesToRisk/' + riskKey, gridSearchObject).success(
                                function(data) {
                                    countNew = data.totalCount;
                                    options.success(data.resultDTOList);
                                });
                        }

                    },

Answer №1

When it comes to accessing data from a datasource in kendo, there are multiple methods available.

One option is using the view method

This method will retrieve the data items based on the current page, filter, sort, and group settings. It differs from the data method, which provides data items from all pages when using local data binding and paging.

Another approach is utilizing the data method

This method allows for getting or setting the data items within the data source.

If the data source is linked to a remote service through the transport option, the data method will return the service response with each item wrapped in a kendo.data.ObservableObject or kendo.data.Model (if schema.model is set).

If the data source is associated with a JavaScript array via the data option, the data method will return the items of that array with each item also wrapped in a kendo.data.ObservableObject or kendo.data.Model (if schema.model is set).

By using the data method, you can access the data through the resulting object's properties and methods.

You can verify the length of gridData with console.log(gridData.length), as well as inspecting individual objects within the data by specifying an array index like so: console.log(gridData[0]). Moreover, you can check object properties using

console.log(gridData[0].firstProperty)
.

If these methods do not work, it may be due to not checking the datasource in the context of query or fetch. In this example, the data evaluation occurs within the fetch function.

For more details about Kendo DataSource, refer to their online documentation.

Additionally, see how I implement the Kendo datasource in various ways in this question related to the kendo grid.

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

Pass Form ID To Function In A Dynamic Way

I have multiple forms on my webpage and I want to use the same ajax function for all of them. It currently works well for one form by fetching the id with getElementById and then passing it to the ajax function. My goal is to dynamically pass down the form ...

Is there a way to properly structure the json data displayed in my network tab on Chrome?

After sending an http request to my backend, I received a json response in the network tab. However, the format of the json is unreadable. To clarify, here is a screenshot: https://i.stack.imgur.com/RBiTd.png Currently using Chrome, I am seeking assistanc ...

ajax modal form editing

Encountered an issue with editing a form using modal ajax, where the edit form pops up but the data remains empty. The code snippet for my controller: public function edit() { $id=$this->uri->segment(3); $data=array( 'project' => $th ...

There seems to be an issue with the CSV file, possibly indicating an error or the file may not be an SYLYK file when

After developing a node.js script to convert an array object into CSV format using the "objects-to-csv" library from NPM, I encountered an issue when opening the generated CSV file in WPS and Microsoft Office. The warning suggested that there was either an ...

Checking User's Admin Permissions with AngularJS Service

I am currently working on a SharePoint App with AngularJS and I have created a service to determine whether the user is an Admin or not. The service is functioning correctly, but I'm unsure how to integrate it into a controller. My objective is to hav ...

Enhancing material appearance by incorporating color gradient through the extension of three.js Material class using the onBeforeCompile method

In my three.js scene, I have successfully loaded an .obj file using THREE.OBJLoader. Now, I am looking to add a linear color gradient along the z-axis to this object while keeping the MeshStandardMaterial shaders intact. Below is an example of a 2-color l ...

Can we safely save a value in session storage directly from the main.js file in Vue?

Throughout the user session managed by Vuex, I have a session storage value set to false that needs to be monitored. Setting up this value directly from the main.js file looks like this: import { createApp } from 'vue'; import App from './Ap ...

When utilizing Next.js, the router.push feature will automatically scroll the page to the top, even if the scroll option

Incorporating Next.js' built-in internationalisation features allowed me to seamlessly switch my app's language, but there is one specific issue I'm encountering: When I trigger the changeLanguage function, it causes the page to scroll back ...

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

Tips for eliminating checkboxes from a form

function addCheckbox(){ var labels = document.form1.getElementsByTagName('label'); var lastLabel = labels[labels.length-1]; var newLabel = document.createElement('label'); newLabel.appendChild(Checkbox(labels.length)); ...

Transform objects into arrays

Is there a way to transform an object into an array of objects while adding new keys and values? This is my current object: { "0": "Ann_B", "1": "Billy_P", "2": "Carly_C", "3": "David_L" } I would like it to look like this: [ { "value": "Ann_B ...

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

Encountering an unexpected issue with $urlMatcherFactory during an AngularJS service unit test

I am seeking guidance on writing a proper unit test for a service using the jasmine framework and karma as the test runner. Below is the implementation in example-service.js: export default class ExampleService { constructor($resource, $http, $urlMatcher ...

Stubborn boolean logic that refuses to work together

Seeking guidance on resolving a persistent issue with my website that has been causing me headaches for the past few weeks. This website was created as my capstone project during a recent graduate program, where I unfortunately did not achieve all the desi ...

Efforts to toggle visibility of icons in React

One issue I encountered is with the Navbar in mobile mode, where the icons are covering the menu. Refer to the image for a visual representation of the problem. To address this issue, my plan is to hide the icons when the hamburger icon is clicked. Below ...

Exploring and Troubleshooting HTML and JavaScript with Visual Studio Code Debugger

Visual Studio Code Version 1.10.2 Windows 10 I am currently experimenting with VS Code and would like to debug some basic HTML and JavaScript code. The instructional video found at http://code.visualstudio.com/docs/introvideos/debugging mentions that ...

The integration of <form> with jQuery Ajax error

I have come across this HTML form function FormSubmit (){ $.ajax({ url:'dotar.php', type:'post', data:$('form').serialize(), success:function(){ setTi ...

What is the most effective way to access nested elements by index in JavaScript?

I am looking to design a user-friendly form that presents questions for users to navigate, revealing different answers/questions based on their responses. For example: var json = { "Did you restart the computer?": [ { ...

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

What is the method to have VIM recognize backticks as quotes?

Currently working in TypeScript, I am hoping to utilize commands such as ciq for modifying the inner content of a template literal. However, it appears that the q component of the command only recognizes single and double quotation marks as acceptable ch ...