Questions on Kendo UI for jQuery Forum

1 answer

86 views

So if I want my SPA and my mobile to share code and the mobile layout...

So I really like the layout feature in mobile and application.
My main question is if you have someone hitting your website, do you first check if it's a
mobile device and then redirect them to another page, or is it ok to put everything on one page with the layout options:
<div data-role="layout" data-id="layout" data-platform="ios">

would I then use data-platform default for the web.
Is it ok to put this in a web page?
var app = new kendo.mobile.Application(document.body);

I'm just trying to re-use as much code as possible.
Maybe it's just best to put the viewmodels for kendo UI MVVM in .js files and then re-use those and make seperate web pages for mobile and web.

Application

answered on 15 Apr 2014

4 answers

2.4K+ views

[Solved] parameterMap - No models sent to controller

Hi guys, I'm new to Kendo and am having problems getting the parameterMap to work. Please help me to understand why given the following datasource and grid configuration no model params are passed to the create controller action. I have read the documentation on parameterMap and still don't understand why my configuration is not working.

<div id="grid" style="margin-bottom: 20px"></div>

<script type="text/javascript">

var supporterDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "<%= supporters_admin_customer_support_clients_url + '.json' %>",

dataType: "json"

},

schema: {

user_id: { type: 'number' },

full_name: { type: 'string' }

}

});

var supporteeDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "<%= supportees_admin_customer_support_clients_url + '.json' %>",

dataType: "json"

},

schema: {

user_id: { type: 'number' },

full_name: { type: 'string' }

}

});

</script>

<script id="popup_editor" type="text/x-kendo-template">

<div class="k-edit-label" style="padding-right: 10px">

<label for="SupporterName">Customer Support Rep</label>

</div>

<input name="SupporterName"

data-bind="value:supporter_name"

data-value-field="user_id"

data-text-field="full_name"

data-source="supporterDataSource"

data-role="autocomplete" />

<div class="clear"></div>

<div class="k-edit-label" style="padding-right: 10px">

<label for="SupporteeName">Researcher</label>

</div>

<input name="SupporteeName"

data-bind="value:supportee_name"

data-value-field="user_id"

data-text-field="full_name"

data-source="supporteeDataSource"

data-role="autocomplete" />

</script>

<% content_for :javascript do %>

var crudServiceBaseUrl = "<%= admin_customer_support_clients_url %>",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudServiceBaseUrl + '.json',

dataType: "json"

},

create: {

url: crudServiceBaseUrl + '.json',

type: "POST",

dataType: "json"

},

update: {

url: function (data) {

return crudServiceBaseUrl + '/' + data.id + '.json';

},

type: "PUT",

dataType: "json"

},

destroy: {

url: function (data) {

return crudServiceBaseUrl + '/' + data.id + '.json';

},

type: "DELETE",

dataType: "json"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

pageSize: 20,

serverPaging: false,

serverFiltering: false,

serverSorting: false,

schema: {

model: {

id: "id",

fields: {

id: { editable: false, type: 'number' },

supporter_id: { type: 'number' },

supporter_name: { type: 'string' },

supportee_id: { type: 'number' },

supportee_name: { type: 'string' },

created_at: { editable: false, type: 'date' },

updated_at: { editable: false, type: 'date' }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

editable: {

mode: "popup",

template: kendo.template($("#popup_editor").html())

},

edit: function(e) {

$(e.container)

.find("input[name='SupporterName']")

.data("kendoAutoComplete")

.bind("change", function(e) {});

$(e.container)

.find("input[name='SupporteeName']")

.data("kendoAutoComplete")

.bind("change", function(e) {});

},

toolbar: ["create"],

height: 430,

filterable: true,

sortable: true,

pageable: true,

columns: [{

field: "supporter_name",

title: "Customer Support Rep",

type: "string"

}, {

field: "supportee_name",

title: "Researcher",

type: "string"

}, {

field: "created_at",

title: "Created At",

type: "date",

format: "{0:dd-MMM-yyyy hh:mm tt}",

parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]

}, {

field: "updated_at",

title: "Updated At",

type: "date",

format: "{0:dd-MMM-yyyy hh:mm tt}",

parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]

}, {

command: ["edit", "destroy"],

title: " ",

width: "175px"

}]

});

<% end %>

Data Source

answered on 15 Apr 2014

10 answers

236 views

Stock Chart double selection problem

Hello,

I have one selection tool on my main chart, and another on the navigator... I want to use the one in main chart as a detailed zoom in tool, so I want to invoke the same selectEnd event as navigator selector. Currently I am rendering whole chart with each zoom select, so can I invoke the default selectEnd event of navigator's selector? I can't seem to find this native function... Please help me to find a way to implement this logic, with Kendo!

Thanks

Charts

answered on 15 Apr 2014

5 answers

256 views

How to properly rebuild a list view with different parameters?

Hello,

I have a list view that can display, depending on the user behavior, different sets of results. One simply has to click on a button to trigger a JS event that will retrieve the appropriated data.

Basically, I have a very simple listview in my homepage.html:

