Questions on Kendo UI for jQuery Forum

17 answers

305 views

Form input field + tabstrip + HTC = broken

Hi,

I'm using the free trial to get familiar with Kendo and see if I can use it for our PhoneGap app. Now I ran into a problem when I combine a tabstrip with a form input text or password field. I think this problem is device-specific, since we had similar problems when using Sencha on my HTC Desire.

Problem:
I have a listview with two input fields: a text field (email) and a password field (password), as shown on screen 134912.

When I tap on one of the fields to provide input, I see a white box where I need to type in, but this box is linked to the wrong field. This is shown on screenshot 134930, where you see that next to the e-mail text there seems to be a passwordfield while it is not. When I type in some text, it is shown next to the e-mail field correctly. If I want to type in the passwordfield the white text box comes up next to the email text.

If I tap back and forth on the fields, I get the problem shown in screenshot 134957.

I don't have this problems when I use the same code without the tabstrip. I think these probems occur because the coordinates of the input field don't take the tabstrip into account.

Specifications:
HTC Desire with Android 2.2.2 and PhoneGap 1.7.0 and Kendo mobile v2012.1.515

General Discussions

answered on 23 Nov 2012

0 answers

119 views

cascade DropDownList inside Popup editmode

Hi,

I use a cascade drop down list, and it's working fine... but now, I try to use that dropdownlist inside my popup editor, but it does not work.. Is there any way to do that?

Here is my custom popup editor:

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

<div class="k-edit-label">

<label for="idState">State</label>

</div>

<input id="dropDownListState" name="IdState">



</script>

And this is part of my cascade dropDownList:

