Questions on Kendo UI for jQuery Forum

1 answer

112 views

When using remote views, should the transition effects work? When I use a local view transitions works fine, but with remote views the ui just gets refreshed without any transition taking place.

Thanks

Application

answered on 17 Apr 2012

1 answer

263 views

Force Input To Be Part of Data Set With AutoComplete

I have a list of codes that I'd like a user to be able to input into a textbox. The list of codes will be separated by a comma so they can input n+1. But I don't want the user to be able to enter a code that isn't in the dataset. As of right now I have a hard coded data array, but the plan is to use an ASMX web service that returns filtered data based upon what the user has typed.

var data = [

"M10A",

"M11A",

"M12A",

"M15A",

"M15B",

"M15C",

"M15D",

"M16A"

];

//create AutoComplete UI component

$("#<%= txtMailCodes.ClientID %>").kendoAutoComplete({

dataSource: data,

filter: "startswith",

placeholder: "Mailing Codes...",

separator: ", "

});

I assume I could do something with functions for on input or something along those lines to validate the entry, but I'm hoping there is a property for this.

AutoComplete

answered on 17 Apr 2012

0 answers

153 views

Editable Grid suggestions

Hello,

With last Kendo UI version we can edit via batch/inline/popup, it's great.
Also great to have localized data on cultures directory.

Some suggestions :
1. could you localize your grid.js (and others) ?

example : kendo.grid.js ln 1404 :

var container = that._editContainer = $(html)

.appendTo(that.wrapper)

.kendoWindow(extend({

modal: true,

resizable: false,

draggable: true,

title: "Edit",

visible: false

}, options));

Title is "Edit". Sure in english it's OK, but in any other language it's not.

2. on popup edition could you give us a way to edit model.fields instead of only "colums" ?
example :
- i have a model with 6 fields : Name (Id), Description, IsValidated, Value, Module, Language
- i have a table with 4 of those fields (not enought space to show them all) : Name (Id), Value, Module, Language

Actually if i want to use your default implementation of Popup edition, i can only edit those 4 fields (Name (Id), Value, Module, Language) and not the others due to Grid.js ln 1377 binding on columns :

for (idx = 0, length = that.columns.length; idx < length; idx++)

Could you add an option to bind to model.fields instead, should make sense because it's on model.fields where we defined properties like "editable","nullable" ,etc... or can you add an editable.columns options giving us a way to edit what we want in the order we want ?

3. on popup edition , could you document options.editable.template && editable.template.mode ?
we could see on source code that we can provide a template for edition, could you add sample & documentation ?

example :

<script id="popinEditResource" type="text">

<div class="k-edit-label"><label for="Language">Langue</label></div>

<div class="k-edit-field">#= Language #</div>

<div class="k-edit-label"><label for="Name">Nom</label></div>

<div class="k-edit-field">#= Name #</div>

<div class="k-edit-label"><label for="Module">Module</label></div>

<div data-container-for="Module" class="k-edit-field"><input data-bind="value:Module" name="Module" class="k-input k-textbox" type="text"></div>

<div class="k-edit-label"><label for="Value">Valeur</label></div>

<div data-container-for="Value" class="k-edit-field"><input data-bind="value:Value" name="Value" class="k-input k-textbox" type="text"></div>

<div class="k-edit-label"><label for="Description">Description</label></div>

<div data-container-for="Description" class="k-edit-field"><input data-bind="value:Description" name="Description" class="k-input k-textbox" type="text"></div>

<div class="k-edit-label"><label for="IsValidated">Validé</label></div>

<div data-container-for="IsValidated" class="k-edit-field"><input data-bind="checked:IsValidated" data-type="boolean" name="IsValidated" type="checkbox"></div>

</script>

and on Grid definition :

editable: {

mode : "popup" ,

template: $("#popinEditResource").html()

},

this last sample allow to show only 4 columns on grid & edit 6 colums, but popin template has to be done manually.

thanks for all,
BloP

Grid

asked on 17 Apr 2012

0 answers

128 views

Pass user Geolocation details in URL

Hi Guys,

I am exploring Keno ui. Till now its coming great.

Here is what i want to implement :
1. Want to fetch the user current position -- I am able to get the user location using Geolocation object in the HTML5.
2. Want to pass it to url of datasource -- Here is the issue as html5 Geolocation is an asynchronous call. Can you suggest how can i catch & pass the user location to data source url. I want stop execution of code until we get user location.

I am building by referring this example : http://demos.kendoui.com/mobile/listview/pull-to-refresh.html But with location based web serrvice.

Thanks

Data Source

asked on 17 Apr 2012

4 answers

82 views

bug in Grid save method

Hi

