Post
Ask Question

Kendo Datasource With Remote Data Binding

Introduction

Kendo data source supports CRUD (Create, Read, Update, Delete) operations. It provides both client-side and server-side sorting, paging, filtering, aggregates, and grouping. In this blog, you will learn how to do ajax calls/ remote data binding with the kendo data source, which can be shared across different widgets. 

Kendo DataSource

Kendo data source can be initialized using kendo.data.DataSource object. The basic information required while doing a remote call is URLs and the request type. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
    <h4>Kenod Grid</h4>
    <div id="grid"></div>
    <script>
        var DataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "https://www.testjsonapi.com/products/",
                    dataType: "json"
                }
            }
        });

   
        $("#grid").kendoGrid({
            dataSource: DataSource,
            columns: [
                {
                    field: "product_title",
                    title: "Title"
                },
                {
                    field: "product_price",
                    title: "Price",
                    
                }]
        });
    </script>
</body>
</html>

From the above code, you can observe the kendo Datasource making a remote call and the data source is assigned for a kendo Grid binding. 

One of the advantages of having a kendo data source as a separate block is, it can be shared across different widgets. 

var DataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://www.testjsonapi.com/products/",
            dataType: "json",
            type: "get",
            data: {
                id: 1
            }
        }
    }
});

You can also pass the custom parameters during the data request. 

 

Conclusion

We have seen how to use kendo data source with remote data binding. You can explore more about kendo data source here. 

Happy Coding !!!

Click here to get the source code.