$("#dropDownListState" + id).kendoDropDownList({

dataSource: {

transport:

{

read:

{

type: "GET",

url: function () { return RecebimentoRoutes.LoadState()},

contentType: 'application/json; charset=utf-8'

}

},

dataTextField: "Text",

dataValueField: "Value",

change: function () {

value = this.value();

CityDataSource.filter({

field: "Value",

operator: "eq",

value: parseInt(value)

});

listCity.enable();

}

}).data("kendoDropDownList");

Obs: I apologise for any mistakes in my english!

Thankz!

Grid

asked on 23 Nov 2012

0 answers

185 views

NumericTextBoxes with 4 decimal places

I've got a Grid configured to be inline editable. It has a couple of numeric fields which for which I've created custom validation.
The validation sets the min and max values based on another field which requires an $.ajax call.

This is working fine -- but I need the NumericTextBoxes to support 4 decimal places.

I've tried using a custom editor and setting the decimal and format parameters -- this allows 4 decimal places but breaks the custom validation. I've also tried editing the culture file and setting numberFormat to 4 decimals -- but this doesn't work -- the last two decimals are ignored.

Is there a way I can either set the default number format to 4 decimal places, or use a custom editor AND custom validator for a NumericTextBox?

Thanks

Grid

asked on 23 Nov 2012

4 answers

171 views

grid not displayed any record

Hello,

Grid not displayed any record.

I want grid with autogeneratecolumn = true.

any help would be appreciated......

public ActionResult getData([DataSourceRequest]DataSourceRequest request)

{

List<Class1> c1s = new List<Class1>();

for (int i = 0; i < 5; i++)

{

Class1 c1 = new Class1();

c1.ID = i;

c1.Name = "Name" + i;

c1s.Add(c1);

}

return Json(c1s.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

[Serializable]

public class Class1

{

public int ID { get; set; }

public string Name { get; set; }

}

div id="mygrid">

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#mygrid").kendoGrid({

dataSource: {

type: "odata",

serverPaging: true,

serverSorting: true,

pageSize: 100,

transport: {

read: "/Home/getData"

}

},

height: 280,

scrollable: {

virtual: true

},

sortable: true

});

</script>

Note : There is not any JS error.

If i tried with below read method then its works.

read: "http://demos.kendoui.com/service/Northwind.svc/Orders"

Thanks,
Jason

Grid

answered on 23 Nov 2012

1 answer

247 views

Undo a row delete in Grid from a RemoteTransport class

I am trying to create a custom RemoteTransport subclass, that provides WebSQL, IndexedDB and OData V2/V3 compliancy to KendoUI with JayData.
The thing is almost perfect, only that I am not able to reject a row delete. The user presses the "Delete" grid command, the row disappears, and my code in the RemoteTransport.destroy is not able to restore it anyhow. I can call success and error on the input parameter object, but nothing happens. I tried returning false (can not work in async mode) or tried returning a promise and rejecting that but these did not help either.

Calling grid.cancelChanges is not an option for me, as my code runs in the data layer and has no knowledge of UI controls.

Grid

answered on 23 Nov 2012

2 answers

465 views

NumericTextbox looks disabled

Is there a reason why the default view of the numerictextbox, without any parameters added to it, looks like a disabled normal textbox? Not only is it grey, but when you hover the mouse over it, the cursor becomes a circle with a slash across it, which is basically the universal symbol for 'you can't do anything here'. Sure, i can still click on the box, and when i do it turns white, but it's not really an optimal UI design. Any way i can change both of these defaults (the non-focused color of the textbox, and the mouse cursor)?

This question has been added as a request here:

http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3015693-not-make-the-numeric-textbox-look-disabled-when-

NumericTextBox

answered on 23 Nov 2012

0 answers

84 views

on adding items to the datasource the filter textboxes resets

Hi,

i fill a grid step by step with many data from a database.

on load the grid is empty. an javascript fills the grid with a result of an ajax-request.

while he is loading the items every "tick" of inserting new items to the datasource, the grid lost the user-written text in the filters, so the user have to rewrite it.

you also lost the selecection of an row.

it looks like the grid will be rebuild in the DOM every time i add an item.

is there any mechanic to prevent this?

thats my grid:

@(Html.Kendo().Grid<Object>().Name("KomplettabbzuegeGrid")

.ToolBar(toolBar => toolBar.Custom()

.Text("<i class='icon-download'></i>Exportieren")

.HtmlAttributes(new { id = "export" })

.Url(Url.Action("Export", "Vorbereitung", new { page = 1, pageSize = "~", filter = "~", sort = "~", initGruppenId = ViewBag.CurrKompfGrp }))

)

.Columns(columns =>

{

columns.Bound("Vfnr").Title("VFNR").Filterable(true);

columns.Bound("Betriebsname").Title("Betrieb").Filterable(true);

columns.Bound("Ort").Title("Ort").Filterable(true);

columns.Bound("HochgeladenAmDatum").Format("{0:dd.MM.yyyy hh:mm}").Title("Hochgeladen am").Filterable(false);

columns.Bound("Status").Title("Status")

.ClientTemplate("#= (Status == 2 ? 'offen': " +

"(Status == 3 ? 'akzeptiert':" +

"(Status == 4 ? 'abgelehnt': 'unbekannt'" +

"))) #")

.Filterable(false);

columns.Bound("Terminstellung").Title("Terminstellung")

.ClientTemplate("#= (Terminstellung == 'A' ? 'Welle 1': " +

"(Terminstellung == 'B' ? 'Welle 2':" +

"(Terminstellung == 'C' ? 'Welle 3': 'unbekannt'" +

"))) #")

.Filterable(false);

})

.Sortable(x => x.Enabled(true))

.Pageable(x => x.Enabled(true))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.Events(c => c.DataBound("function (e) {CollapseAllRows('#KomplettabbzuegeGrid');}").DataBound("onDataBound"))

.Filterable()

.Resizable(c => c.Columns(true))

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Sort(sort => sort.Add("HochgeladenAmDatum").Descending())

))

and thas the javascript wich adds the lines:

function loadGridData(gridDataSource, url, data)

{

if(typeof data['skip'] === "undefined" || typeof data['take'] === "undefined")

return;

if(grpId != data["initGruppenId"]) {

return;

}

$.ajax(

{

type: 'POST',

url: url,

dataType: 'json',

data: data,

success: function (result)

{

if(grpId != data["initGruppenId"])

return;

if (result.Data == null)

return;

for (var i = 0; i < result.Data.length; i++)

{

gridDataSource.add(result.Data[i]);

}

data['skip'] = data['skip'] + data['take'];

loadGridData(gridDataSource, url, data);

},

error: function (result)

{

return;

}

});

}

Thanks

Grid

asked on 23 Nov 2012

0 answers

1.4K+ views

"Input string is not well formed JSON" exception when deleting row

Hello,

