Questions on Kendo UI for jQuery Forum

0 answers

195 views

JSON, html template and grid with pop up window error

Hi,

I got a grid which loading JSON data from a php file.
Inside this data, I got some html code to update grid template (some calls for ajax window).

One of my try:

$("#grid").kendoGrid({

dataSource: {

transport: {

dataType: "jsonp",

read: {

url: "http://localhost/cmms/service/request.php?user=iitpd&act=overdue"

}

},

schema: {

model: {

NUM: "NUM",

fields: {

NOM: {

editable: false,

nullable: true

},

DEP: {

editable: false,

nullable: true

},

DEP: {

editable: false,

nullable: true

},

DUE: {

editable: false,

nullable: true,

type: "date"

},

START: {

//defaultValue: 42,

type: "date"

},

COMP: {}

}

},

pageSize: 15,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 360,

toolbar: ["save", "cancel"],

editable: true,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

selectable: "row",

columns: [

{field: "NUM", width: 20, title: "Code" },

{field: "NOM", width: 150, title: "Name" },

{field: "DEP",width: 40,title: "Department"},

{width: 30,title: "Description", template:"#=DESC#"},

{field: "DUE",width: 30,title: "Due date"},

{width: 50,title: "Started", template:"#=START#"},

{width: 30,title: "Completed",template:'<div id="comp=#=NUM#" class="pop">Select</div>'}]

});

and another one:

$("#grid").kendoGrid({

dataSource: data,

height: 360,

toolbar: ["save", "cancel"],

editable: true,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

selectable: "row",

columns: [

{field: "NUM", width: 20, title: "Code" },

{field: "NOM", width: 150, title: "Name" },

{field: "DEP",width: 40,title: "Department"},

{width: 30,title: "Description", template:"#=DESC#"},

{field: "DUE",width: 30,title: "Due date"},

{width: 50,title: "Started", template:"#=START#"},

{width: 30,title: "Completed",template:'<div id="comp=#=NUM#" class="pop">Select</div>'}]

});

After the grid, i have this code, to open the windows:

var window = $("#window");

var windesc = $("#windesc");

$("#grid").click(function(){

$(".pop").click(function(){

var caseid = $(this).attr("id");

window.data("kendoWindow").refresh('date.php?'+caseid);

window.data("kendoWindow").center();

window.data("kendoWindow").open();

});

$(".desc").click(function(){

var caseid = $(this).attr("id");

var caseti = $(this).attr("ti");

windesc.data("kendoWindow").title(caseti);

windesc.data("kendoWindow").refresh('desc.php?'+caseid);

windesc.data("kendoWindow").center();

windesc.data("kendoWindow").open();

});

In the variable

 #=DESC# & #=START#, the script load well a '<div id="test" class="pop">SELECT</div>' in dataSource but the html is not read and it appears as string in the cell if i use "field".



If i use the schema way, I got a "q is undefined" error.

If i use a template in columns, in firebug, i got an error "this is undefined" when i click on the cell..... If i load some local data with createData exemple function, the html is read and despite the "this" error is still there, the window open..... Cannot find how to solve that.

Grid

asked on 28 Jan 2012

5 answers

1.7K+ views

[Solved] ERROR: calling ASP.NET JSON webservice with parameters

I have create a test page with a grid. I consume a simple webservice (mobileservice.asmx). I have configured my dataasource and webservice to use JSON. However as soon as i want to sent parameters the webservice call fails with errors like:

{"Message":"Invalid JSON primitive: vn.","StackTrace":" bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n bij System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n bij System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n bij System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n bij System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n bij System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

it seems that webservice parameters are not sent as JSON.

mobileservice.asmx

[WebMethod(EnableSession = true)]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public Item[] GetRecords2(string vn)

{

IDataView view = DatabaseSession.Current.GetOrCreateView(vn);

List<Item> items = new List<Item>(view.GetRecords(0, 40).Cast<IItemRecord>().Select(i => new Item() { Code = i.Code, Description = i.Description }));

//count = view.RecordCount;

return items.ToArray();

}

[WebMethod(EnableSession = true)]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public Item[] GetRecords3()

{

IDataView view = DatabaseSession.Current.GetOrCreateView("prd.item");

List<Item> items = new List<Item>(view.GetRecords(0, 40).Cast<IItemRecord>().Select(i => new Item() { Code = i.Code, Description = i.Description }));

//count = view.RecordCount;

return items.ToArray();

}

public class Item

{

public string Code { get; set; }

public string Description { get; set; }

}

successful page, no parameters:

$(document).ready(function () {

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

type: "POST",

url: "/webservices/mobile.asmx/GetRecords3",

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

data: {},

dataType: "json"

}

},

schema: {

data: "d",

model: {

fields: {

__type : { type: "string" },

Code: { type: "string" },

Description: { type: "string" },

}

},

error: onError

},

dataBound: ondataBound,

columns: [

{ title: "Code", field: "Code" },

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

height: 300

});

if i change to the configuration below i get the error:
{"Message":"Invalid JSON primitive: vn.","StackTrace":" bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n bij System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n bij System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n bij System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n bij System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n bij System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n bij System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

$(document).ready(function () {

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

type: "POST",

url: "/webservices/mobile.asmx/GetRecords2",

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

data: { vn : "prd.item"},

dataType: "json"

}

},

schema: {

data: "d",

model: {

fields: {

__type : { type: "string" },

Code: { type: "string" },

Description: { type: "string" },

}

},

pageSize: 10,

serverPaging: true,

error: onError

},

dataBound: ondataBound,

columns: [

{ title: "Code", field: "Code" },

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

height: 300

});

closer expection reveals that the parameters are not send as JSON:

Request URL:

http://localhost:51200/webservices/mobile.asmx/GetRecords2
Request Method:

POST
Status Code:

500 Internal Server Error
Request Headersview source
1. Accept:
  
  application/json, text/javascript, */*; q=0.01
2. Accept-Charset:
  
  ISO-8859-1,utf-8;q=0.7,*;q=0.3
3. Accept-Encoding:
  
  gzip,deflate,sdch
4. Accept-Language:
  
  nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
5. Connection:
  
  keep-alive
6. Content-Length:
  
  11
7. Content-Type:
  
  application/json; charset=UTF-8
8. Cookie:
  
  ASP.NET_SessionId=izwu2vgysxrijnb4iszwndmk
9. Host:
  
  localhost:51200
10. Origin:
  
  http://localhost:51200
11. Referer:
  
  http://localhost:51200/pages/mobile.htm
12. User-Agent:
  
  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
13. X-Requested-With:
  
  XMLHttpRequest
Request Payload
1. vn=prd.item
Response Headersview source
1. Cache-Control:
  
  private
2. Connection:
  
  Close
3. Content-Length:
  
  1068
4. Content-Type:
  
  application/json; charset=utf-8
5. Date:
  
  Thu, 26 Jan 2012 08:56:30 GMT
6. Server:
  
  ASP.NET Development Server/10.0.0.0
7. X-AspNet-Version:
  
  4.0.30319
8. jsonerror:
  
  true

Data Source

answered on 27 Jan 2012

1 answer

149 views

Multiselect

Is it possible to do create a multiselect input using the dropdown?

DropDownList

answered on 27 Jan 2012

2 answers

295 views

[Solved] focus() prevents dropdown from opening

Hello, I am trying to implement the AutoComplete and DatePicker controls in an edit form I am making. I do not want the edit controls visible all the time, so I have been working on some functions to reverse the effects of .kendoAutoComplete() and .kendoDatePicker().

The functions seem to be doing what I had hoped (if there is a better way, please let me know). However, in the code that makes my input turn into a kendoDatePicker, if I add a .focus() to the end of the line it does add focus to the edit control, but the control will not drop down the date picker when the edit control has focus.

Here is a link to an example: http://jsfiddle.net/jkappel/MEKqs/

if you modify the line that reads:

  if (that.attr('ctl') == 'date') that.kendoDatePicker();
  else that.kendoAutoComplete().focus();

to read:

  if (that.attr('ctl') == 'date') that.kendoDatePicker().focus();
  else that.kendoAutoComplete().focus();

the date picker will not ever drop down.

I realize my scenario is a bit unique, but if anyone can help I would sure appreciate it!

DatePicker

answered on 27 Jan 2012

4 answers

266 views

Application Accessibility

Hi
Greeting!!!!
Congratulations for your Mobile UI Beta Release.

As i understand that Mobile UI will give a native look through HtML5, but what i want to know is that whether any installation file will be there like .jad or it will be access through browser of mobile and Tablets on URL.

Secondly can we use grid from existing UI Widgets of Kendo UI.

Regards
Manash Dutta

General Discussions

answered on 27 Jan 2012

2 answers

285 views

Refresh page after AJAX request

I am dynamically loading the HTML of the page through AJAX and I need to refresh the KendoUI Mobile styling after the HTML is loaded into the DOM. I can do this with jQueryMobile by calling:

complete: function(xhr, textStatus) {
$("#page").trigger("create");
}

Is there a similar function for Kendo?

General Discussions

answered on 27 Jan 2012

0 answers

84 views

to

Hi~ I have some problems in chart tooltip.
First, I want to show tooltip always not whenever mouse is over.
Is there tooltip options to solve that?

Second, can I make each bar chart click events to call some javascript function?
How do I make it?

Third, I want to make chart label upright.
For examples, abcd -> a
                                    b
                                    c
                                    d
it is not chart label rotation option rotation.

Please help me~

Charts

asked on 27 Jan 2012

3 answers

164 views

Programming style

Hi, I had an entire application wrote in flex and rails.
Using this approach, most of the work was done in the client (flex) side, most like a client-server application.
I really don't like the page-to-page style, and I want to know if using html5 and Kendo I will get a more flex style of programming?

General Discussions

answered on 27 Jan 2012

4 answers

301 views

[Solved] Cascading DropDownLists

I'm attempting to create a series of cascading dropdowns by populating the second one from the first, the third from the second and so on, by using the change function. This works fine the first time a selection is made in each of the DropDownLists, but if I change a selection in the first one after the second DropDownList has been populated, the second DropDownList disappears to never return. Is there a way to accomplish this?

$("#algType").kendoDropDownList({

change: function () {

algType = $("#algType").data("kendoDropDownList").value();

$("#substn").kendoDropDownList({

dataTextField: "Substn",

dataValueField: "SubstnID",

dataSource: substnDataSource,

change: function () {

algType = $("#algType").data("kendoDropDownList").value();

substn = $("#substn").data("kendoDropDownList").value();

$("#devtyp").kendoDropDownList({

dataTextField: "Devtyp",

dataValueField: "DevtypID",

dataSource: devtypDataSource

});

}

});

}

});

DropDownList

answered on 27 Jan 2012

1 answer

96 views

Chart line doesn't respect visible: false

I'm trying to create a chart that doesn't show any axis or grid lines so I tried this:

valueAxis: {

line: { visible: false }

}

This doesn't hide the line, the only way I've found is to set the width to 0. It seems that the visible property does nothing which I think is a bug.
I've created a jsfiddle to show it: http://jsfiddle.net/slace/jKVRA/

Charts

answered on 27 Jan 2012