Questions on Kendo UI for jQuery Forum

1 answer

447 views

I am creating a Listview control in markup, and on a button click event am initializing and loading data into a datasource for display as result of a user initiated search. When the user performs a new search, I call the datasource.reload() to retrieve data for the updated search criteria. The spinner doesn't show up when I do so. What can I do to get the spinner to show during the reload operation? Here is the code that handles the 'click' event of the search. Everything works fine except there is no spinner during read()

//Handle the search 'GO' button click event

this.doItemSearch =

function

() {

	//this selector grabs the search criteria

if ($('#searchCriteria').val() != '') {

if (dataSource)

dataSource.read();

else

initdataSource();

if (listView) {

//Do nothing

}

else {

listView = $("#myListView").kendoMobileListView({

dataSource: dataSource,

template: $("#myTemplate").text(),

endlessScroll: true,

scrollTreshold: 30 //treshold in pixels

});

}

ListView (Mobile)

answered on 21 Feb 2013

2 answers

236 views

Kendo UI grid not populating the data

I tried to bind a grid from the corresponding to the data entered in a textbox, but the grid is not populated
Also there is no error displayed
This is the code i used

$("#txtSearchCaller").keyup(function () { SearchCaller($(this)); });

function SearchCaller(txtSearchCaller) {
SearchRequestProcess = $.ajax({
type: "GET",
url: baseURL + "Call/SearchCaller",
data: "term=" + $(txtSearchCaller).val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnGetCallerSuccess,
error: function (request, status, error) { if (request.statusText != "abort") { alert("SearchCaller:: " + request.statusText); } }
});
}
}
function OnGetCallerSuccess(Jsondata, status) {
$("#Grid").kendoGrid({ // create Grid from div HTML element Kendo
dataSource: Jsondata,
selectable: "row",
scrollable: true,
navigatable: true,
resizable: true,
groupable: false,
columns: [
{
field: "category1",
title: "category1",
width: 80
},
{
field: "category2",
title: "Customer Name",
width: 80
},
]
});
}

Grid

answered on 21 Feb 2013

1 answer

156 views

Nested values trigger events more than once

The viewmodel's 'change' (and possibly other events) trigger more than once if a nested value is changed. The event appears to be triggered once per nested level. So changing 'nested.value' triggers twice and changing 'very.deeply.nested.value' triggers four times.

I prepared a very simple example at http://jsfiddle.net/eMATB

Am I doing it wrong or is it a kendo bug?

MVVM

answered on 21 Feb 2013

6 answers

305 views

TreeView - incorrect checkbox behavior

In TreeView control checkboxes.checkChildren property is set to false. If you select children checkboxes, the parent checkbox is selected automatically. It works this way regardless of the checkChildren property is set to true or false.

$(tree).kendoTreeView({

dataSource: new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: groups_api_url,

dataType: "jsonp"

}

},

schema: {

model: {

id: "key",

hasChildren: "hasChildren"

}

}),

checkboxes: {

checkChildren: false

},

dataTextField: "title"

});

What I would like is just a "simple" behavior of the control without dependencies between parent and child nodes, i.e. if a checkbox is checked, nothing should happen with other checkboxes.

For example, on the screenshot1, if "Job" checkbox is selected, "Test by w_admin" should not be selected automatically.

KendoUI: 2012.3.1315
OS: Windows 7
jQuery: 1.7.1
jQueryUI: 1.8.16

TreeView

answered on 21 Feb 2013

2 answers

110 views

ListView hang after opening external link on native browser

In a ListView, a script to open an external link by native browser is called when a link is clicked.

On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');

The link can be opened on the corresponding native browser.

When the user try to switch back to the app, some problems happen after that.

On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.

On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.

How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?

Thank you very much for your help.

ListView (Mobile)

answered on 21 Feb 2013

6 answers

125 views

How can I upload documents and then link to them like DocumentBrowser in ajax Editor?

Hi,

The new imagebrowser enhancement is great - I just need a document browser that is similar in functionality like the current imagebrowser but allows me to link to the documents that a user has uploaded - similar to DocumentBrowser used in the ajax Editor. Is this possible or is it a feature that is soon to be added?

Thank you,
David A.

Editor

answered on 20 Feb 2013

3 answers

477 views

Centering Issues

Hello,

I am trying to center a Kendo UI Window on screen, but I just cant.

