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

Getting Grid to bind to .asmx web service

2 Answers 1070 Views

Data Source

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

Adam asked on 01 Nov 2011, 06:30 PM

Hello,

At our company, we are using the OutSystems platform to publish .asmx Web Services that we can consume in client side software. I am trying to get the KendoUI grid to work with the .asmx Web Services, but I am having trouble getting any data. I am new to javascript and KendoUI, so really dumbing it down can help. Do I need to create a service reference in my asp.net application for the service and then point the grid to that code file, or can I consume the service directly. I read the other posts in the forum about the xml web service, but still can't get it to work.

Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Kendo2.aspx.cs" Inherits="VSKendo.Kendo2" %>

<!doctype html>

<html>

<head>

<title>Grid virtualization using remote data</title>

<link href="Styles/kendo.examples.css" rel="stylesheet" />

<link href="Styles/kendo.common.css" rel="stylesheet" />

<link href="Styles/kendo.kendo.css" rel="stylesheet" />

<script src="Scripts/kendo.jquery.js" type="text/javascript"></script>

<script src="Scripts/kendo.core.js" type="text/javascript"></script>

<script src="Scripts/kendo.data.js" type="text/javascript"></script>

<script src="Scripts/kendo.data.odata.js" type="text/javascript"></script>

<script src="Scripts/kendo.draganddrop.js" type="text/javascript"></script>

<script src="Scripts/kendo.grid.js" type="text/javascript"></script>

<script src="Scripts/kendo.groupable.js" type="text/javascript"></script>

<script src="Scripts/kendo.pageable.js" type="text/javascript"></script>

<script src="Scripts/kendo.people.js" type="text/javascript"></script>

<script src="Scripts/kendo.sortable.js" type="text/javascript"></script>

<script src="Scripts/kendo.data.xml.js" type="text/javascript"></script>

</head>

<body>

<form id="Mainform" runat="server">

<div class="description">

Grid virtualization using remote data</div>

<div id="example" class="k-content">

<script>

