Questions on Kendo UI for jQuery Forum

1 answer

98 views

Kendo uploader IE10 Asynchronous Upload not working

On Your Demo Page : http://demos.kendoui.com/web/upload/async.html

I try uploading a normal jpeg image and it just sits there a spins. Never Uploads the file. It never even breaks on the success function or the error function.

If i don't use asynchronous upload, it works.

All My IE10 settings security settings are turned down to medium.
My version is Windows 7 IE10 10.0.9200.16540

Works on every other browser and all older IE Versions. See screen grab of what i am seeing.

Upload

answered on 09 May 2013

2 answers

128 views

[Solved] addRow() method throwing exception

The addRow method is throwing "Object doesn't support this property or method" when running with IE 8.0.7601.17514

Run the attach solution.
Click Add Customer button.
In the popup enter 123456789 for Sage Customer Number and Test for Customer.
Click the X command at the top right of the popup dialog to cancel the addition.
Click Add Customer button and alert pops up indicating "Object doesn't support this property or method"

This code works properly in IE 9 & 10, Chrome(26.0.1410) and Firefox(20.0.1)

Grid

answered on 09 May 2013

4 answers

1.3K+ views

[Solved] Consuming a .NET JSON web service

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

1.0K+ views

[Solved] 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

174 views

[Solved] 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

107 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.4K+ 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

966 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

510 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

145 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