Questions on Kendo UI for jQuery Forum

0 answers

162 views

How can I set a datasource filter from a panelbar select?

Hi,

I would like to set a datasource filter based on the selected item in a panelbar.

I have tried something in this JSfiddle , but can't seem to figure it out.

Any pointers?

Cheers
Bastian

PanelBar

asked on 29 Jan 2012

1 answer

46 views

Question about how demos pages work...

Hello,

I think this question is not fully kendo ui related, but jquery related; but anyway, I hope you guys could help me.

I am developing a simple layout for some test, and I would like to handle it like the Kendo UI demos does, i mean, apparently they only update the right part of the page (the fading one which contain the example), leaving the menus, and tool bars unaltered (its last state). I been tracing its functionality with Firebug, looking for some Ajax calls but I cant find it. So I really appreciate if you guys, could develop a bit about how the examples / demos page works.

Thanks in advance,
Oscar

General Discussions

answered on 28 Jan 2012

3 answers

182 views

content falls out of a tab

Hi,

I'm using the following code to dynamically add a new tab which displays the content of a div which is defined outside of tabstrip div, by referencing it by its id (id="testInputs"):

<div id="tabstrip">

<ul>

<li>First Tab</li>

<li>Second Tab</li>

</ul>

<div>First Tab Content</div>

<div>Second Tab Content</div>

</div>

<div id="testInputs" style="clear:both; float:left">

<div style="clear:both; float:left;">

<br /><label>Name:</label><input id="inpUserName" value="n/a">

</div>

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

tabStrip.append(

[{

text: "New Tab",

content: document.getElementById("testInputs").innerHTML

}],

tabStrip.tabGroup

);

The problem is when I click on the new tab I can see that it loads the content of "testInputs" div just fine, but immediately after that the tab region collapses towards the top, leaving the "inpUserName" input and the label sitting just under the tab strip (see attached image).

What I'm trying to achieve is that the name input is dynamically added and displayed inside the new tab.

TabStrip

answered on 28 Jan 2012

0 answers

152 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.6K+ views

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

115 views

Multiselect

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

DropDownList

answered on 27 Jan 2012

2 answers

237 views

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!

Date/Time Pickers

answered on 27 Jan 2012

4 answers

229 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

246 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

61 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