Post
Ask Question
alaa

alaa

  • NA
  • 166
  • 84.8k

kendo grid from json asp.net

Jun 29 2014 2:03 PM
hi everybody 
This is my first time i follow kendo i write this code to fill  grid  my js code is 
$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: function(options) {
                    $.ajax({
                        url: "http://localhost:3888/kendogrid.aspx/GetUserList",
                        dataType: "json",
                        success: function(result) {
                            options.success(result);

                        },
                        pageSize: 10,
                        schema: {
                            data: function(response) {
                                return response.d;
                            }
                        }
                    });
                },
                batch: true,
                schema: {
                    type: 'json',
                    model: {
                        id: "U_ID",
                        fields: {
                            U_ID: { type: "string" },
                            U_UserName: { type: "string" },
                            U_FullName: { type: "string" }
                          }
                    }
                },
                pageSize: 10
            },
            height: 430,
            filterable: true,
            groupable: true,
            sortable: true,
            pageable: true,
            columns: [{
                    field: "U_ID",
                    title: "U_ID",
                    width: 140
                }, {
                    field: "U_UserName",
                    title: "U_UserName",
                    width: 190
                }, {
                    field: "U_FullName",
                    title: "U_FullName"
                }]
        }
    });
});
               


my bage code 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="kendogrid.aspx.cs" Inherits="kendogrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   
     
        <link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />
    <link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />
    <script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>
    <script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>
    <script src="Scripts/alaa.js"></script>
    
 

</head>
<body>
    <form id="form1" runat="server">
    
        
         <div id="grid">
        </div>

   
    </form>
</body>
</html>


and this my code behind 

using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class kendogrid : System.Web.UI.Page
{
   

    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

   
    [WebMethod]
    public static string GetUserList()
    {
        string strConnString =ConfigurationManager.ConnectionStrings["books_alaaConnectionString"].ConnectionString;

        using (SqlConnection con=new SqlConnection(strConnString))
        {
            using (SqlCommand cmd=new SqlCommand("Select * from Tbl_Users"))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    DataTable dt=new DataTable();
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                    
                }
            }
        }
    }

   
      
}

and now as i read  and follow examples i do whats  next to finish my code and work can any one help??