Questions on Kendo UI for jQuery Forum

3 answers

760 views

Hi,

I'm a new user of Kendo UI and i have trouble to understand the lifecycle of the application with Cordova.

Here, i would like to do different actions if the user is online or offline (redirect, show different content, ...).
I can't put the code in the app.Bootstrap.show() method because the variable navigator.connection is initialized only after the deviceReady event is fired.
I try with the after-show event but that's the same : the event is fired before the deviceReady event.

How can i do this ?

Thanks a lot for your help,
Antoine.

app.js :

var app = (function (win) {

'use strict';

var onDeviceReady = function() {

//Do some stuff

};

// Handle "deviceready" event

document.addEventListener('deviceready', onDeviceReady, false);

// Initialize KendoUI mobile application

var mobileApp = new kendo.mobile.Application(document.body, {

transition: 'slide',

skin: 'flat',

initial: 'bootstrap'

});

return {

mobileApp: mobileApp

};

}(window));

bootstap.js :

var app = app || {};

app.Bootstrap = (function () {

'use strict'

var bootstrapViewModel = (function () {

var show = function (e) {

// Check if user is online and do some stuff

               // By accessing navigator.connection

};

return {

show: show

};

}());

return bootstrapViewModel;

}());

<body>

<div id="bootstrap" data-role="view" data-show="app.Bootstrap.show">

<div class="view-content">

<h1>My app</h1>

<div class="content"></div>

</div>

....

</body>

General Discussions

answered on 31 Jan 2014

3 answers

159 views

Shared tooltip positioning - 2 issues

Good morning

http://jsbin.com/uqELuFo/2/edit

Shared tooltip places itself below the mouse cursor (where normal tooltip positions itself a bit off).
This makes it difficult to read sometimes and even worse: disables click on the category.
End-users can be taught to move the cursor to the left side of the category column (as the left edge of shared tooltip seems to be in the middle) but it's quite difficult if there are large number of categories i.e. narrow columns. And it's even much worse on the rightmost columns where tooltip covers it all.

The second problem is smaller. Whenever there is vertical scrollbar on the page, shared tooltip goes "below" it for rightmost columns in FF and Chrome (works ok in IE).

Is there a way to control the positioning?
Thanks.

Raido

Charts

answered on 31 Jan 2014

3 answers

113 views

Upload input takes up lots of space on page

We were previously using Bootstrap 2 with KendoUI, and we just recently upgraded to Bootstrap 3. Since the switch, we just started noticing that Kendo Upload widgets were taking up tons of space. The input itself, for whatever reason, is covering hundreds of pixels of the page (see screenshot), and the only thing that seems to be causing it to be that large is the "font: 200px monospace!important;" style that Kendo puts on the file input. We have no custom CSS styles affecting the file input; only Bootstrap 3 and KendoUI. Is anyone else experiencing this problem?

Upload

answered on 31 Jan 2014

8 answers

1.6K+ views

[Solved] How to pass variable to custom helper in clientTemplate

Hi there,

I have a problem, I want to set cell background programmatically. Is there any way to pass variable to a customer helper in ClientTemplate?

grid

columns.Bound(c => c.RiskProfileLevel).ClientTemplate(RiskProfileLevelTemplate(/*RiskProfileLevel*/).ToHtmlString());

Helper

@helper RiskProfileLevelTemplate(int riskProfileLevel)