I tried with dynamic content, static content, and always the same result, the window dont get centered.

http://jsfiddle.net/X7qxs/

¿What I am doing wrong?

Thanks

Window

answered on 20 Feb 2013

1 answer

147 views

Foreign Key Question

I have a editable grid where the first column is ProjectID

function updateGrid() {

if ( $("#grid").data("kendoGrid") != undefined ) {

$("#grid").empty();

}

var lob = $("#lob").data("kendoComboBox").value();

var queryurl = "./grid_projectselections.php?delob=" + escape(lob);

var updateurl = "./grid_projectselections.php?delob=" + escape(lob);

var element = $("#grid").kendoGrid({

dataSource: {

pageSize: 200,

type: "json",

batch: true ,

serverSorting: false,

transport: {

read: {

url: queryurl,

dataType: "json",

cache: false,

data: {

q: lob

}

},

update: {

url: updateurl,

dataType: "json"

},

parameterMap: function(options, operation) {

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

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

}

},

schema: {

data: "data",

total: "total",

model: {

fields: {

ProjectID: { editable: true },

HR_LEVEL_5: { editable: false },

HR_LEVEL_6: { editable: false },

HR_LEVEL_7: { editable: false },

HR_LEVEL_8: { editable: false },

HR_LEVEL_9: { editable: false },

ExecDescr: { editable: false },

OrgDescr: { editable: false },

GroupDescr: { editable: false },

RegionDescr: { editable: false },

SectionDescr: { editable: false }

}

},

selectable: true,

filterable: true,

resizable: true,

editable: true,

groupable: false,

pageable: {

numeric: true,

refresh: true,

previousNext: true,

input: true,

info: true

},

columns: [

{ field: "ProjectID", editor: ProjectDropDownEditor, values: projectDS },

"HR_LEVEL_5" ,

"HR_LEVEL_6" ,

"HR_LEVEL_7" ,

"HR_LEVEL_8" ,

"HR_LEVEL_9" ,

"ExecDescr" ,

"OrgDescr" ,

"GroupDescr" ,

"RegionDescr" ,

"SectionDescr"

]

});

}

inside this grid when in edit mode the first column should be a drop down

function ProjectDropDownEditor(container, options) {

$('<input required data-text-field="ProjectName" data-value-field="ProjectID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataSource: {

type: "json",

transport: {

read: { url: "./grid_projectsdropdown.php"},

}

});

}

The grid is initially populated when a user makes a selection from a combobox placed above the grid

$("#lob").width(360).kendoComboBox({

placeholder: "Select LOB...",

dataTextField: "LineOfBusiness",

dataValueField: "LineOfBusiness",

width: 360,

dataSource: {

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

serverFiltering: true,

transport: { read: "./ajax/lobs.php" },

schema: { data: "data", total: "total" }

},

change: function() {

var value = this.value();

if (value) {

if (value == '') {

return;

}

updateGrid();

} else {

}

});

The populating the grid is based off the choice make in the combo... that part works. The problem I am having is ... the dropdown editor needs to be based off the combobox value also and the datasource for the project names

var projectDS = new kendo.data.DataSource({

transport: {

read: { url: "./grid_projectsdropdown.php"},

dataType: "json"

},

schema: { data: "data", total: "total" }

});

which I have returning all records instead of filtering just on the ones from that lineofbusiness

What I want to do in (pseudo code)
select ProjectID, ProjectName from projects where lineofbusiness = combobox.value()

to build the dropdown editors options and the datasource I am using the same datasource for each if I could just get the LineofBusiness to be sent in the read call

also the ProjectID column shows the ProjectID not the ProjectName like I assume it would if they were linked?

I need a push in the right direction... my brain is fried...

Grid

answered on 20 Feb 2013

1 answer

91 views

Validations messages appearing below controls in popup edit window

right now my popup edit windows shows validation message just below thier respective controls, is there any example showing the right approach?

Grid

answered on 20 Feb 2013

1 answer

143 views

Paging controls overlapp/distorted inside a master page

I have a grid in normal asp.net page and when make this grid part of ajax collapsible panel and master page
, facing the following issues

1> Search is not working for every column.
2> The dropdown values in search dialog is moved away.
3> The paging controls are distorted

How do i troubleshoot this?

Grid

answered on 20 Feb 2013