Questions on Kendo UI for jQuery Forum

5 answers

1.4K+ views

How to remove default padding from the listview and how to apply background color

Hi,

When looking at the Twitter example I have adapted it with my own data.

http://demos.kendoui.com/mobile/listview/pull-with-endless.html

I need to make a slight change:
1. In android mobile the default background color of listview is black but i want to change it to different color(yellow)
2. Also there is default padding(some space around each row) but i want it to remove(i,e padding=0).
3. When tapping each 'row' I want it to highlight by red for few seconds

Thanks,
Lakshmikanth

ListView (Mobile)

answered on 26 Feb 2013

2 answers

715 views

Display all possibilities in dropdown

Hello.

I need to make the dropdown of autocomplete display all items listed in the datasource. I have found the .search() method and it almost does what I want, the only problem is that it requires me to pass it at least one character and does not appear to work if I specify an empty string.

How would I get all items to show?

Here is a jsfiddle that illustrates what I'm trying to do...
http://jsfiddle.net/3j2GP/1/

AutoComplete

answered on 26 Feb 2013

3 answers

203 views

Kendo Date Problem in Grid

If i select today in kendo date picker in add screen, kendo set the selected date as yesterday date in Grid.

i attached add screen image and kendo grid display date.

DatePicker

answered on 26 Feb 2013

1 answer

90 views

Very long name overlaps the label

Hi.
I have a problem, I'm using a list data kendoDropDownList and my app are fine but when I select an item that has a very long name overlaps the label. How I can fix this?.

Attached pictures. Thanks

General Discussions

answered on 26 Feb 2013

1 answer

80 views

Dropdown not populating in grid

When i used this method http://demos.kendoui.com/web/grid/foreignkeycolumn.html, to show the dropdown it fails

This i my structure
var dataAction = eval("(" + Jsondata+ ")");

function BindEquipmentGrid() {
//Create equipment grid
$("#EquipmentGrid").kendoGrid({ // create Grid from div HTML element Kendo
selectable: "row",
sortable: {
mode: "multiple", // enables multi-column sorting
allowUnsort: true
},
resizable: true,
columns: [
{
field: "Feild1",
title: "Feild1",
width: 160
},
{
field: "Feild2",
title: "Feild2",
width: 180
},
{ title: 'Action', field: 'ActionId', width: 200, values: dataAction },
],
editable: true
});
}

But the result it shows is [object][object] on cell select

General Discussions

answered on 26 Feb 2013

6 answers

692 views

[Solved] Nested views bindings

Hello.

I have some parent container which is bind to ViewModel#1. This container contains other child container that is bind to ViewModel#2.

I’m not sure yet, but it looks like whole content of child container is bind to ViewModel#1 ONLY.

Is it possible to have such type of binding (having nested views) in Kendo? Would it have some potential issues with binding in that case? (Ambiguous bindings, issues when perform binding, etc.)

If it is not possible, what approach would you recommend?

Thanks ahead,

Andriyan.

MVVM

answered on 26 Feb 2013

1 answer

670 views

How to catch timeout and errors from a get in DataSource?

Hi

I've got the following code, but it's not clear to me how I respond to errors when the get fails (e.g. server down). It's also not clear to me how I should handle a request time out condition?

Are there methods I can hook into (like the click: handler) to help catch these conditions?

Here's the code.

return new kendo.data.DataSource({

serverFiltering:true,

serverPaging:true,

serverSorting:true,

pageSize:20,

transport:{

read:{

url:getContentsListURL() // returns a URL of course!

}

},

schema:{

data:"items",

total:"total_results"

}

});

Thanks.
--
John Clayton

General Discussions

answered on 26 Feb 2013

10 answers

571 views

Can't click on editor fields if selectable is turned on

I am running into very odd issues with a kendo grid when selectable is turned on with inline editing.
If selectable is turned off the grid functions without issue but as soon as I turn it on I have multiple odd issues.

1 - When editing a row I am unable to click on the items - I can tab between them but clicking has no impact.
2 - they don't data bind correctly - I have to tab off the last item I edit or it is discarded when clicking update.

Is this a known issue? It has become a major issue - I either need to fix it or drop a feature the client wanted.

Grid

answered on 26 Feb 2013

1 answer

466 views

DataSource.sync() doesn't call create after adding a model to a dataSource generated by ASP.NET MVC ListView Helper

Hi Kendo,

