CODEWITHSUNDEEP
jquerytelerikkendo-ui
Daniel
Daniel

Reputation: 5732

How to bind data to a kendoui grid from an ajax query?

I have a datepicker and a grid on a page. I want the grid to be populated based on the date in the datepicker. I have done this with a Telerik mvc grid using grid.dataBind.

var grid = $('#Grid').data('tGrid');
var pDate = document.getElementById('DatePicker').value;
$.ajax(
{
  type: 'POST',
  url: '/Home/AccountSummary/',
  dataType: 'json',
  data: { date: pDate },
  success: function (result) {
    grid.dataBind(result);
  }
});

Now I want to do the same thing except with the Kendoui grid. I know I need to get the grid by using $('#Grid').data('kendoGrid'). But how do I bind my result to the grid?

Upvotes: 16

Views: 56248

Answers (4)

Kiran
Kiran

Reputation: 191

You can bind Json results to the grid. And also you can pass Model if you need to. See the code snippet below for example.

See here for more details.

$('#FindBtn').click(function (e) {
    e.preventDefault();
    var UserDetails =
    {
        "FirstName": document.getElementById('FirstName').value,
        "LastName": document.getElementById('LastName').value,
    };
    $.ajax({
        url: "SearchJsonRequest",
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(UserDetails),
        dataType: "json",
        success: function (data) {
            var grid = $('#AssociateSearch').getKendoGrid();
            grid.dataSource.data(data);
            grid.refresh();
        }
    });
    return false;
});

Upvotes: 4

AndroC
AndroC

Reputation: 4884

To extend on Igorrious... That exact answer didn't help me but it lead me to an answer.

What worked for me:

$.ajax(
  {
    type: 'POST',
    url: '/Controller/Action',
    data: {
      paramKey: paramValue
    },
    success: function (result) {
      $("#my-grid").data("tGrid").dataBind(result);
    }
});

If this doesn't help you, do some javascript debugging to find out why some of the elements in chain [$("#my-grid")] . [data("tGrid")] . [dataBind] have value == 'undefined'.

Upvotes: 0

phyrisrose
phyrisrose

Reputation: 131

You can also do it this way:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            $.ajax({
                type: "POST",
                url: "Controller/Handler",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({key: "value"}),
                success: function(data) {
                    options.success(data);
                }
            });
        }
    }
});

Then bind it to the grid:

var grid = $("#grid").kendoGrid({
    dataSource: dataSource
}

This way you can add the rest of the CRUD actions to your transport and you will have all your code in one place.

Upvotes: 10

Igorrious
Igorrious

Reputation: 1618

Assuming the result variable contains an array of javascript objects, and it contains data for the same number of columns as the original mark up.

ie. result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];

Try the following:

$.ajax(
{
    type: 'POST',
    url: '/Home/AccountSummary/',
    dataType: 'json',
    data: { date: pDate },
    success: function (result) {
        $("#Grid").data("kendoGrid").dataSource.data(result);
    }
});

Upvotes: 23

Related Questions