Questions on Kendo UI for jQuery Forum

3 answers

405 views

Dynamic Ajax call, get tooltip to fix it's position

This has been asked before more or less

http://www.telerik.com/forums/tooltip-opens-in-the-wrong-place-when-the-marker-is-clicked-and-then-corrects-itself-when-the-marker-is-clicked-a-second-time

I have a series of Ajax calls for loading tooltips, the size will vary per call.

I get the behaviour described in the other thread. The workaround of setting the width/height will probably work

What would be better would be if I could initially set the tooltip to invisible, hide it, get it to fix it's position and then show it. Is this possible? It obviously knows how to fix itself once the data is loaded

thanks

ToolTip

answered on 23 Sep 2014

1 answer

144 views

[Solved] Wildcard datasource refresh?

I have a page where a user can select multiple listviews to view. At certain points, i want to refresh all of these listviews. I'm trying to refresh them using a wildcard statement, but:
<code>
$("[id^=lstMss]").data("kendoListView").dataSource.read();
</code>
only refreshes the first listview, none of the other ones (all of my listviews start with the id of 'lstMss'). Is there a better, easier way to do this?

Data Source

answered on 23 Sep 2014

8 answers

980 views

DatePicker format angular

Hi,
I am having some trouble formatting dates that come from a web api as MM/dd/yyyy. When using this format I am not able to bind the date, however other formats such as yyyy-MM-dd work just fine.

Here is my view:
<input name="enddate" data-kendo-date-picker data-k-format="'MM/dd/yyyy'" data-ng-model="trip.EndDate" data-k-ng-model="trip.EndDate" required>

When the promise returns from the web api if I set the date to the exact date that gets returned the above format works: i.e: $scope.trip.EndDate = "2015-07-11T00:00:00"

Any ideas what I might be missing?

Thanks,

DatePicker

answered on 23 Sep 2014

1 answer

416 views

Kendo Grid Transport with traditional = true param

I've been trying to figure out how to send a multi-select list back to my MVC controller, what I ended up having to do was pass the traditional: true parameter into the transport.read element. However, this no longer passes the sort parameter. I have re-worked an example here:

http://dojo.telerik.com/aPAQ/2

Note that I have commented out type: 'odata', because I am not using odata (no, the grid does NOT load, but I am looking at the request that is built). The key here is to look at the request that is sent in firebug or some other dev util (chrome dev tools). Here is the sort parameter now:

take:20
skip:0
page:1
pageSize:20
sort:[object Object]

Is there a way around this?

Grid

answered on 23 Sep 2014

1 answer

536 views

Angular template inside kendo directive markup

Hi,

I'd like to use the Kendo drop down with an Angular template inside the markup or some referenced file.
In my case it is used like this at the moment:

<select ...

k-template="'<b>#: displayName #</b><br/>#: name #'"

k-value-template="'#: displayName #'">

</select>

But I would like to use it the "angular way", like:

<select ...

k-template="'<b>{{dataItem.displayName}}</b><br/>{{dataItem.name}}'"

k-value-template="'{{dataItem.displayName}}'">

</select>

That way, the drop down items, defined in the template, only appear, if I declare the template manually inside some "k-options". I've already experimented with the "ng-non-bindable" attribute, so that the angular expression can be interpreted later, but without success.
Some advice would be helpful.

I'm also looking for a solution to reference some template url. Can this be done natively with Angular or Kendo?

Kind Regards
Thomas

DropDownList

answered on 23 Sep 2014

2 answers

332 views

[Solved] Week view show only all day events

Hi Guys!

I have a scenario where i need to display only all day events in scheduler week view(vertical grouped) and hide all time specific event slots. From the scheduler configuration is not clear to me how to go about it, is there any standard way to do it?

Cheers!

Scheduler

answered on 23 Sep 2014

5 answers

309 views

ListView in MVVM mobile application with pull to refresh event.

Hi,

I've successfully managed to built an MVVM mobile application getting its data from a REST service and load a listview mobile control. However I don't seem to be able to refresh the data using the "pull to refresh" event.of the listview control.
What I'd like to know is, given the code below, how I can bind to the "pull to refresh" event from a view-model and make a call to the model entity.

Thanks for your help.

Best regards,

Gilles Kern

here is my code:

Main.js:

01.// Variables

02.var SPSite = "https://cerfich.sharepoint.com";

03.

04.// Wait for Icenium to load