$("#grid").kendoGrid({

columns: [

{field: "Id", title: "№"},

{field: "Text", title: "Text"}

],

dataSource: {

data: [

{"Id":"4","Text":"hi"},

{"Id":"7","Text":"word"}

],

schema: {

model: {

id: "Id",

fields: {

Id: {editable: false, validation: {required: true}},

Text: {nullable: true}

}

},

scrollable: false,

sortable: true,

filterable: true,

editable: true,

save: function(e) {

console.log(e);

}

}).data("kendoGrid");

If to edit the first row, then the second one, then the first one again, save method is called several times while editing the last time

Grid

answered on 17 Apr 2012

2 answers

311 views

Add tree node without reloading all data

TreeView html:
<ul id="ouTreeview">

<li data-expanded="true" data-ouid="0" data-isexternal="false" data-parentid="0">

<label>Root Element</label>

</li>

</ul>

Initializing treeview:



<script language=

"javascript" type="text/javascript">

var ouTreeview;

var selectedOUId;

var selectedOUName;

var ouTreeviewNode;

var selectedParentId;

var selectedOUIsExternal;

function setSelectedTitleById(id) {

selectedOUName = $(".ouLeftCol:first").find("#ouTreeview:first").find("li[data-ouid='" + id +"']:first").find("label:first").text();

}

$(document).ready(function () {

function onSelect(e) {

ouTreeviewNode = e.node;

selectedParentId = $(e.node).data("parentid");

selectedOUIsExternal = ($(e.node).data("isexternal").toString().toLowerCase() ==='true');

selectedOUId = $(e.node).data("ouid");

setSelectedTitleById(selectedOUId);

$.ajax({

url: "@Url.Action("LoadOUForm", "DashBoard")",

type: "POST",

cache: false,

success: function (response) {

$(".ouRightCol").html(response);

if (selectedOUId != "ROOT") {

$("table.ouForm").find("input[id='ouTitle']").val(selectedOUName);

if (selectedOUIsExternal)

{

$("table.ouForm").find("input[id='ouIsExternal']").attr("checked","checked");

}

else

{

$("table.ouForm").find("input[id='ouIsExternal']").removeAttr("checked");

}

});

}

ouTreeview = $("#ouTreeview").kendoTreeView({ select: onSelect });

});

I need append new tree node to existing tree with my attributes.

TreeView

answered on 17 Apr 2012

5 answers

253 views

Refreshing the pager

Hi,

Is there a way to refresh the pager beneath the control? I'm evaluating the scrollview to show content in specific width, but when the device orientation is changed I'm tweaking the size of the parent container and everything works except the pager which is still showing the previous page count and selection.

I'm looking for something like $("#chart").data("kendoChart").refresh()....

Regards,

Georgi

ScrollView (Mobile)

answered on 17 Apr 2012

1 answer

83 views

Vertical scroll bug with large dataset (Firefox)

Hello,

There's a bug with the vertical scroll when displaying more than 938 000 virtual row in a grid using Firefox. The scroll button is not displayed and you can't scroll with the mouse wheel.

This bug occurs with de default td padding. However, if you set the the td padding to 0 like this...

.k-grid td

{

padding: 0;

}

the bug can be reproduced but only if you have more than 1 700 000 records (maybe less...)

Simon

Grid

answered on 17 Apr 2012

1 answer

65 views

sticky fingers in iOS with The Form Elements demo

Hi,

Just downloaded the latest and browsed to the examples\mobile\application\forms.htm page. Then page looks good on iPhone 3gs and Samsung Galaxy S, however on the Blackberry Curve 9380, the labels and fields overlap.

Another huge problem is that on iOS when I scroll up and down, the page feels sticky. I cant see the last couple of fields till I use a lot of force to reach them. This happens only when the url bar is visible. After a while when the url bar disappears in the browser, then my scrolling works fine. Of course once my url bar is back, scrolling to the bottom of the page is almost impossible.

Other examples like mobile/tabstrip/index.html scroll fine on iOS.

Any pointers would be welcome.

----------------
Edit Apr 14th

After analyzing the issue further, I realized my original post doesn't accurately describe the problem. The real reason for the problem I described above is as follows.
When kendo UI Mobile determines the height of the scrollable area, it does not take into account that the URL bar may be visible on the iphone 3gs. So as long as the URL bar is visible on the screen, I cannot scroll down to the last couple of records. When the URL bar is not visible anymore, I can scroll successfully to the bottom of the screen.

Another issue I faced was on the Samsung Galaxy S (GINGERBREAD). On the same page at examples\mobile\application\forms.htm, the 1st and 2nd fields are drop downs and it all works OK. However when I scroll down, the 1st and 2nd fields visible on screen are something else like the date field for example. But when I touch the 2nd visible field to input the date, the drop down pops up (which was the 2nd field before I had scrolled down). So maybe kendo is not updating the positions of controls after a scroll on android.

Thanks in advance.
A. Tauro

Application

answered on 17 Apr 2012

0 answers

122 views

splitter demo not working in google chrome

Hi Guys,

When I am executing splitter demo example from kendoui in Google chrome. I am not getting same layout which is in Demo. see in attachment.

then i used following references for js and styles and it worked fine.

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>

I just want to run this demo in mobile. I have one question that How can i use same layout for iphone and i pad as the size for both the phones are different.

I got some info from forum that the Kendo UI Web Splitter can not be fully used in Kendo UI Mobile apps.

Could you please anyone suggest which layout can i use which will run on iphone and i pad.

thanks,
prashant

Splitter

asked on 17 Apr 2012