I tried this on http://jsfiddle.net/rusev/E3vYH/ and it works fine. Now I have a listView generated by ListView Kendo Helper and I add a model by calling DataSource.add() method, but when I call DataSource.sync() it doesn't call create and I don't see any http activity on my browser's network tab. I copied the code generated by the kendo helper and pasted it into a test html file and it doesn't work neither. It did add the model to the listView but never calls create. Here is my test file:

<!DOCTYPE html>
<html>
<head>
<title>Testing Kendoui dataSource</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
<div data-id = ${CountryCode}>
<p>${CountryName}</p>
</div >
</script>
<script>
$(function () {
$("#target").kendoListView ({
"dataSource": {
"transport": {
"prefix": "",
"read": function () {
alert("reading...");
},
"create": function () {
alert("creating...");
},
"destroy": function () {
alert("destroying...");
},
"update": function () {
alert("updating...");
}
},
"type": "aspnetmvc-ajax",
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "SubaccountId",
"fields": {
"SubaccountId": {
"type": "number"
},
"CountryCode": {
"type": "string"
},
"CountryName": {
"type": "string"
}
}
}
}
},
"template": kendo.template($('#template').html()),
"selectable": "single"
});
$('#addButton').bind("click", function () {
var ds = $('#target').data('kendoListView').dataSource;
ds.add({

SubaccountId: 1,
CountryCode: 'US',
CountryName: 'United States'

});
ds.sync();
});
});
</script>
</head>
<body>
<div>
<button id="addButton">Add Country</button>
</div>
<div id="target"></div>
</body>
</html>

I tried with different jquery and kendo version too. No luck.

How do I make this work.

Thanks

Data Source

answered on 26 Feb 2013

1 answer

156 views

Autocomplete not loading items (when using MVVM)

I am getting the response back from the server, and everything looks good, but for some reason items are not been displayed for the autocomplete widget. If someone could point out what I'm doing wrong, that would be much appreciated.

Response from the server when I type something in the autocomplete box:

{"d":[{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":0,"Name":"Name0"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":1,"Name":"Name1"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":2,"Name":"Name2"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":3,"Name":"Name3"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":4,"Name":"Name4"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":5,"Name":"Name5"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":6,"Name":"Name6"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":7,"Name":"Name7"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":8,"Name":"Name8"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":9,"Name":"Name9"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":10,"Name":"Name10"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":11,"Name":"Name11"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":12,"Name":"Name12"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":13,"Name":"Name13"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":14,"Name":"Name14"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":15,"Name":"Name15"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":16,"Name":"Name16"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":17,"Name":"Name17"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":18,"Name":"Name18"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":19,"Name":"Name19"}]}

Autocomplete definition and binding:

<input id="acMedications" data-role="autocomplete" data-text-field="Name" data-bind="source: dsMedication, value: SelectedMedication"

style="width: 400px;" placeholder="Enter value..." />

ViewModel and DataSource definition:

$(document).ready(function() {

var viewModel = kendo.observable({

dsMedication: new kendo.data.DataSource({

transport: {

read: {

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

type: "POST",

url: "../Services/svcMedication.asmx/SearchMedication",

dataType: "json",

cache: false

},

update: {

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

type: "POST",

url: "../Services/svcMedication.asmx/SaveMedication",

dataType: "json",

cache: false

},

destroy: {

url: "../Services/svcMedication.asmx/DeleteMedication",

type: "DELETE",

dataType: "json",

cache: false

},

create: {

url: "../Services/svcMedication.asmx/SaveMedication",

type: "PUT",

cache: false

},

parameterMap: function(options, operation) {

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

return {

models: kendo.stringify(options.models)

};

}

options.MedicationParam = $('#acMedications').val();

return kendo.stringify(options);

}

},

batch: true,

schema: {

data: "d",

model: {

id: "MedicationId",

fields: {

MedicationId: {

type: "number"

},

Name: {

type: "text"

}

}),

SelectedMedication: null,

HasChanges: false,

save: function() {

this.dsMedication.sync();

this.set("HasChanges", false);

},

remove: function() {

if (confirm("Are you sure you want to delete this record?")) {

this.dsMedication.remove(this.SelectedMedication);

this.set("SelectedMedication", this.dsMedication.view()[0]);

this.change();

}

},

showForm: function() {

return this.get("SelectedMedication") !== null;

},

change: function() {

this.set("HasChanges", true);

}

});

kendo.bind($("#fmMedication"), viewModel);

});

THANK YOU!!

AutoComplete

answered on 26 Feb 2013