Questions on Kendo UI for jQuery Forum

1 answer

110 views

Hello
My site is using bootstrap responsive layout so, grid doesn't have vertical scroll. The grid always resizing down automatically (I have minimum height set). So grid has always some space visible.

I like very much how adaptive rendering is working for column menu.

I would like to use adaptive rendering column menu with vertical scroll less grid. So grid would behave normally like without adaptive rendering, but column menu, column resizing, would bavahave like in adaptive rendering.

Is that solution possible?

Kind Regards
Marcin

Grid

answered on 15 Apr 2014

3 answers

283 views

Context menu functionality.

Hi.

Is there any context menu functionality related to treeview control?
Do I have to use third party libs to do that (e.g, jquery ui), or there exists some ways to do that using kendoui controls?

TreeView

answered on 15 Apr 2014

1 answer

350 views

serverSorting datasource for webui.grid

Basically I am implementing a variant of the demonstration shown here for grid with detail template

http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html

I almost have it working but.. some filter operations aren't working.

I have it working now such that the grid only requests the data it needs from the controller, which was a problem at first.. Initially I was getting ALL data from the controller and it was filtered on the grid. Not what I wanted as I anticipate the list of data might grow to be quite large eventually.

During this exercise, I switched from the asp.net grid to the kendui.web grid as it seems the asp.net grid did not have a way to enable serverfiltering in its datasource..? I am ok with using the kendo.ui web now and then

I end up with the following for my grid/datasource for the main grid
There is a detail grid that I dont' show for brevity.. it has the same issue in that sorting is not working.
This seems overly verbose but it works (almost). I took this example from this blog
http://blog.longle.net/2012/04/13/teleriks-html5-kendo-ui-grid-with-server-side-paging-sorting-filtering-with-mvc3-ef4-dynamic-linq/

$(document).ready(function () {

$("#ordersGrid").kendoGrid({

pageable: true,

sortable: true,

detailTemplate: kendo.template($("#template").html()),

detailInit: detailInit,

dataBound: function () {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

columns: [

{

field: "shopOrderHexID",

title: "ID",

},

{

field: "characterName",

title: "Pilot"

},

{

field: "CreatedDate",

title: "Created",

format: "{0:yyyy.MM.dd}"

},

{

field: "LastModifiedDate",

title: "Last Modified",

format: "{0:yyyy.MM.dd}"

}],

dataSource: {

transport: {

read: "/ShopOrders/OrderList",

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

data: {}

},

parameterMap: function (options) {

return JSON.stringify(options);

},

schema: {

model: {

fields: {

shopOrderHexID: { type: "string" },

characterName: { type: "string" },

characterID: { type: "number" },

CreatedDate: { type: "date" },

LastModifiedDate: { type: "date" }

}

},

data: "Data",

total: "Total"

},

pageSize: 5,

serverPaging: true,

serverSorting: true,

serverFiltering: true

}

});

So here is what works.

serverpaging is definitely working. I can observe the separate calls as I page through the data and I can review the results, I see that it definitely only pulled a single page of information. Great!

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5
http://localhost:58507/ShopOrders/OrderList?take=5&skip=5&page=2&pageSize=5

Ok so far so good.
What doesn't work though.. is sorting.
If I select any column to be sorted (ID, or Created) for example, I can see the request sent to the controller but the controller is returning with unsorted data..as if the sort is not support.

These two requests from the grid, return the same exact data for example.. that's not good.
I can see it asking for sort on the shopOrderHexID which is a valid field in the data I pass to ToDataSourceResult... but... it isn't sorted.
Basically I should be getting the last 5 entries in the data table but I still get the same first 5 entries, even sorted in the same order.

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5&sort%5B0%5D%5Bfield%5D=shopOrderHexID&sort%5B0%5D%5Bdir%5D=asc&sort%5B0%5D%5Bcompare%5D=

Now I notice that if I ask for serverSorting: false, then the grid does sort the data when I manipulate the columns, but it is only sorting the data it has at ahnd which is of course only the data on the current page. Ok fine.. but thats not what I want. I want sorting by a column to basicaly be showing the first or last 5 items in the table... right? That is what the end-user is going to expect and desire I think..

Ok so the magic is likely in the controller (though it might be in the configuration of the datasource above)
My controller function is

// returns a list of products in a specific category for the active user

public JsonResult OrderList([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request)

{

var userID = User.Identity.GetUserId();

// build results, make sure to return only orders from current user

var orders = repository.shopOrders

.Where(order => order.userID == userID)

// avoid circular reference by converting to view model, and flatten the model

.Select(e => new ShopOrderViewModel

{

shopOrderID = e.shopOrderID,

characterName = e.characterName,

characterID = e.characterID,

CreatedDate = e.CreatedDate,

LastModifiedDate = e.LastModifiedDate,

totalCost = e.orderItems

.Sum( o => o.quantity * o.price ),

paymentAmount = ( e.shopOrderPaymentRecords.Count() > 0 )?

e.shopOrderPaymentRecords.Sum(p => p.payment):0,

//paid = (paymentAmount >= totalCost)

})

// convert to list so I can manipulate the data a little easily

.ToList();

// populate the hex value of the shopOrderID (linq to objects/sql doesn't like doing this directly)

for (int i = 0; i < orders.Count(); i++)

{

orders.ElementAt(i).shopOrderHexID = orders.ElementAt(i).shopOrderID.ToString("X8");

}

// apply filter to the results... that's what this does right?

Kendo.Mvc.UI.DataSourceResult result = orders.ToDataSourceResult(request);

// return data as json

return Json(result, JsonRequestBehavior.AllowGet);

}

Grid

answered on 15 Apr 2014

1 answer

52 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.3K+ views

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

194 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

219 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

299 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

187 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

218 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