I try to combine Kendo UI with Struts 2 action. Until now the results to retrieve data from the DB are satisfactory.
The table is loaded correctly with the data retrieved from the Action. The problem starts when i try to delete
an entry.

Source code:

<script>

$(document).ready(function () {

var crudServiceBaseUrl = "http://demos.kendoui.com/service",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost:8080/ProjectRoot/myProject,

dataType: "json"

},

destroy: {

url: "http://localhost:8080/ProjectRoot/myProject!deleteRow",

dataType: "jsonp",

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

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

batch: true,

pageSize: 30,

schema: {

data: "myList",

model: {

id: "uuid",

fields: {

uuid: { editable: false, nullable: true },

lang: { type: "string" },

text: { type: "string" }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 400,

toolbar: ["create"],

columns: [

{ field:"lang", title: "Language" },

{ field: "text", title:"Text", width: "150px" },

{ command: ["edit", "destroy"], title: " ", width: "210px" }],

editable: "popup"

});

</script>

Inside my Struts 2 action i have getters and setters for the following variables:
-String text;
-String lang;
-String models;

Now i noticed the following behaviour:

First Scenario

When calling the deleteRow function in my struts action, the following parameters are send of the current row that i want to delete:

callback	`jQuery17201980517354870166_1353667373995`
models	`[{"lang":"de","text":"ProjectRoot-System","uuid":"c0437761-1c29-11e2-892e-0800200c9a66"},{"lang":"de","text":"Stephan","uuid":"46baf7b1-2345-11e2-81c1-0800200c9a66"}]`

This is a copy of the url parameters: _=1353667421178
callback=jQuery17201980517354870166_1353667373995
models=[{"lang":"de","text":"ProjectRoot-System","uuid":"c0437761-1c29-11e2-892e-0800200c9a66"},{"lang":"de","text":"Stephan","uuid":"46baf7b1-2345-11e2-81c1-0800200c9a66"}]

Unfortunately as a response from the server i get the following error :
org.apache.struts2.json.JSONException: Input string is not well formed JSON (invalid char ?)

    org.apache.struts2.json.JSONReader.buildInvalidInputException(JSONReader.java:155)

I did a debugging on the JSONInterceptor and found out that the json variable when trying to do the deserialize 
Object obj = JSONUtil.deserialize(request.getReader());
the json variable is an empty string.  Thus the above error.  


Second Scenario

Instead of calling a function to delete, i changed that to call an action. When doing this, the action
is called and my String models variable is set with the following values [{"lang":"de","text":"ProjectRoot-System","uuid":"c0437761-1c29-11e2-892e-0800200c9a66"}].

This seems sort of correct. Unfortunately with this case, the whole process does not go through the 
JSONInterceptor, so no deserialization is happening. 



So what is my goal:
To be able when pressing on delete to call the delete function and set the object with the values that are 
sent from kendo in order to continue with my own business logic process.  What could be wrong 
in my first scenario ? 

Please let me know if you need further information.

Regards

Stephan

Grid

asked on 23 Nov 2012

1 answer

207 views

Tutorial using change event args

I used Telerik Components for ASP.NET MVC and recently upgraded to Kendo UI. I must admit it has been a very rough transition due to incomplete documentation and demos that are not nearly as good as those for Telerik Components for ASP.NET MVC. For example, the Grid events documentation does not show how to do anything with the "e" arg passed into the handler.

I am struggling to use the event args or even the "this" passed into my change event handler. I cannot even tell which cell was clicked or whether the actual clicked element was an anchor tag that should show a popup. When I run the code "e.cellIndex()" returns -1. What good is that?

Can someone point me to a tutorial that helped them use the change event? Thanks.

Grid

answered on 23 Nov 2012

5 answers

99 views

Windows Phone rendering is shocking

Hi,

I understand that this framework targets Android, iOS and Blackberry but I was hoping that my application will somewhat still work on a Windows Phone. Running it this morning on a Windows Phone 7.5 was shocking.

Is this the norm, should I expect the application not to work at all on a Windows Phone browser or is there something I am doing wrong?

Is there a way for me to target a different layout for Windows Phone or is this framework just not able to work on this platform?

I guess if this is the case I would rather abandon the framework and just code a general interface that will work on all devices.

Thanks,
Anton

General Discussions

answered on 23 Nov 2012