{

if (riskProfileLevel == 1)

{

<div style="background-color: @CorporateSys.Website.Models.SiteUtil.RED_STYLE; width: 100%; height: 33px; margin: 0; padding: 0;"></div>

}

else if (riskProfileLevel == 2)

{

<div style=

"background-color: @CorporateSys.Website.Models.SiteUtil.AMBER_STYLE; width: 100%; height: 33px; margin: 0; padding: 0; "

></div>

}

else if (riskProfileLevel == 3)

{

<div style=

"background-color: @CorporateSys.Website.Models.SiteUtil.GREEN_STYLE; width: 100%; height: 33px; margin: 0; padding: 0; "

></div>

}

Thanks in advance

regards
Jerry

Grid

answered on 31 Jan 2014

5 answers

289 views

Scroll the grid content on mouse drag when invisable

I have a grid that has 100 items page size. However, my grid has visibility of 10 rows. I need to be able to select the rows that are in the invisible area (meaning when i select a row and drag the mouse to be able to select multiple rows, so the grid needs to scroll while i am dragging the mouse and select the new visible rows.) By default this is disabled. But in some of the demos i can see the behavior i want, but i do not know how to achieve it.( http://jsbin.com/ulizuv/2/edit or http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html)

Thank you

Grid

answered on 31 Jan 2014

1 answer

468 views

[Solved] changing the properties/attributes of a combobox

Hi,
I am using plain HTML and jquery to create kendo comboboxes and bind data to it. My problem is that I want to change the datatextfield and datavaluefield of the combo based on some values. Initially what I will do is I shall initialise the combobox like this
$("#TestControl").kendoComboBox(
{
placeholder: "Select Product",
filter: "contains",
autoBind: false,
suggest: true,
minLength: 0
});

Then at some other place I wnat to assign the datatextproperty to the control something like this.

auto = $("#TestControl").data("kendoComboBox");
auto.setDataSource(dataSource); // this line works
auto.options.dataValueField = autoCompleteValueField; // this line I am not sure (autoCompleteValueField is a variable which has a value)
auto.options.dataTextField = autoCompleteTextField; // this line I am not sure (autoCompleteTextField is a variable which has a value)

Can this be done or is there a way to do it? Please do help

Thanks in advance

Regards,
Vijay

ComboBox

answered on 31 Jan 2014

1 answer

356 views

Disabling colums or single gridcells/td's possible

Hi,

we've built a two-column grid where only the cells in the second column should be editable.
The text in the cells of the first column cannot be edited, but the row can be selected as well as the cells in the first column can be accessed by mouse and keyboard which is very annoying as the should be ignored when navigating by keyboard and not selectable by mouseclick.

They should behave like let's say a cell in the table header as it cannot be clicked and selected.

Is there a way to achieve this?

I've enclosed a screenshot to describe in detail what the problem is... the column with the red arrow is not editable und should therefore be not selectable and thus white, and the cells in the red brackets are editable.

Cheers,
Heike

Grid

answered on 31 Jan 2014

3 answers

133 views

Diagramming Control

Hi,

I need to be able to diagram relational objects and would obviously prefer to stay within the Telerik fold for consistency sake but I can't find a means of showing relationships between objects (like in the attached image - example from here http://familyshow.codeplex.com/). I need to be able to customise the lines representing the relationships and also customise the object shapes and appearance (i.e. similar to RadDiagram).

I need to be able to provide this functionality web-based and on any device.

Are there any plans to provide this functionality either with Kendo UI or with the web-based RadControls?

If not, can we get something added to the road map.

If not, does anyone have any ideas how I can deliver on this requirement?

Thanks,
Martyn

General Discussions

answered on 31 Jan 2014

1 answer

142 views

DataSource, no 'slice' method in xml response

Hello, I´m new using kendo mobile and I´m trying to invoke a wcf rest service, using xml.

For instance, this login invocation:

             var username = "admin";
             var password = "admin";

             var remoteDataSource = new kendo.data.DataSource({
               type: "xml",
               schema: {
                   type: "xml",
                   data: function (response) {
                       return response;
                   }
               },
               transport: {
                   read: "http://localhost/MyService.svc/Security/Login?" +
                       "user=" + username + "&password=" + encrypted,
                   success: function (result) {
                        options.success(result);
                   },
                   error: function (result) {
                        options.error(result);
                   }
               }
           });

           remoteDataSource.fetch();

Where service response has this structure:

<UserData>
    <IsSuccess>true</IsSuccess>
</UserData>

That code is executed in a button event and when debugging, success and error functions are never reached.
This call remoteDataSource.fetch() raises an unhandled exception: "Javascript exception: object has no method 'slice'"

Any help is appreciated about using DataSource when response is xml data.

Thanks in advance.

General Discussions