<div id="mainContainer">

<ul id="list-container">

</ul>

</div>

on which I attache a listview with jQuery:

$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(

function( response )

{

var template = Handlebars.compile( $( '#eventListTemplate' ).html() );

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create(results)

});

} );

And when a user needs other results, I repeat this process again. For instance:

$.when( User.getUsersNearby( position.coords.latitude, position.coords.longitude, Usr_radius, Usr_limit, Usr_offset ) ).done(

function( response )

{

var template = Handlebars.compile( $( '#userListTemplate' ).html() );

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create( results )

});

And I can see the results I want to be display in the listview. But I've noticed 2 things:

1 - If the previous list was longer than the new one, the user can get "stuck" at the bottom of the list where no results are displayed. I would like to have the listview to automatically scroll to the top.

2 - I have the feeling I'm adding a list view in within the list view when looking at my html in the code inspector, after clicking to different buttons with the same puropose (only the content is different, as well as the structure of the results received from my servers) I have the list view appended inside the previous one:

See the screenshot.

Can you help me fixing those 2 issues ?
Many thanks

ListView (Mobile)

answered on 15 Apr 2014

1 answer

330 views

How To Change DOM element from JS and how to get changed elements

Hello,

I am trying to understan how syncronization in data binding and afterwards the tracking of changed values works. Therefore I have 2 connected questions

Question 1 : In kendo ui documentation it says that "When the end-user changes the value of the DOM element (or widget) the bound View-Model value is updated. If the View-Model value is updated from code the value of the bound DOM element (or widget) is updated visually."I couldn't find how the second section (in bold) works.

I tried to writedevicenoValue = "444444";

to check if the DOM element is changing but it didn't work. How can I change it from the javascript side (ofcourse without the standart jquery option)

html code is :

<li>
<label>Device No
<input type="text" value="" id="device_no" data-value-update="keyup" data-bind="value: devicenoValue"/>
</label>
</li>

JS code is :

var settings = kendo.observable({

devicenoValue: "444444"
});

kendo.bind($("#device_no"), settings);

Question 2 : I need to know which element was changed in the DOM. How can I find this? I tried data-value-update="keyup" but couldn't findout how to use it for this purpose

General Discussions

answered on 15 Apr 2014

5 answers

211 views

Can I edit a grid record, using a page loaded into a pop up ?

I want to know if I can use a page instead of using a template for editting a register in a Kendo Web Grid. This page should be shown in a popup when user clicks the edit button of a grid row.

Thanks

Grid

answered on 15 Apr 2014

2 answers

252 views

km-popup-arrow

Issue: Popup arrow not aligned with border of popup

Condition: When I put buttons on the edge of the screen

Result: Arrow points to button but the padding of the container (15px) causes it to not align and look bad (see attached screenshot)

PopOver (Mobile)

answered on 15 Apr 2014

1 answer

158 views

Stock Chart baseUnitStep problem

Hello,

In my stock chart I use the baseUnitStep = "auto" option, but I wish to know the current baseUnitStep, whether "weeks" or "days" or "months" even thought it is auto all the time... Is there a way to get this value? It is imperative for me to get this option dynamically!

Thanks

Charts

answered on 15 Apr 2014

3 answers

108 views

Defaulting current year if user types in month and day?

I was trying to figure out a way to update the date input on the DatePicker if a user types in only the month and year. Most of our users are used to our old Telerik ASP.NET site where this was the default behavior of the date picker control. Ideally, I'd like to take their input and automatically reformat it to add the year. But I'm not sure how to achieve this with the Kendo MVC controls. The change event will not fire for me because the input is considered invalid. I attempted to add ParseFormats for "MM/dd" to my editor template but in stepping through the kendo source code it seems that this information is not passed through to the javascript object (which may be another issue.) Is there a good way to achieve this functionality? Thanks for your help.

Here is what my editor template looks like:
@model System.DateTime?
@(Html.Kendo().DatePickerFor(m => m).ParseFormats(new string[] { "MM/dd" }) )

Regards,
Brian

DatePicker

answered on 15 Apr 2014

3 answers

125 views

Menu Button - Override Current Page

Hello all -

First off, I'm pretty knew to HTML 5 and all that, so I've been learning as I go. Forgive the ignorant question below...

I'm utilizing the telerik mobile sample application in Visual Studio. I've modified it, but mainly just the content. It has three buttons on the tab strip, and the header strip I put in a 'hamburger' menu button.

I'd like it so if I press the menu button on the header, a different view is shown... a config view. In the existing tabs, I used data-bind="visible: flagVar" to hide and show data. I thought it I just put all the contents inside a data-bind="visible: isConfig" I could control showing the current view with the tabs, or the config page overriding the tabs. My variable isConfig is coming from an associated JS file.

Needless to say, this didn't work out, or I would be posting for help. Any feedback or suggestions on this? Not sure if I need to setup the tab strip as an element, and the config as a separate element. I don't want to do a separate HTML page.

Thanks in advance,
Pat

General Discussions

answered on 15 Apr 2014