Questions on Kendo UI for jQuery Forum

1 answer

137 views

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

123 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

325 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

266 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

81 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

137 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

310 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

880 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

0 answers

133 views

can't get jsonp to DataSource

Here is calling code:

$(document).ready(function () {

var tipaiindeksai = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost:11336/Mobile/GetTipaiIrIndeksai",

dataType: "jsonp",

jsonp: "d"

//cache: false,

//jsonpCallback: "callback"

}

},

schema: {

data: ""

}

});

var ats = tipaiindeksai.read();

and tipaiindeksai.read(); returns undefined.

The call looks like this:
http://localhost:11336/Mobile/GetTipaiIrIndeksai?d=jQuery1710758081869687885_1337762101342&_=1337762101615

And it returns:

HTTP/1.1 200 OK

Server: ASP.NET Development Server/10.0.0.0

Date: Wed, 23 May 2012 08:35:01 GMT

X-AspNet-Version: 4.0.30319

X-AspNetMvc-Version: 4.0

Cache-Control: private

Content-Type: application/json; charset=utf-8

Content-Length: 939

Connection: Close

jQuery1710758081869687885_1337762101342([{"ID":0,"pav":"asd","indeksas":141.8},{"ID":10,"pav":"asdasd","indeksas":101.7}])

So it returns something, but it seems that DataSource can't parse it correctly as its result is undefined.
Please help to make it work :)

Data Source

asked on 23 May 2012

3 answers

364 views

Popup editor issues

Hi,

I am using the grids popup edit mode and below are the issues that i am facing.

1) The popup title is "Edit" irrespective of whether i am adding a new record or editing. How do i change the title to "Create" when i am adding a new record.
2) I want one of the field to be disabled on edit but enabled while adding the record. If i set the fields editable flag to false, the field is disabled even while adding a record.

Regards,
Sarvesh

Grid

answered on 23 May 2012