Questions on Kendo UI for jQuery Forum

4 answers

1.2K+ views

Hi;

I'm building a .NET web service that my application will consume. I've built the service to deliver JSON data. Using the .NET serializer the data looks like this:

<string xmlns="http://yaddayaddayadda.com/">

[{"title":"Stuff","value":"Here's some stuff"}]

</string>

Here's the web service:

[WebService(Namespace = "http://yaddayaddayadda.com/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

[ScriptService]

public class websiteWebService : System.Web.Services.WebService

{

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public string GetStuff(int stuff_id)

{

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["stuff"].ConnectionString);

connection.Open();

SqlCommand command = new SqlCommand("o_get_stuff", connection);

command.CommandType = CommandType.StoredProcedure;

command.Parameters.AddWithValue("@stuff_id", stuff_id);

SqlDataReader dr = command.ExecuteReader();

DataTable dt = new DataTable("Stuff");

dt.Load(dr);

dr.Close();

connection.Close();

List<Dictionary<string, object>> rows =

new

List<Dictionary<string, object>>();

Dictionary<string, object> row =

new

Dictionary<string, object>();

foreach (DataRow datarow in dt.Rows)

{

row = new Dictionary<string, object>();

foreach (DataColumn col in dt.Columns)

{

row.Add(col.ColumnName, datarow[col]);

}

rows.Add(row);

}

JavaScriptSerializer serializer = new JavaScriptSerializer();

string jsonData = serializer.Serialize(rows);

return jsonData;

}

Here is my javascript as it stands:

<script type="text/javascript">

$(document).ready(function () {

$("#stuffSelector").kendoDropDownList({

dataTextField: "title",

dataValueField: "value",

dataSource: {

transport: {

read: {

contentType: "application/json",

type: "POST",

url: "http://localhost:23035/Services/websiteWebService.asmx/GetStuff",

data: {

stuff_id: "0"

}

});

</script>

The problem I have is that the data array is wrapped in a <string>. How do I modify my datasource (or the web service) to provide just the array so that I can directly read the "title" and "value"? I'd like to drop something into the datasource schema but I don't know what will strip off the <string>.

Thanks!

Data Source

answered on 08 May 2013

5 answers

990 views

Grid grouping problem when using row template (bug?)

I have a grid with a row template. I have 'Grouping' enabled for the grid, however when attempting to group by a certain column for columns are not re-spaced correctly (having the group column removed normally automatically re-spaces the other columns to keep the data under the column headers). Without the template the spacing works as it should, but with the template the data rows align themselves to the left, meaning many items will now be under the wrong column header.

Here's my code.

The row template, the coloured css classes just change the back colour, and can be removed for testing:

<script id="WorkOrderGridRowTemplate" type="text/x-kendo-template">

<tr>

<td>

${workorderreference}

</td>

<td>

${clientdestination}

</td>

<td>

${productreference}

</td>

<td>

${orderquantity}

</td>

<td>

${unitofmeasure}

</td>

<td>

${releasedate}

</td>

<td>

${quotedduedate}

</td>

<td>

${currentsequenceindex}

</td>

<td>

# if (bufferpenetrationpercentage > 100) { #

<span class="bufferPenetrationBlack">${bufferpenetrationpercentage}</span>

# } else if (bufferpenetrationpercentage > 66) { #

<span class="bufferPenetrationRed">${bufferpenetrationpercentage}</span>

# } else if (bufferpenetrationpercentage > 33) { #

<span class="bufferPenetrationYellow">${bufferpenetrationpercentage}</span>

# } else if (bufferpenetrationpercentage > 0) { #

<span class="bufferPenetrationGreen">${bufferpenetrationpercentage}</span>

# } else if (bufferpenetrationpercentage <= 0) { #

<span class="bufferPenetrationBlue">${bufferpenetrationpercentage}</span>

# } else { #

ERROR: ${ bufferpenetrationpercentage }

# } #

</td>

</tr>

</script>

The grid code:

$("#divWorkOrderGrid").kendoGrid({

dataSource: {

data: <%= _JsWorkOrderRecords %>

},

rowTemplate: kendo.template($("#WorkOrderGridRowTemplate").html()),

height: "auto",

scrollable: false,

sortable: true,

groupable: true,

pageable: false,

columns: [

{

field: "workorderreference",

title: "W/O Ref."

},

{

field: "clientdestination",

title: "Client/Destination"

},

{

field: "productreference",

title: "Product Ref."

},

{

field: "orderquantity",

title: "Order Quantity"

},

{

field: "unitofmeasure",

title: "UoM"

},

{

field: "releasedate",

title: "Release Date"

},

{

field: "quotedduedate",

title: "Quoted Due Date"

},

{

field: "currentsequenceindex",

title: "Current Sequence Index"

},

{

field: "bufferpenetrationpercentage",

title: "Buffer Penetration (%)"

}

]

});

Here's some example data:
[{"workorderreference": "100036628","clientdestination": "MTA","productreference": "2CIN5319/012","orderquantity": 237600,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "23/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036629","clientdestination": "MTA","productreference": "2C3612/001","orderquantity": 231000,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "23/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036630","clientdestination": "CUSTOMER","productreference": "15504710","orderquantity": 215638.2,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "19/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036762","clientdestination": "CUSTOMER","productreference": "2C0388/030","orderquantity": 371950,"unitofmeasure": "M2","releasedate": "13/02/2012","quotedduedate": "22/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -340},{"workorderreference": "100036763","clientdestination": "CUSTOMER","productreference": "15504497","orderquantity": 10100,"unitofmeasure": "KG","releasedate": "13/02/2012","quotedduedate": "22/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -340},{"workorderreference": "100037089","clientdestination": "CUSTOMER","productreference": "2C0008/012","orderquantity": 273969.52,"unitofmeasure": "M2","releasedate": "26/01/2012","quotedduedate": "05/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -140},{"workorderreference": "100037090","clientdestination": "CUSTOMER","productreference": "15504960","orderquantity": 4251.84,"unitofmeasure": "KG","releasedate": "26/01/2012","quotedduedate": "05/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -140},{"workorderreference": "100037251","clientdestination": "CUSTOMER","productreference": "15505006","orderquantity": 16760.16,"unitofmeasure": "KG","releasedate": "10/02/2012","quotedduedate": "19/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -388},{"workorderreference": "100037503","clientdestination": "CUSTOMER","productreference": "2C0610/084","orderquantity": 74655,"unitofmeasure": "M2","releasedate": "23/12/2011","quotedduedate": "29/12/2011","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 500},{"workorderreference": "100037504","clientdestination": "CUSTOMER","productreference": "15501905","orderquantity": 70778.82,"unitofmeasure": "KG","releasedate": "28/12/2011","quotedduedate": "04/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 300}]

I've reproduced this on Firefox, Chrome, Safari and IE8 and 9. IE9 has another quirky issue, with random rows appearing out of sync with their column header when trying to display the ungrouped grid, but I'll leave that for the time being,

Grid

answered on 08 May 2013

2 answers

146 views

Difficulty implementing video player when using template

I am trying to get an instance of a video player (JWPlayer) to cooperate with a template I am using. I am very new to this so please forgive me if this solution is obvious to some.

Objective:
When a user clicks a kendo button on the default.aspx page, a kendo window pops up and is formatted based on a template I pass in. I'd like to display the video inside that kendoWindow inside of a div.

This javascript method is located inside my default.aspx:

function playVideoNow()

{

jwplayer("details-container").setup({

file: "https://www.contoso.com/example.m4v",

image: "https://www.contoso.com/example.png"

});

This is the template that I have sitting inside of default.aspx:

<script type="text/x-kendo-template" id="template">

<div id="details-container">

<h2>Video Name</h2>

<em>Video Date</em>

<dl>

<dt>Some Info: </dt>

<dt>Some More Info:</dt>

</dl>

</div>

# window.onload = playVideoNow() #

</script>

Problem:
When I open the kendoWindow, it complains that it cannot locate "details-container". I assume this is because it is out of scope for the window, since the javascript method is executing from default.aspx, it doesn't know that "details-container" exists.

Question:
So what is the proper way to implement this? Should I run jwplayer.setup() in the template? What would this look like? Some example code would really help to get me started.

Thanks,

Ray

Templates

answered on 08 May 2013

1 answer

83 views

Edit mode in Grid

Hi Kendo Team,

I've got a parent grid and in the detail view I've got another grid which is inside a panel. The problem here is, if I open the detail view of two records and click on edit of the first detail view grid and then click on edit of the second detail view grid, the edit mode goes haywire. I'm attaching the pictures of the scenario. Please have a look at the pictures, it didn't happen in Telerik MVC controls. May be I'm doing something wrong. Please let me know.

Thank you

Grid

answered on 08 May 2013

3 answers

1.3K+ views

Showing percentage in the Chart

please refer the attached sample chart

I have a requirement in which we have to show a stacked column chart with two series
we want to show every category in the category axis to be in a 100 % scale ,but in the data we will be sending only the absolute value not the percentage value, is it possible to achieve this ? if so please advice

Charts

answered on 08 May 2013

7 answers

906 views

Unwanted scrollbar/height applied to nested splitter

I can't figure out exactly why the scrollbar highlighted in the attached image is being applied. It looks to me like it stems from the css rule for .ksplitter:

.k-splitter {

height: 300px;

position: relative;

}

I've created a jsfiddle demonstrating the issue.

Fiddle: http://jsfiddle.net/MgspA/1/
Full screen result: http://jsfiddle.net/MgspA/1/embedded/result/

Splitter

answered on 08 May 2013

10 answers

467 views

Treeview load via ajax gives error when pushing items to options.success method.

Hi,

I am trying to create a kendo TreeView (html version) using the following code:

01.var div = $("#divColours");

02.var oid = "12312312", rnd = ((new Date()).getTime()).toString();

03.div.kendoTreeView({

04. dataTextField: "label",

05. dataSource: new kendo.data.DataSource({

06. type: "json",

07. serverFiltering: false,

08. transport: {

09. read: function (options) {

10. $.ajax({

11. url: "Controllers/GenericController.ashx?rnd=" + rnd,

12. dataType: "json",

13. data: { "parms": ko.toJSON({ cmd: "coloursroot", sysoid: oid }) },

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

15. success: function (payLoad) {

16. if (payLoad.Success) {

17. var i = ko.toJSON(payLoad.Items);

18. options.success(i);

19. } else {

20. };

21. },

22. error: function (jqXHR, textStatus, errorThrown) {

23. debugger;

24. },

25. complete: function () {

26. }

27. })

28. } //read

29. },

30. schema: {

31. model: { hasChildren: false }

32. } //transport

33. }) //datasource

34.});

At line 17 my payload items array (which actually is a JSON array) is converted to string and this is the result:

[{"label":"Zwart","value":"4","haschildren":"true"},{"label":"Wit","value":"1","haschildren":"true"},{"label":"Grijs","value":"7","haschildren":"true"},{"label":"Bruin","value":"8","haschildren":"true"},{"label":"Beige","value":"9","haschildren":"true"},{"label":"Rood","value":"10","haschildren":"true"},{"label":"Geel","value":"11","haschildren":"true"},{"label":"Groen","value":"12","haschildren":"true"},{"label":"Blauw","value":"13","haschildren":"true"},{"label":"Overige kleuren","value":"14","haschildren":"true"}]

Next I set the "options.success" with the result and this is giving me an exception (this exception occurs in the custom kendo js):
"Unable to get value of the property 'toLowerCase': object is null or undefined."

I have tried many things (like using integers for "value" and booleans for "haschildren") but could not find a solution to this problem. Also changed the model, but no success either.

Even when I (manually) change the result to a simplified array like :
"[{"label":"Zwart"},{"label":"Wit"},{"label":"Grijs"},{"label":"Bruin"},{"label":"Beige"},{"label":"Rood"}]"
The same error occurs!

Please help.

Regards,
Robert

TreeView

answered on 08 May 2013

1 answer

103 views

A few missing TypeScript definitions

Hello,

Just pulled down the 2013.1.506 bits and a few methods and properties are missing from some of the definitions. Here's what I've found:

interface FlatColorPickerEvent is missing "value:string"

AutoComplete.dataItem, ComboBox.dataItem and DropDownList.dataItem should be declared as "dataItem(index?: number): any;" given that the kendo.ui.List.dataItem uses the selected index if a value is not provided.

Shouldn't TabStrip.remove also be defined as "remove(element: number): kendo.ui.TabStrip;"?

Should TabStrip a definition for "items(): HTMLCollection;"? It's not documented, but I have referenced it to get the number of tabs in the TabStrip.

Thanks,

Sean

General Discussions

answered on 08 May 2013

1 answer

206 views

Wrong validation. Declare valid date as invalid

Hello Guys.

Im trying to use the Kendo Date Picker (Not DateTimePicker)

I use it in ASP.Net MVC 4 with Razor 2. In my Model it looks like this :

[Required(ErrorMessageResourceName = "GeburtstagFehlt", ErrorMessageResourceType = typeof(Resources.Shared.ValidationMessages))]

[Display(Name = "Geburtstag", ResourceType = typeof(Resources.Models.Kontakt))]

[DataType(DataType.Date, ErrorMessageResourceName = "GeburtstagUngueltig", ErrorMessageResourceType = typeof(Resources.Shared.ValidationMessages))]

public DateTime Geburtstag { get; set; }

In View:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

When i post the Form it show a Validation Failure but the Date is valid.

I am use the swiss/german format dd.MM.yyyy i am gone to be crazy. Since 4 Hourse i am trying it to fixt this -_-''

So please help me.

Date/Time Pickers

answered on 08 May 2013

2 answers

290 views

Aggregates is not recalculated on update/destroy

Hello,



I'm using server side aggregation. It works perfectly when reading data. But if an item is destroyed or updated the aggregate is not recalculated (my update/destroy response contains "aggregates" data). 



For this reason, I need another request to server to read data again - which is not a case in our business application. Is this a known issue? Or maybe there is a workaround for that?



Thanks.



My datasource declaration:



viewModel = kendo.observable({

gridSource: new kendo.data.DataSource({

serverAggregates: true,

transport: {

read: function(options) {

$.ajax({

url: "/ajax/getProducts",

type: "GET",

cache: false,

dataType: "json",

success: function(result) {

options.success(result);

}

});

},

destroy: function (options) {

var id = {id: options.data.id};

$.ajax({

url: "/ajax/deleteProduct",

cache: false,

type: "DELETE",

contentType: "application/json",

data: JSON.stringify(id),

success: function(result) {

options.success(result);

},

error: function(result) {

options.error(result);

viewModel.gridSource.cancelChanges();

}

});

},

update: function (options) {

$.ajax({

url: "/ajax/updateItem",

cache: false,

type: "POST",

contentType: "application/json",

data: JSON.stringify(options.data),

success: function(result) {

options.success(result);

},

error: function(result) {

options.error(result);

}

});

}

},

schema: {

data: "data",

aggregates: "aggregates",

model: {

id: "id",

fields: {

id: {

type: "string"

},

description: {

type: "string"

},

price: {

type: "number"

},

quantity: {

type: "number"

}

},

aggregate: [

{ field: "totalPrice", aggregate: "sum" }

]

})

});



My destroy action json response:




{"totalSize":null,"data":[],"aggregates":{"totalPrice":{"sum":51.1}}}



Thank you!

Data Source

answered on 08 May 2013