05.document.addEventListener("deviceready", onDeviceReady, false);

06.

07.function onDeviceReady() {

08.

09. // Authenticate against SharePoint server

10. SPOAuth(SPSite);

11.

12. // Initialize ListView

13. $("#listview").kendoMobileListView({

14. pullToRefresh: true

15. });

16.

17. // apply the bindings

18. kendo.bind($("#ListSPItems"), VMListSPItems);

19.}

View-Model:

01.var VMListSPItems = kendo.observable({

02.

03. // Hold SharePoint list items

04. GetCustomers: function(e)

05. {

06. var Customers = GetAllCustomers(SPSite);

07. Customers.success(function(data){

08. // Get Value from SharePoint

09. var AllCustomers = null;

10. AllCustomers = data.d.results;

11.

12. // Update data

13. VMListSPItems.set("GetCustomers", AllCustomers);

14. });

15. },

16.});

View:

01.<div data-role="view" id="ListSPItems" data-title="Customers List" data-layout="mobile-tabstrip">

02. <div id="CustomersError" />

03.

04. <ul id="listview" data-bind="source: GetCustomers" data-template="itemTemplate"></ul>

05.

06. <script id="itemTemplate" type="text/x-kendo-template">

07. <li><a> ${data.Title} </a></li>

08. </script>

09. </div>

Model:

01.function GetAllCustomers(siteurl)

02.{

03. return $.ajax({

04. url: siteurl + "/_api/lists/getByTitle('Customers')/items",

05. type: "GET",

06. headers: {

07. "ACCEPT": "application/json;odata=verbose"

08. },

09. //success: function (data)

10. //{

11. // //array = data.d.results;

12. // Customers = data.d.results;

13. //},

14. error: function(xhr, ajaxOptions, thrownError){

15. //var message = xhr.responseText.find("message").text();

16. var message = xhr.responseText;

17. $("#CustomersError").html(message);

18. }

19. });

20.}

ListView (Mobile)

answered on 22 Sep 2014

1 answer

122 views

[Solved] default currency validator broken with step:0.01

I have modified the kendo grid popup editor example to have min:0.01 and step:0.01 as one penny is the minimum currency unit. However, this causes the browsers based price validation to fail when you enter '9.88'. '9.87' works fine, but it really doesn't like '9.88' - it displays 'Unit price is invalid'.

UnitPrice: { type: "number", validation: { required: true, min: 0.01, step:0.01} },

I have created a repro case here:

http://dojo.telerik.com/aTaRE

Just edit any of the entries in the grid (in the pop-up editor) and change the Unit Price to 9.88. This is in the chrome browser if it makes a difference.

Cheers, Paul.

Grid

answered on 22 Sep 2014

1 answer

253 views

Use Angular directive for column template

I have a column defined like below:
{ field: "tnum", title:"Trade", template:"<div cr-deal-sheet=\"#: tnum#\">#: tnum#</div>" },

The directive works fine when it is on the page, however it does not get compiled when it is used inside the grid. The "#: tnum" DOES get substituted, however the directive attribute is just silently ignored.

Thanks in advance

Grid

answered on 22 Sep 2014

3 answers

478 views

Kendo treeview ondemand load node selection fails after expand

Hello,
I have a Kendo treeview with ondemand loading.I have a grid displaying objectids on right side and when clicked on a row on grid i use treeview expandpath showing all it's parent nodes. Now i want to select the node with the id after expanding and scroll to the node automatically. Here is my jquery code on grid row click event
$("#Grid").on("click", " tbody > tr", function () {

var datagrd = $("#Grid").data("kendoGrid").dataItem($(this));
alert(datagrd.ObjectID);
var rootDir = "@Url.Content("~/")";
$.ajax({
url: rootDir + "Objekt/LoadParents",
data: {
strSelectedObjectID: datagrd.ObjectID
},
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
alert(data);
var arrA = data.split(',');

var treeView = $('#treeview').data('kendoTreeView');
treeView.expandPath(arrA);

                    var nodeDataItem = treeView.dataSource.get(datagrd.ObjectID);

var selectednode = treeView.findByUid(nodeDataItem.uid);
treeView.select(selectednode);
treeView.trigger("select", { node: selectednode });

}
}
});

Everything works fine and node is expanded but it does not get selected i have to manually scroll to the expanded node

Thanks

Anamika

    });

TreeView

answered on 22 Sep 2014