Questions on Kendo UI for jQuery Forum

1 answer

78 views

Hello,

Are view events handled differently for views that are children of popovers? I set up the following PopOver. The PopOver is opened by a function in the underlying view from code, passing a valid target. It works consistently, meaning the popover can be opened and closed over and over with no problems. However, the function "popupshow" defined in the view's data-show attribute is only called the first time the PopOver is opened. In the debugger, I have verified that the view's show function is still pointing to the correct function - it is just not called ever again after the first open.

Here is the popover:

<div id="login-popover" data-role="popover" data-popup='{ "height": "220", "width": "250" }' data-close="reset">

<div data-role="view" data-title="Login" data-model="logins" data-init="logins.popupinit" data-show="logins.popupshow">

<div id="login-wrapper" data-role="content">

<form id="login-form">

<input type="email" id="username" data-bind="value: info.username" placeholder="EMAIL"/>

<input type="password" id="pwd" data-bind="value: info.password" placeholder="PASSWORD"/>

<div>

<span class="k-invalid-msg" data-for="username"></span>

</div>

<div>

<a data-role="button" data-click="login">Login</a>

<a data-role="button" data-click="register">Sign Up</a>

</div>

</form>

</div>

I open using this call:

$("#login-popover").data("kendoMobilePopOver").open("#valid-element");

and close with either this call:

$("#login-popover").data("kendoMobilePopOver").close();

or by simply tapping outside of the PopOver. The "reset" function in the data-close does nothing but change the class of an unrelated visual element. The "reset" is called consistently, too, no matter how many times the popover is opened. Only the show goes away. Any ideas would be appreciated.

Thank you,

Kelly

PopOver (Mobile)

answered on 19 Mar 2014

1 answer

127 views

Bug in drawer's animation

This is something easier to show than to explain. Take a look at the video https://www.youtube.com/watch?v=ukW-2cUrGJM

I mean to say "display:none" css in the video :)

The gist: quick swiping creates a new transition before the current one completes, so onEnd event fires and hides the drawer in its open state.
It is quite possible that quickly clicking the drawer button gives the same effect, but it is much hard to get since the button is moving during the transition.

this.transition = new Transition({

axis: AXIS,

movable: this.movable,

onEnd: function() {

that._transitioning = false;

if (movable[AXIS] === 0) {

element[0].style.cssText = "";

that.element.hide();

}

});

Drawer (Mobile)

answered on 19 Mar 2014

1 answer

149 views

Kendo MVVM vs. Angular Kendo

I've been looking at Angular Kendo and am wondering what kind of benefit or need beyond Kendo's MVVM implementation that Angular serves.

I've reviewed all the documents on labs.kendoui.com and haven't found anything that clearly details what drove the decision... which could be very important information for architect types that are trying to put together a stack for a web-based application.

Was this a case of using AngularJS to see if you could... or?

General Discussions

answered on 19 Mar 2014

6 answers

1.1K+ views

Using an image instead of text in title?

Hello,
How do I go about inserting an image into a column header instead of text in the Grid?

Also, if row templates are used - is it possible to maintain alternate row highlight? As soon as I start using templates - there is no alternate row highlighting any longer
Thanks, I appreciate any help!

Grid

answered on 19 Mar 2014

2 answers

213 views

Appended tabs not getting opacity changed

I am currently using Kendo UI Complete v2013.2.918 and I have a Tabstrip Issue.

Currently I pull an unknown number of items from a database and break these into groups of 5.

For each group of 5, I create a tab (1-5, 6-10,11,15 etc) and add 5 panel bars to each tab 1 bar for each item.

This works fine.

I then use ajax calls to create a new (panelbar) Item and if the last tab has room I just reloading the last tab, if not I append a new tab to the end and use the contentUrl to load the new tab of panel items.

The new tab loads fine but the new tab content opacity is not toggled when I switch to other tabs so my new tab content is shown across all tabs.

If I manually set the opacity to 0 it looks fine (hidden on all tabs) until i go to the last tab again which changes it back to 1 and the process repeats.

I believe the issue is that the new tab is not added into the function to set all tab opacity to 0 before setting the active tab to 1 but I cant find where that call is made.

TabStrip

answered on 18 Mar 2014

1 answer

169 views

Ajax call breaks binding to object children

Without the ajax call, My main view binds to my parent class
and the partial view on main view, binds to a child member of the parent
class

parent...

public class Client

{

[ScaffoldColumn(false)]

public int Id { get; set; }

[DisplayName("Name")]

[Required]

[StringLength(120)]

public string Name { get; set; }

     // etc...

     public virtual Address Address { get; set; }

}

child of parent...

public class Address

{

[ScaffoldColumn(false)]

public int AddressId { get; set; }

[DisplayName("Address")]

[Required]

[StringLength(200)]

public string Street { get; set; }

// etc...

[ForeignKey("Client")]

public int? Id { get; set; }

public virtual Client Client { get; set; }

}

the main view

@using (Html.BeginForm("Create", "Client", FormMethod.Post, new Dictionary<string, object> { { "data-htci-target", "addressData" } }))

{

@Html.AntiForgeryToken()

<div class="row">

@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })

<div class="col-sm-4 col-md-4 col-lg-4">

@Html.Kendo().AutoCompleteFor(model => model.Name).HtmlAttributes(new { style = "width:100%" })

@Html.ValidationMessageFor(model => model.Name)

</div>

@{ var vdd = new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "Address" } };}

@Html.Partial("_AddressPartial", Model.Address, @vdd)

// yada yada...you can imagine the rest of the very standard view

The partial view's model is Address and all hooks up.
When I post back to the server the Address member is properly filled with entered data from the partial view...

So now...in my partial view, I now load the js to call the async
routine to load the IP GEO data for the user - so it pre-fills the city,
province, country

Any example of an ajax call will suffice...mine calls an
AddressControl, returns a partialview result and replaces a div named
addressData with the updated partialview :

$(function() {

var urlGeoIeoip = "http://ip-api.com/json/?callback=?";

$.ajax({

url: urlGeoIeoip,

type: "GET",

dataType: "json",

timeout: 5000,

success: function (geoipdata) {

$.ajax({

url: "/getlocationdata/" + geoipdata.country + "/" + geoipdata.regionName + "/" + geoipdata.city,

type: "GET",

timeout: 5000,

success: function (data) {

//alert(data);

//var $form = $(this);

// var $target = $($form.attr("data-htci-target"));

var $newHtml = $(data);

//alert($target);

$("#addressData").replaceWith($newHtml);

$("#City").data("kendoComboBox").value(geoipdata.city);

$("#State").data("kendoComboBox").value(geoipdata.regionName);

$("#Country").data("kendoComboBox").value(geoipdata.country);

}

});

}

}).fail(function(xhr, status) {

if (status === "timeout") {

// log timeout here

}

});

All works great!

BUT

Now, when I post back to the user via the submit button, the Address child member of the parent class is null....

How do I get it to rebind the Address member of the parent class after return of the ajax call?

General Discussions

answered on 18 Mar 2014

7 answers

164 views

select grid data except the column with edit button

How can I do:

var allData = $("#grid").data("kendoGrid").dataSource.data();

allData = allData.column(-1); ==> this delete the last column..

Grid

answered on 18 Mar 2014

5 answers

122 views

Dropped Draggables block other Draggables

I have a multi-point drag-and-drop scale, where 100 kendoDropTarget "ticks" span the width of the screen.

User drags kendoDraggable "tiles" and drops over the scale; tile is added to tick's drop zone.

The problem is when the user drags a new draggable and hovers over the recently-dropped draggable, the drop action for the underlying "tick" dropTarget is blocked. I need this action to NOT be blocked.

JSFIDDLE: http://jsfiddle.net/bsS2L/

Drag and Drop

answered on 18 Mar 2014

3 answers

238 views

Grid navigation reset to first cell after editing.

Hi,

I have the grid setup with a custom inline editor and navigation enabled.
When using tab, arrow keys or enter/return after changing the value of a cell the next cell is not selected, but it jumps to the first cell in the grid.
I can navigate through cells as expected with the editor displayed in each cell as I move but if I update a value than the selection jumps back to the first cell.

In debug I can see that the $("#tsGrid").data("kendoGrid")._current is being reset on tab etc. but only when I have changed the value.

Any help is appreciated.

Thanks
Euan

Grid

answered on 18 Mar 2014

9 answers

209 views

BUG: data-reload="true" causes tabstrip gone while loading

Hi, guys.

This framework is awesome... like a native app! but i have a problem that subtracts points to my user experience.

The problem is about navigating to a remote view for second time, where the view has the data-reload=true attribute.

This problem wont happen when data-reload is set to false. But if i set it to false the data in the remote view wont update.

When i go to the remote view with data-reload=true for the first time no flicker appears and work perfect!... only for second time and the times after that (header and tabstript footer dissapear)

please advise to fix it...

General Discussions

answered on 18 Mar 2014