$(document).ready(function ()

{

$("#grid").kendoGrid({

dataSource: {

transport: {

read: "http://loclahost/RCMPPMHub/PricingServices.asxm/GetPricingSourceList"

}

},

height: 280,

columns: ["PricingSourceName"]

});

</script>

<div id="grid">

</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 11 Jan 2012, 04:13 AM

I was able to get a simple grid fully functional based on the weapons video at http://www.kendoui.com/videos.aspx called Get Started with the KendoUi Data Source.

I built an .asmx web service in asp.net, and I am posting the code here.

My solution requires you to have jquery.js working on your html page, and for you to set up a .asmx file that supplies web services in JSON format to read, create/update, and delete a list of Japanese weapons. I leave it to the reader to implement their database connection of choice in C# code.

Home.html page

<!doctype html>

<html>

<head>

<title>Demo</title>

<link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.7.1.min.js"></script>

<script src="Scripts/kendo.all.min.js"></script>

</head>

<body>

<table>

<tr>

<td>

<h1>

Weapons

</h1>

</td>

</tr>

</table>

<div id="mainSplitter" style="height:300px">

<div id="LeftPane">

<h3>

Create</h3>

<dl>

<dt>Name:</dt>

<dd>

<input type="text" id="create-name" /></dd>

<dt>Description:</dt>

<dd>

<textarea rows="5" cols="20" id="create-description"></textarea></dd>

<dd>

<button id="create-weapon">

Create</button></dd>

</dl>

</div>

<div id="MiddlePane">

<div id="weapons">

</div>

<div id="RightPane">

<h3>

Edit</h3>

<dl>

<dt>Name:</dt>

<dd>

<input type="text" id="update-name" /></dd>

<dt>Description:</dt>

<dd>

<textarea rows="5" cols="20" id="update-description"></textarea></dd>

<dd>

<span>

<button id="update-weapon">

Update</button>

<button id="delete-weapon">

Delete</button></span></dd>

</dl>

</div>

<script>

$(document).ready(function ()

{

$("#mainSplitter").kendoSplitter({

//It is best to set the height of a splitter in the div style in the html above. see <div id="mainSplitter" ...>

//Make three panes in the three dives that comprise the splitter and sent their width in terms of percentage.

panes: [{ size: "20%", resizable: false },

{ size: "60%", resizable: false, scrollable: false },

{ size: "20%", resizable: false }, ]

});

var Weapon = kendo.data.Model.define({

id: "WeaponID"

})

//All of the operations in the data source must be specified of type POST becaue we are using an .asmx service.

dataSource = new kendo.data.DataSource({

transport: {

read: {

type: "POST",

contentType: "application/json; charset=utf-8",

url: "JSON.asmx/GetWeapons",

dataType: "json"

},

//I remove the create event because it would end up reading the data before it was saved.

//create: {

// type: "POST",

// url: "JSON.asmx/UpdateWeapons",

// success: function ()

// {

// dataSource.read();

// }

//},

update: {

type: "POST",

url: "JSON.asmx/UpdateWeapons"

},

destroy: {

type: "POST",

url: "JSON.asmx/DeleteWeapons"

}

},

schema: {

data: "d",

model: Weapon

}

});

var selectedWeapon;

$("#weapons").kendoGrid({

columns: [{ title: "Weapon", field: "Name" },

{ title: "Description", field: "Description"}],

dataSource: dataSource,

selectable: true,

change: function ()

{

var id = this.select().data("id");

selectedWeapon = this.dataSource.get(id);

$("#update-name").val(selectedWeapon.get("Name"));

$("#update-description").val(selectedWeapon.get("Description"));

},

scrollable: true,

height: 300

});

//The javascript to create a new weapon

$("#create-weapon").click(function ()

{

var name = $("#create-name").val();

//If the name is empty don't save it.

if (name == "") {

alert("Please specify a name for the weapon.");

return;

}

else {

//A better approach that uses ajax and does the read after the data is successfully saved.

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "JSON.asmx/UpdateWeapons?Name=" + $("#create-name").val() + "&Description=" + $("#create-description").val(),

success: function ()

{

dataSource.read();

}

});

//Suggested Approach by Kendo site that is flawed because the read will execute before new records are saved into the database.

// //Add to the data source from the newly created fields.

//                    dataSource.add({ Name: $("#create-name").val(), Description: $("#create-description").val() });

//                    //This will call the create method in the data source, because we just added a record.

// dataSource.sync();

//                    setTimeout("dataSource.read()", 1000); //Wait one second before refreshing the datasource because the create method takes a second.

//Clear the Create fields.

$("#create-name").val('');

$("#create-description").val('');

}

});

//The javascript to update a weapon

$("#update-weapon").click(function ()

{

selectedWeapon.set("Name", $("#update-name").val());

selectedWeapon.set("Description", $("#update-description").val());

dataSource.sync();

});

//The javascript to delete a weapon

$("#delete-weapon").click(function ()

{

dataSource.remove(selectedWeapon);

dataSource.sync();

});

</script>

</body>

</html>

JSON.asmx web service

using System.Web.Services;

using System.Web.Script.Services;

namespace JSONService4

{

/// <summary>

/// Summary description for JSON

/// </summary>

[WebService(Description = "An ASP.Net version 4.0 JSON web service.", Namespace = "http://localhost/")]

[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.

[ScriptService]

public class JSON : System.Web.Services.WebService

{

[WebMethod(Description = "Returns the list of Japanese weapons.")]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public Weapons[] GetWeapons()

{

//Put code here to read from the database, but you must return a simple array[] of Weapons objects

}

[WebMethod(Description = "Adds to or updates the list of Japanese weapons.")]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public void UpdateWeapons()

{

int weaponID = 0;

//If we can't parse the WeaponID parameter then there isn't any, and this is a create.

if (this.Context.Request["WeaponID"] != null)

weaponID = int.Parse(this.Context.Request["WeaponID"].ToString());

string name = this.Context.Request["Name"];

string description = this.Context.Request["Description"];

//Put code here to connect to the database and do your update or insert, depending on if the id > 0 or id = 0

}

[WebMethod(Description = "Deletes from the list of Japanese weapons.")]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public void DeleteWeapons()

{

int weaponID = 0;

//If we can't parse the request then there isn't any, and this is a create.

int.TryParse(this.Context.Request["WeaponID"].ToString(), out weaponID);

string name = this.Context.Request["Name"];

string description = this.Context.Request["Description"];

//Put code here to connect to the database and delete the weapon from the Weapons table.

}