Questions on Kendo UI for jQuery Forum

2 answers

185 views

add command columns to a grid defined from an HTML table?

Hi,

How can I add command columns to a grid that I defined from an HTML table?

The only way I have seen to add a command column is through the example code, where the command columns are included in the column definition.

Since I am defining from an HTML table, I have not needed to define the column set in Javascript, so I am unclear how to add a command column (edit / delete) in this case.

Thanks

Grid

answered on 23 May 2012

2 answers

110 views

[Solved] Switch not appearing in listview on android 2.3.4

Hi guys,

I'm having an issue where i have a switch control (Based on a input tag with type set to checkbox) embedded in an item in a list view.

It works perfectly everywhere I test except on android 2.3.4 devices where it does not appear at all. (I have tested on a Samsung Galaxy S II and a Sony Xperia Arc S and it does not work on either phone)

I'd like to note that it does work on these devices when it is outside of a list view (ul, li tags) but the minute I place it inside one it disappears.

I use the following code in a view:

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Africa

<ul>

<li data-icon="toprated"><input name="MyCheckBox" id="MyCheckBox" type="checkbox" data-role="switch"/></li>

</ul>

</li>

</ul>

Thanks,

Rob

Switch (Mobile)

answered on 23 May 2012

1 answer

131 views

Window content not shown using MVVM

I'm using MVVM and I want to use a window to display content when a button is clicked in a grid. The content is empty in the window. If I don't use a window then my fields are populated. Is there a way around this?

$("#contactsGrid").delegate(".details-button", "click", function (e) {

e.preventDefault();

//debugger;

contactViewModel.set("selectedContact", $("#contactsGrid").data("kendoGrid").dataItem($(this).closest("tr")));

wnd.center().open(); // this wipes the newly selected contact details

});

Window

answered on 23 May 2012

2 answers

118 views

[Doc] Documentation\Feature requests

New documentation portal feature requests....

MVVM:

Popup edit window: Ability to click a button and have that dataitem popup in an edit window to change the properties…and save them back. Difficulty: no grid.
Complex remote binding: events\changes auto-save to a webservice instead of a “Save” button after many changes. So I can’t image if you add an item to an array you’d send the entire array back to the service to merge\delete\insert the changes? How does one keep the model synced to the remote data safely.
Refreshing an array and\or the entire model with $.ajax response data.
Sorting arrays
Subscribing to change events on observables
Binding to functions…like Knockout computed observables?...I don’t know when this works, doesn’t work…HOW it works, etc etc. Like I have a template bound to parent().parent().functionName seems okay, but then in a fiddle if I try and bind to a function and change the data, it doesn’t update. Need more insight into the framework.
Nested template binding (with interaction)
Complex interaction

So I do know the answers to some of these, I just would like docs\samples on these scenarios…I’m trying to move a couple people onto MVVM, but the current docs are pretty bad (please, no offense intended).

------------

UNRELATED (the best kind of related):

Feature request: KnockoutJS has the mapping plugin to plug remote data into the model…right now we have to do an $.each loop…

//Lame

for (var field in jsonData) {

viewModel.set(field, jsonData[field]);

}

I was hoping we could get something like

//Awesome

viewModel.load(jsonData)

and it’d handle it internally….or load\refresh whatever…

------------

Wishlist: Each doc sample contains a fiddle to play with\fork so we can help flesh out demos\samples…

General Discussions

answered on 23 May 2012

5 answers

319 views

[Solved] Subscribing to changes?

I need a checkbox bound to a bool in my model...however on click I need to persist that change to a webservice.

data-bind="checked: AvailableToHamilton, click: shareWith"

So in this case I need the checkbox to show the state of the model, then the click event I need to send the value and then call a function to update a count based on the model.

What's HAPPENING though it seems is this
1) Checked
2) Ajax Call
3) Ajax Complete
4) Function Runs to get count (checks bool state)
5) Bool state changed

So I know this because if I set a timeout on step 4

success: function (e) {

setTimeout(function(){

viewModel.getTotalCapacity();

}, 100);

}

...then the count updates okay...

So if I could subscribe to a change on the property (somehow) then the function could run AFTER it changes.

Steve

MVVM

answered on 23 May 2012

3 answers

261 views

Control data-bind inside a template rendered after bind

Hi,

Is it possible to render a template after the bind action?

I've created a sample jsFiddle here: http://jsfiddle.net/fnH58/1/

Thanks,
Ricardo

Templates

answered on 23 May 2012

0 answers

78 views

need help to insert kendo UI script in my app

