This is a migrated thread and some comments may be shown as answers.

Fill kendo grid with xml data returned from webservice

1 Answer 147 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ahmed
Top achievements
Rank 1
Ahmed asked on 02 Dec 2012, 01:56 PM
I'm trying to create a keno grid and fill it from db with addresses data. When I run the application neither the grid nor data displayed. This is the web service code:

namespace SmartFramework.ControllerWebServices
{
    /// <summary>
    /// Summary description for SalesWebService
    /// </summary>
    [WebService(Namespace = "http://localhost:56785/ControllerWebServices/SalesWebService.asmx")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class SalesWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public XmlDocument GetAddresses()
        {
            XmlDocument myDocument = new XmlDocument();
            string temp;
            AddressBE myAddress = new AddressBE();

            myAddress.LoadAll();
            temp = myAddress.ToXml();
            myDocument.LoadXml(temp);
            return myDocument;
        }
    }
}

This is the aspx page code that contains the keno grid and datasource:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Address.aspx.cs" Inherits="SmartFramework.UIL.Address" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Address</title>
    <link href="Kendo-UI/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Kendo-UI/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="Kendo-UI/js/jquery.min.js" type="text/javascript"></script>
    <script src="Kendo-UI/js/kendo.web.min.js" type="text/javascript"></script>
    <!--<link href="Kendo-UI/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />-->
    <script src="Kendo-UI/js/jquery.min.js" type="text/javascript"></script>
    <!--<script src="Kendo-UI/js/kendo.dataviz.min.js" type="text/javascript"></script>-->
</head>
<body>
    <!--<form id="form1" runat="server">-->
    <div>
       <script>
           $(document).ready(function () {
           //alert("hii");
               $("#grid").kendoGrid({
                   dataSource: {
                       //type: "POST",
                       transport: 
                       {
                           read:{ 
                                    type: "POST",
                                    url: "http://localhost:56785/ControllerWebServices/SalesWebService.asmx/GetAddresses",
                                    //contentType: "application/json; charset=utf-8",
                                    dataType: "xml",
                                    processData: false,
                                    data: xmlstring
                               }
                       },
                       schema:
                       { 
                           data: "//Address",
                           model: 
                           {
                               fields: 
                               {
                                   AddressID: { type: "number" },
                                   AddressLine1: { type: "string" },
                                   AddressLine2: { type: "string" },
                                   City: { type: "string" },
                                   StateProvince: { type: "string" },
                                   CountryRegion: { type: "string" },
                                   PostalCode: { type: "string" },
                                   rowguid: { type: "number" },
                                   ModifiedDate: { type: "string" }
                               }
                           }
                       },
                       pageSize: 10,
                       serverPaging: true,
                       serverFiltering: true,
                       serverSorting: true
                   },
                   height: 250,
                   filterable: true,
                   sortable: true,
                   pageable: true,
                   columns:
                   [
                      {
                        field: "AddressID",
                        title: "ID"
                      },
                      {
                        field: "AddressLine1",
                        title: "AddressLine1"
                      },
                      {
                        field: "AddressLine2",
                        title: "AddressLine2"
                      },
                      {
                        field: "City",
                        title: "City"
                      },
                      {
                        field: "StateProvince",
                        title: "StateProvince"
                      },
                      {
                        field: "CountryRegion",
                        title: "CountryRegion"
                      },
                      {
                        field: "PostalCode",
                        title: "PostalCode"
                      },
                      {
                        field: "rowguid",
                        title: "rowguid"
                      },
                      {
                        field: "ModifiedDate",
                        title: "ModifiedDate"
                      }
                    ]
                   /*columns: [{
                       field: "OrderID",
                       filterable: false
                   },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 100,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 200
                            }, {
                                field: "ShipCity",
                                title: "Ship City"
                            }
                        ]*/
               });
           });
            </script>
    </div>
   <!-- </form>-->
</body>
</html>

Please note that I want the data to be as xml in order to call any webservice that returns data as xml. Anyone can help me to find the problem?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Dec 2012, 06:20 AM
Hi Ahmed,

The jQuery library is included after kendo.web.min.js which will prevent all Kendo widgets from working. Please include jQuery only once before KendoUI scripts. For more information see this help topic.

In case you still experience problems after correcting the JavaScript dependencies, please send me a sample of the XML data that is being returned by the server and I will do my best to help you configure the DataSource. 

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Ahmed
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or