Developing Your Kendo Grid's Update Functionality using Asynchronous

There seems to be an issue in the success function of the RssCek Function in HomeController. While the HomeController RssCek function returns successfully, I am unable to bind it with the grid. HomeController RssCek function return part

        return Json(feedler, JsonRequestBehavior.AllowGet);

JavaScript Script Function

<script>
    function select(e) {
        var value = $(e.item).find("> .k-link").text();

            $.ajax({
                url: '@Url.Action("RssCek", "Home")',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: { value: value },
                success: function (feedler)
                {
                    var g = $("#grid").data("kendoGrid");

                    g.dataSource = new kendo.data.DataSource({ data: feedler });
                    g.dataSource.read();
                    g.refresh();
                },
                error: function (request, status, error)
                {document.write(request+"++"+ status+"++"+ error);}
                });
    }

</script>
javascriptajaxjsonasp.net-mvc-3kendo-grid

Answer №1

If you want to set the data source for a Kendo grid, you can use the following code snippet:

var dataSource = new kendo.data.DataSource({
  data: feedler 
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);

An efficient approach is to define the transport properties within the data source of the grid. By specifying read, create, and update methods in the data source itself, you can avoid creating separate data sources for each operation. Simply call the read method when needed like this:

var g = $("#grid").data("kendoGrid");
g.dataSource.read();

This will refresh the data from the server whenever necessary.

Answer №2

Give this a try:

<script>
    function choose(e) {
        var content = $(e.item).find("> .k-link").text();

            $.ajax({
                url: '@Url.Action("RssCek", "Home")',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: { content: content },
                success: function (feedler)
                {



 $("#grid1").html('');
                       $("#grid1").kendoGrid({
                       dataSource: feedler,
                       sortable: true,
                       pageable: {
                           refresh: true,
                              pageSizes: true
                              },
                            columns: [{
                                         field: "SampleDescription",
                                       width: 90,
                                     }, {
                            field: "SampleCode",
                              width: 90,
                               }, {
                                 width: 100,
                                field: "SampleItems"
                                  }
                                 ]
                                });;
                },
                error: function (request, status, error)
                {document.write(request+"++"+ status+"++"+ error);}
                });
    }

</script>

Show

<div id="grid1">
    </div>

Or use the same grid setup

  <script>
        function choose(e) {
            var content = $(e.item).find("> .k-link").text();

            $.ajax({
                url: '@Url.Action("RssCek", "Home")',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: { content: content },
                success: function (feedler)
                {


                $('#grid').data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result });
                    $('#grid').data("kendoGrid").dataSource.read();
                    $('#grid').data("kendoGrid").refresh();
}

</script>

The field names are just placeholders in this example.

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

Tips for updating the border color of a button:

Struggling to alter the border color of a button Attempting borderColor attribute proved futile: borderColor: '#FFFFFF' Anticipated result Code snippet: headerBtn: { backgroundColor: 'black', fontSize: '16px', f ...

javascriptbuttonnext.jscolorsborder

Encountering a situation where an empty object is received while attempting to send a

While using Postman to make a request to the API I created for Social Media Application that involves following and followers functionality, I noticed that I am receiving an empty object: {}. However, upon inspection, everything seems to be correct on my e ...

javascriptnode.jsmongodbexpressmongoose

Exploring the population with embedded RxJs queries

I'm struggling to find a solution to this particular issue. Imagine there is an object type described as follows: Box { Fruit[n]: { Kinds[n]: { id: string; name: string; } } } From an API call, I received a bo ...

javascriptangularrxjsrxjs5reactive-extensions-js

Unable to establish connection with an API endpoint on my Express server

Exploring the world of Express for the first time, I'm currently facing difficulties in establishing a connection to an API. Below you can find the code snippet that's causing me trouble: const express = require("express"); const session = requi ...

javascriptexpress

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

Manipulating data in textarea using datatables

I am attempting to implement functionality where the clicked row in a datatables is added to a textarea. If the same row is clicked again, the data should be searched in the textarea and removed if found (select/deselect). When I select one row followed b ...

javascriptjquery

Avoiding useCallback from being called unnecessarily when in conjunction with useEffect (and ensuring compliance with eslint-plugin-react-hooks)

I encountered a scenario where a page needs to call the same fetch function on initial render and when a button is clicked. Here is a snippet of the code (reference: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx): import ...

javascriptreactjstypescriptreact-hookseslint-plugin-react-hooks

I'm experiencing a roadblock due to ng-submit not functioning as expected, failing to execute when clicked

I'm currently enrolled in an online course and I've hit a roadblock with one of my assignments. The assignment involves a form with a submit button that triggers certain code upon clicking. However, when I click the submit button, the code doesn& ...

javascriptangularjsformscontrollerangular1.6

Having trouble accessing the data from a $http.post request in Node.js response body

For my current project, I am utilizing Angular 1.3 and node.js 0.12.2. When hitting the node.js API, I use the following code: $http.post("url", request_data){} On the server side, I log the request data using: console.log(req.body) However, each time ...

angularjsjsonnode.jshttp-post

Encountering difficulties in sending the data to Firebase through the contact form

import React, { useState } from 'react' import styled from 'styled-components' import Title from '../Components/Title' import { InnerLayout, MainLayout } from '../Styles/Layout' import ...

javascriptreactjsfirebasegoogle-cloud-firestore

JavaScript division of decimal numbers can be achieved using the division operator (/)

Here's a code snippet that increments by 0.001 on each loop. However, after a certain point, we want to display only two decimal places instead of three. For example, when the value reaches 0.01 on the 10th loop, we only want to show two numbers past ...

javascript

Tips for matching variable content with button identification to display content within a variable for ThreeJS?

I'm currently working on a project using Three.js where I need to load multiple 3D models and store them in an array. Each model has a corresponding button with a unique ID that when clicked, should add that specific model to the scene and remove any ...

javascripthtmlthree.js3d-model

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

When it comes to displaying different options based on user selection, the following HTML code is what I've been using: <select class="form-control input-lg" style="text-align:center"> <option value="type">-- Select a Type --</opti ...

javascriptjqueryhtml

User control within an enclosed UpdatePanel

I have developed a customized user control with buttons and a placeholder to dynamically add or remove controls. The functionality is working perfectly. Now, I am trying to integrate this user control into a page and envelop it within an update panel as s ...

asp.netajaxupdatepaneluser-controls

Javascript code for toggling the visibility of a div element not functioning as expected

This problem is becoming quite frustrating as it appears to be straightforward but still doesn't work. Inside my document, I have <div id ="splashscreen" style="display:block"> <h3>title</h3> <p>text</p> &l ...

javascriptcss

Encountering a TypeError in Node.js: "Error - res.setHeader doesn't exist as a function"

I am attempting to retrieve JSON data from a URL, assign it to a variable, and then send it back to the client's javascript. var getJSON =require('get-json'); app.post('/json', function(req, res) { getJSON(url, function(err, ...

javascriptnode.jsexpressgetjson

How can I retrieve PHP code output within a jQuery function?

In my CodeIgniter project, I am trying to generate a unique ID using PHP by calling the random_string() function: function coding(){ echo random_string('unique'); } I want to use the result of this function in an AJAX jQuery call (to be use ...

phpjavascriptjquery

Guide to Implementing npm Package 'latlon-geohash' in Angular 7

I'm encountering an issue while attempting to utilize the latlon-geohash npm package within my Angular 7 application. When I execute it, I encounter the following error... ERROR TypeError: latlon_geohash__WEBPACK_IMPORTED_MODULE_8__.encode is not ...

javascriptnode.jsangulartypescriptecmascript-6

Main.js creation issue in AngularJS 2

After meticulously following the Angular JS2 TypeScript tutorial and setting up the correct paths, I encountered an issue when testing in the browser. The error message states that it cannot locate the main.js file. Even after starting npm, the console dis ...

javascriptnode.jsangulartypescript

Ways to retrieve the positioning data for an element from its top to the container

Is there a way to accurately retrieve the coordinates of a box within an image, not just based on the screen size but specifically on the image itself? Currently, I am using getBoundingClientRect(). What approach can I take to achieve this? Here is the co ...

javascriptjquery