<html>
<head>
<title>
form buttons
</title>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["anpr"]["vehicle"].value;
if (x==null || x=="")
{
alert("vehicle no must be filled out");
return false;
}
}
</script>
<script src="D:\kendoui.complete.2012.1.322.trial\js\jquery.min.js"></script>
<script src="D:\kendoui.complete.2012.1.322.trial\js\kendo.mobile.min.js"></script>
<script src="D:\kendoui.complete.2012.1.322.trial\examples\content\shared\js\console.js"></script>
<link href="D:\kendoui.complete.2012.1.322.trial\styles\kendo.common.min.css" rel="stylesheet" />
<link href="D:\kendoui.complete.2012.1.322.trial\styles\kendo.mobile.all.min.css" rel="stylesheet" />
</head>

<body>
this is just a try to check the capabilities of input button.

<form name="anpr" action="test.php" onsubmit="return validateform()" metod="post">
vehicle no:<input type="text" name="vehicle" id="vehicle" />
<input type="submit" value="submit" />
</form>
<script>
window.kendoMobileApplication=new kendo.mobile.Application(document.body);
</script>
</body>
</html>
the above code is my html file..so can anyone please help me to get the usage of the Kendo UI file, i have downloaded..i am compleatly blank on this..

Thanks,
Swarup

General Discussions

asked on 23 May 2012

0 answers

133 views

custom popup editor.

I want to use custom popup editor the way it is being shown in this examples of your http://demos.kendoui.com/web/grid/editing-popup.html.
i want to have my own textboxes . can i do that?

Grid

asked on 23 May 2012

1 answer

304 views

[Solved] TabStrip empty when loading Grid

Hello,

I tried out the example below

http://www.kendoui.com/forums/ui/tabstrip/tabstrip-is-blank-when-loading-grid-into-tab.aspx

i placed the grid is in the div container but I am still having layout problems. I added a screenshot. Seems that another element is overlayed on the tab. Do you have any ideas what the problem could be?

Below is the code causing me problems

<div id='bottomDiv'>

<div id="tabstrip">

<ul>

<li>Grid</li>

</ul>

<div>

<div id="ticketListDiv">

</div>

<div id='mapDiv'></div>

</div>

$("#ticketListDiv").kendoGrid({

dataSource : {

// JSONP is required for cross-domain AJAX

dataType: "jsonp",

transport: {

read: baseURL + "Data;jsessionid="+ jsessionId + "?browserid=" + browserId + "&type=2&tool=KendoUIResourceList"

},

schema: {

model: {

fields: {

firstName: { type: "string" },

lastName: { type: "string" }

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

toolbar: kendo.template($("#template").html()),

height: 250,

filterable: true,

sortable: true,

pageable: true,

groupable: true,

selectable: "single row",

filterable: {

messages: {

info: "Ticket Filter", // sets the text on top of the filter menu

filter: "ausführen", // sets the text for the "Filter" button

clear: "zurücksetzen", // sets the text for the "Clear" button

},

operators: {

//filter menu for "string" type columns

string: {

eq: "entspricht",

neq: "entspricht nicht",

startswith: "startet mit",

contains: "enthält",

endswith: "endet mit"

}

},

dataBound: resizeGrid,

columns : [{

field : "firstName",

title : "Vorname",

width : 50

}, {

field : "lastName",

title : "Nachname",

width : 50

}]

});

TabStrip

answered on 23 May 2012

2 answers

879 views

[Solved] app.navigate() to remote view - no header/footer

Hi again,

I've run into a somewhat strange issue here, which may or may not be by design once again. And since I only have the minified javascript for now, I can't quite figure out why it does what it does.

For reasons relating to phonegap, cordova and some nasty bugs in android 4.0*, I've had to rewrite a lot of code from being nice and proper ( a-tags with href attributes linking to remote views with querystrings ) into storing the querystring variables into localStorage and relying on app.navigate to said remote views.

(* There's an unfortunate bug in the Chromium browser which leads to nice 'file not founds' if accessing files with querystrings when deployed through phone-gap, or through file:/// - URL )

My problem, however:
If I use a normal A tag with href="remote.html" - it inherits or picks up/duplicates header/footer if the data-id matches, which it does.
If I use app.navigate('remote.html') - it doesn't. (Neither if I use document.location = 'remote.html')

In what way does a normal a tag linkage differ from app.navigate? Is there a way to (preferably from one centralized place) enforce/check/reinforce the header/footer?

All my views, regardless of whether they are remote or local share this:
(div data-role="layout" data-id="mobile-view")
Header/footer exists only in index.html. Remote views are simply other instances of a div data-role="layout" data-id="mobile-view".

Manually reloading in browser on such a loaded remote view does redraw the header/footer, worth noting.

Is the easiest way to refrain from using app.navigate?
Are there any implications to using document.location = 'index.html#remote.html' instead? That seems to be the easiest workaround at least.

Application

answered on 23 May 2012