Questions on Kendo UI for jQuery Forum

0 answers

326 views

**answer found -- Grid has an autoBind property specifically for this**

Team,

I have a situation where I am providing the data source with initial data and providing a read url for all further requests.

In this situation the read request is being call for no reason basically on the page load since I have provided a set of data already. My thought was to cancel the first request via the DataSource's RequestStart event but cannot seem to figure out how to do this. Is there another way to do this?

I found the following post searching the forums from early this year but nothing more current. Is there any update to the following post?

Hello Richard,

Currently it is not possible to cancel the RequestStart event of the DataSource. We will provide such functionality in the future releases. I am sorry for the inconvenience.

All the best,
Petur Subev
the Telerik team

Data Source

asked on 24 Nov 2012

17 answers

309 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

124 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

194 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

177 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

254 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

473 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

86 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.5K+ 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

223 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