Questions on Kendo UI for jQuery Forum

0 answers

733 views

Working asp.net web service with kendo data source and Grid.

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. Also, one must create the Weapons class in code or have it defined in a web service they subscribe to in the 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. This could even be a call to another .asmx service like Outsystems to do the dirty work.

}

[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. This could even be a call to another .asmx service like Outsystems to do the dirty work.

}

[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.  This could even be a call to another .asmx service like Outsystems to do the dirty work.

}

Data Source

asked on 11 Jan 2012

2 answers

1.1K+ views

Getting Grid to bind to .asmx web service

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>

Data Source

answered on 11 Jan 2012

2 answers

889 views

Examples of async saveUrl datahandlers?

We've used many photo up-loaders in the past, uploadify is our current choice. However, I just bought the Nov30th v1, and wouldn't mind migrating most code to the various widgets KendoUi offers. I've tried using firebug to figure out our own data handler (simple copy/paste at first and later resizing photos). We currently have uploadify producing nine sizes of photos for us ranging from thumbs to full size.

Can someone post a sample data handler (processUpload.php) to get us started?

Upload

answered on 11 Jan 2012

0 answers

147 views

ajaxRequest problem

Hi!

The splitter is attaching to the DOM correctly on init. However when I try to use the ajaxRequest method, I can't seem to get it to work.

The ajaxReuqest method isn't documented very well (http://www.kendoui.com/documentation/ui-widgets/splitter/methods.aspx
and i'm not sure how to get ahold of it again after it's been loaded on the page. I set up a simple test:

<script>
jQuery(document).ready(function () {
jQuery("#splitter").kendoSplitter({
panes: [
{ min: "100px", max: "300px" },
{ contentUrl: "/test.htm" }
]
});

jQuery("#test").live("click", function () {
var splitter = jQuery("#splitter");
splitter.ajaxRequest("#Panel", "/test2.htm");
});
});
</script>

<div id="splitter">
<div style="max-width:300px;">
<div style="text-align:center;">
<asp:TextBox runat="server" ID="boxSearch" Width="300" />
<asp:Button runat="server" ID="btnSearch" Text="Search" />
</div>
</div>
<div id="#Panel">
</div>
</div>
<input type="button" id="test" value="test"/>

Please help.
Thanks!

Splitter

asked on 11 Jan 2012

0 answers

226 views

Reuse existing datasource; Rebinding a dropdownlist

I have created a datasource (verified the results retrieved) then I try to use it when initializing a dropdownlist. The dropdown list is rendered but not populated with any data. Also how do I refresh the dropdown after the datasource results have changed? I realize that I can't reinitialize the original element multiple times. Thanks!

Sample Code:

var myDataSource = new kendo.data.DataSource({
transport: {
  read: {
   url: '@Url.Action("Method", "Entity", new { Area = "Area" })',
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: { param1: param }
  }
},
change: function (event) {
  $("#INPUT").kendoDropDownList({
       dataTextField: "Text",
       dataValueField: "Value",
       dataSource:
              {
              data: myDataSource
              }
        }
   });

DropDownList

asked on 10 Jan 2012

4 answers

213 views

Menu with MVC 3 Razor

Are there any examples of using the Kendo Menu with ASP.NET MVC 3? I tried using the code from the example in a layout page but get the following error.
Microsoft JScript runtime error: Unable to get value of the property 'close': object is null or undefined

Menu

answered on 10 Jan 2012

1 answer

94 views

Menu is closing event on close event I called e.preventDefault(true) method too

Hey Guys,

kindly help me with this problem I have KendoDropDownList in sub menu when i select item from KendoDropDownList it closes sub menu too even I called e.preventDefault() method on both Menu and KendoDropDownList. here is the html.

<ol id="ActionMenu">
<li>Search
<ul style="right: 1px">
                            <li>
                                <div style="width: 600px; height: 450px" id="SearchContainer">
                                    <ol class="OL-Half">
                                           <li><span class="title">Owner</span><select id="OwnerDropDown" >

                                            </select><<li>
                                    </ol>
                               </div>
                            <li>
<ul>
<li>
</ol>

many thanks in advance

Ali Zaidi

Menu

answered on 10 Jan 2012

7 answers

155 views

Windows Phone 7 support?

Hi,

Does Kendo UI support Windows Phone 7?

Thanks,
Charles Gamble

General Discussions

answered on 10 Jan 2012

3 answers

126 views

Line Chart Concerns

Greetings!!!!
Merry Christmas

Actually i am using Line Chart for doing POC for one financial website, two concerns/problems that i am facing

1) Chart where X axis starting with "0". For example stock price of Microsoft is $ 26.03 and there will be change of 6% in a whole day, then chart should start with above value of $26.03 as a starting value and not "0", else the entire chart will appear as a straight line.

2) On creating line chart, on each value there is a pointer (small round shape) which actually creating issue for displaying the chart properly. So i want to remove the same.

Kindly help me in acheiving the same. Thanks in advance

Regards
Manash Dutta

Charts

answered on 10 Jan 2012

1 answer

207 views

Chart Resizing Issue

Hi,

I have kendo ui tab control where each tab has a chart and a grid in it. The grids are appropriately resizing with the window, however the first displayed chart is filling the display width, but not resizing, while the rest of the charts are in some default size and are not resizing with the window appropriately.

Has anyone encountered this issue, and do they have any advice or suggestions?

Thanks in advance,

Jon

Charts

answered on 10 Jan 2012