Questions on Kendo UI for jQuery Forum

3 answers

165 views

I need to alter the url for my service based upon user input so am using a function something like this :-

url: function() {

return '/myservice/search/' + $("#txtSearch").val();

},

this does not seem to work .. the url gets mangled.

however if I use the same idea for the data: to pass extra parameters it works fine

How can I make the url a function so I can change the value?

Data Source

answered on 11 Jan 2012

3 answers

313 views

Resize the size of the Grid vertically

Hi,

Is there anyway to resize the grid vertically to the size of the window . Height should be auto (Full Size) 100% depending on the size of the window?

thanks

Grid

answered on 11 Jan 2012

2 answers

102 views

Access to Major and Minor Updates and Weekly Builds for 1 year

With our commercial license, where do we access the major/minor/weekly builds? The build that's in our download area is from November's release. Thanks!

General Discussions

answered on 11 Jan 2012

0 answers

206 views

Using jQuery selector to change "td" text value inside KendoGrid problem

My kendoGrid have many null cells in table td, How can I replace those null field by applying below js

$("td:contains('null')").text("something else") (it works when debugging code)

Thanks

Grid

asked on 11 Jan 2012

2 answers

134 views

[object] has no method collapse

Hello, I'm new to Kendo UI

I want you when click a button to collapse the splitter.

This is my code:http://jsfiddle.net/N8gE3/

When call the function I get a message:

Uncaught TypeError: Object [object Object] has no method 'collapse'

Please Help me

Splitter

answered on 11 Jan 2012

1 answer

179 views

type ODATA - no additional parameters??

If I set the type of datasource to "odata" additional parameters is not added to the request string. This is my code:

var odataSource = new kendo.data.DataSource({

type: 'odata',

transport: {

read: {

url: server + query, // the service url

data: { //additional parameters sent to the remote service

buchungskonto: function() {

return "'" + $("#search").val() + "'";

}

},

change: function() { // subscribe to the CHANGE event of the data source

$("#results").html(kendo.render(template2, this.view()));

}

});

The resulting request is:

/my.services/SalesData/GetCustomers()?$format=json&$inlinecount=allpages&$callback=callback

As you can see parameter "buchungskonto" is missing. It is a call to a wcf data service, GetCustomers() is mapping to some SP, "buchungskonto" one of the parameters passed to the SP. So the correct call should be:

/my.services/SalesData/GetCustomers()?$format=json&$inlinecount=allpages$callback=callback&buchungskonto='1'

Is this a bug?

Besides that: really great product! BUT, and this is a really big BUT: the documentation is not on the level I'm accustomed to from telerik. I think there is still a lot of work to do for you.

Regards
Heiko

Data Source

answered on 11 Jan 2012

1 answer

166 views

Loading Issues

Hello everyone, first of all sorry for the ambiguous thread name. Since the issue i'm experiencing could be grid, chart or even datasource issues, I'm posting it here. If that is not correct, I apologize a second time.

Following the examples on the site I have built a page with a chart and a grid. With $document.ready I load a few filters and the starting grid and chart, and there's a button right next to the filters to apply any changes to the "dataset" and change what's displayed.

Now, I'm having a little problem and it's that most of the time neither the grid nor the chart load, they appear empty or not at all. Using firebug I can see the requests to my datasource (I'm using a WCF Service and am calling it to return data in json format) have returned data, but the controls don't load.

If that were all, I'd think it was an issue with my configuration, maybe I was missing a property or two, but the strange thing, and what to me is the real issue is that if I refresh the page or click the button enough times, sometimes 2 or 3 times, then the controls will load, so it's not a matter of the data not being in the correct format, but on the next refresh they disappear again. In other words, the kendo controls on the page seem somewhat temperamental and only show up when they feel like it. I have tested with Chrome and even IE with the same results.

If anyone has any idea of why this might happen, I'd appreciate it if you could enlighten me, since it's driving me a tad bit crazy. I will post the code if necessary, just let me know.

Thanks for the time

General Discussions

answered on 11 Jan 2012

1 answer

108 views

Yellow outline box in Google Chrome

http://jsfiddle.net/CuQDc/5/light/

Selecting a row produces a yellow box around the grid.

Grid

answered on 11 Jan 2012

1 answer

76 views

Editing demo bug : Tabbing on new row

http://demos.kendoui.com/web/grid/editing.html

In this demo, click on 'Add new record' and then type in a product name. Hitting the TAB key does not bring up the next cell (UnitPrice) in edit mode.

After hitting the 'Add new record' button, only if you click on the row using a mouse, it works.

Perhaps a focus-logic issue tied specifically to the mouse click?

Thanks,
Joel

Grid

answered on 11 Jan 2012

0 answers

726 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