Questions on Kendo UI for jQuery Forum

1 answer

188 views

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.2K+ 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

237 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

192 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

205 views

[Solved] 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

137 views

[Solved] 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

261 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

265 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

2 answers

293 views

[Solved] kendo.widgetInstance() parameters

With regard to the documentation found at:

http://docs.telerik.com/kendo-ui/getting-started/widgets

Is it...

var widgetObject = kendo.widgetInstance(widgetElement);

or...

var widgetObject = kendo.widgetInstance(widgetElement, kendo.ui);

Is the second parameter optional?

General Discussions

answered on 18 Mar 2014

2 answers

385 views

ScrollView is missing a lot of essential functionality... (?)

Hey guys

I have pages inside my scroll-view which provides an interactive "settings-mechanism".
What that means is my application will react to a vertical "swipe-gesture", and will change time-settings according to the scrollView-page.

This works very smooth and I'm quite happy as these are my first "kendo-UI steps".
Now the problem begins once you don't swipe straight, but your vertical movement is enough to trigger the "start page-change"-animation.
So what I need to do is to disable the scrollView, once the settings-adjustment got initiated.

My workaround is to disable this functionallity when I detect a more vertical swipe than a horizontal one (through dragstart & drag).
But this is not good for the enduser as he can start a settings-adjustment on the page and then change to a scrollView-page-transition with the same movement.

On my journey to find a solution, I was mainly looking for a way to achive these events/methods:
-Events:
AboutToChange (I don't understand the Changing-Event... It fires when the user already made a full transition... or is this a Chrome-Bug?)
Cancled
-Methods:
Enable / Disable the ScrollView

Like in the title mentioned, I thing these are quite essential things...I don't feel like I'm doing something very exotic here, or am I?
Maybe I'm missing something, because I can't find threads about that here, nor on stackoverflow.

So are there truely no workarounds / properties / whatever to "fix" my problem? Or should I change my widget with something else (maybe from the community?).

Thank you very much.

Cheers,
Richard

ScrollView (Mobile)

answered on 18 Mar 2014