Questions on Kendo UI for jQuery Forum

1 answer

345 views

What is the correct way to reset a map?

We have a button that a user clicks to load a map and display shapes on that map.

However if the user clicks the button again the original shapes remain on the map plus the new shapes are added to the map.

I've tried to destroy the map as well as clearing out the datasource but when I try either approach I can't get the shapes to render.

Please advise.

Map

answered on 08 Jan 2016

2 answers

227 views

[Solved] TreeList Multi-column headers

Does TreeList support Multi-column headers just like what that Grid ?

http://demos.telerik.com/kendo-ui/grid/multicolumnheaders

TreeList

answered on 08 Jan 2016

3 answers

290 views

[Solved] Update grid from callback - AngularJS

I have a grid with a list of reports. The user must accpet/reject a report by clicking the command buttons. After that, the moderator.person_aname must be updated in the grid show who accepted/rejected it. Everything works fine, except the moderator.person_aname does not change. Even the confirm/reject buttons hide correctly. Please help!

Angularjs function

$scope.confirm = function(report) {

$wamp.call('confirm_report', [report.id]).then(

//callback

function (new_report) {

$log.log(new_report);

report.is_confirmed = new_report.is_confirmed;

report.is_rejected = new_report.is_rejected;

report.moderator.person_aname = new_report.moderator.person_aname;

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

var select = grid.dataSource.get(report.id);

select.moderator.person_aname = new_report.moderator.person_aname;

},

//error callback

function (err) {

$log.log("user.get_status error:", err);

}

);

};

Grid columns

{

template:

"<span ng-if='#: is_confirmed #'>Confirmed</span><span ng-if='#: is_rejected #'>Rejected</span><span ng-if='#: !(is_confirmed||is_rejected) #'>Pending</span>"

,

field: "is_confirmed",

title: "Decision",

width: 60

},{

field: "moderator.person_aname",

title: "Moderator",

width: 50

},{

command: [{

template:

'<a class=\'k-button\' ng-show=\'dataItem.demo_info.demo_on_web_server\' target=\'_blank\' ng-href=\'{{dataItem.demo_info.url}}\'><i class="icon-edit"></i>'

+

'<span>Download Demo</span>' +

'</a>' +

'<button ng-hide=\'dataItem.is_confirmed||dataItem.is_rejected\' class=\'k-button\' ng-click=\'confirm(dataItem)\'><i class="icon-edit"></i>Confirm</button>'

+

'<button ng-hide=\'dataItem.is_confirmed||dataItem.is_rejected\' class=\'k-button\' ng-click=\'reject(dataItem)\'><i class="icon-edit"></i>Reject</button>'

}

],

title: "Actions",

width: 210

}

Grid

answered on 08 Jan 2016

8 answers

641 views

[Solved] Problems with Grid using SignalR and ServerFiltering, Sorting and Paging

Hello,
I am developing a Kendo grid using SignalR, this grid is only to read de data, and other enviroment is creating new lines and the hub raise this create method.
It is working fine without .ServerPaging(true), .ServerFiltering(true), .ServerSorting(true)
@(Html.Kendo().Grid<StatScanModeHubModel>() .Name("Grid") .Pageable(a=>a
.PageSizes(new []{100,200,500}) .Refresh(true)) .Navigatable() .Sortable() .Filterable() .DataSource(dataSource => dataSource
.SignalR() .ServerPaging(true) .ServerFiltering(true) .ServerSorting(true) .Sort(sort => sort.Add(a => a.Created).Descending()) .PageSize(100) .Transport(tr => tr
.Promise("hubStart") .Hub("hub") .Client(c => c .Read("read") .Create("create")) .Server(s => s .Read("read") .Create("create")) ) .Schema(schema => schema .Model(model => model.Id(a => a.StatScanModeId)) ) )

Hub Code: public class StatScanModeHub : Hub {
public string Read([DataSourceRequest]DataSourceRequest request) { DataSourceResult returnList;
using (var managerService = new ManagerService()) { var results = managerService.StatScanModeManager.GetAll(); returnList = results.ToDataSourceResult(request, Mapper.Map<StatScanMode, StatScanModeHubModel>); //returnList = Mapper.Map<IEnumerable<StatScanMode>, IEnumerable<StatScanModeHubModel>>(results2); } return Newtonsoft.Json.JsonConvert.SerializeObject(returnList); }
public StatScanModeHubModel Create(StatScanModeHubModel statScanMode) { Clients.Others.create(statScanMode); return statScanMode; }

But when I activate .ServerPaging(true), .ServerFiltering(true), .ServerSorting(true)In the Hub, the parameter request does not recieve the data to filter, sort... only tha paging parameter.

Please could someone help me to guide about how I can develop this functionality?

Grid

answered on 08 Jan 2016

1 answer

1.8K+ views

UTF-8 Characters Not Rendered in Grid Cell

Hi,

I have a grid bound to java script array. The problem is utf-8 characters are not rendered, instead the escape sequence is displayed. For example in utf-8 176 is the degree symbol. Instead of the degree symbol the grid cell displays '°'

Thankyou!

Example code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<p>THIS WORKS: PREHEAT oven to 350°F for glass </p>
<style>html { font: 12px sans-serif; }</style>

<div id="grid"></div>

<script type="text/javascript" charset="utf-8">
var sampleData = [
{ProductID: 1, ProductName: 'PREHEAT oven to 350°F for glass or' },

];

$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
// on success
e.success(sampleData);
// on failure
//e.error("XHR response", "status code", "error message");
},

},

schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },

}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,

columns: [
{ field: "ProductName", title: "Mobile Phone" },

]

});
});
</script>
</body>
</html>

Grid

answered on 08 Jan 2016

8 answers

480 views

Beginner needs help with JSON data binding

Hi, I am new to Kendo. Making the switch from JQuery Mobile.

I have some remote JSON data that I want to bind to an action sheet or event a list view. Sounds super simple but I am not sure of the syntax at its most basic level.
Can someone give me an example.

Here is my feed if that helps:

http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861

ActionSheet

answered on 08 Jan 2016

1 answer

599 views

ListView + Pager

How does the paging work in the ListView selection example (http://demos.telerik.com/kendo-ui/listview/selection)? I've checked the data and there doesn't appear to be any information in the JSON about total rows/item count.

I've copied the example into my own project, and changed the datasource to pull from our DB, and the pager is showing 0 rows/no items to display. This is the JSON I'm passing to the list view/pager:

{"Icons":[{"Name":"fa-icon-bolt","ID":23},{"Name":"fa-icon-book","ID":3},{"Name":"fa-icon-building","ID"

:32},{"Name":"fa-icon-building-o","ID":24},{"Name":"fa-icon-calculator","ID":15},{"Name":"fa-icon-car"

,"ID":18},{"Name":"fa-icon-certificate","ID":2},{"Name":"fa-icon-cloud","ID":6},{"Name":"fa-icon-cog"

,"ID":33},{"Name":"fa-icon-desktop","ID":4},{"Name":"fa-icon-diamond","ID":26},{"Name":"fa-icon-exclamation"

,"ID":29},{"Name":"fa-icon-file","ID":25},{"Name":"fa-icon-fire-extinguisher","ID":36},{"Name":"fa-icon-flask"

,"ID":16},{"Name":"fa-icon-globe","ID":11},{"Name":"fa-icon-graduation-cap","ID":1},{"Name":"fa-icon-h-square"

,"ID":20},{"Name":"fa-icon-headphones","ID":12},{"Name":"fa-icon-info","ID":27},{"Name":"fa-icon-laptop"

,"ID":8},{"Name":"fa-icon-line-chart","ID":19},{"Name":"fa-icon-mobile","ID":9},{"Name":"fa-icon-newspaper-o"

,"ID":10},{"Name":"fa-icon-plus","ID":28},{"Name":"fa-icon-puzzle-piece","ID":13},{"Name":"fa-icon-road"

,"ID":34},{"Name":"fa-icon-rocket","ID":35},{"Name":"fa-icon-share-square-o","ID":5},{"Name":"fa-icon-suitcase"

,"ID":30},{"Name":"fa-icon-truck","ID":14},{"Name":"fa-icon-university","ID":7},{"Name":"fa-icon-user"

,"ID":22},{"Name":"fa-icon-user-secret","ID":17},{"Name":"fa-icon-users","ID":21}]}

And the list view/pager init:

var datasource = new kendo.data.DataSource({

transport: {

read: {

type: "GET",

url: "MainController.cfc?method=getIcons",

processData: true,

dataType: "json",

cache: false

}

},

schema : {

type: "json",

data: "Icons"

}

});

$("#icons_pager").kendoPager({

dataSource: datasource

});

$("#icons_list").kendoListView({

dataSource: datasource,

selectable: "multiple",

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

});

ListView

answered on 08 Jan 2016

2 answers

222 views

Stack Chart change datasource series type from candleStick to bar / line

Hello ,

Can anyone point me in some direction on how i may be able to change the dataSource series types from candlestick to line or bar or area, or anything else than candlestick.

Thank you in advance.

Charts

answered on 08 Jan 2016

8 answers

444 views

Framework is heavy!

Are there any plans to lighten the weight of the framework in the future?

The combined script is 1.9MB!

General Discussions

answered on 08 Jan 2016

5 answers

979 views

tab key and modal windows

We have a single page application (SPA) where we often have modal dialog windows, including dialog windows that open another dialog window, sometimes several deep. We're using kendo windows.

Our issue is that the user can tab off of the inputs on the active modal window -- to the inputs on the supposedly disabled inputs in the windows that were "disabled" when the modal window popped up. That means the user can use the enter key to "click" on buttons supposedly unavailable and likewise make use of other "disabled" controls.

This is undesirable. We need it to be impossible for the user to leave the dialog until they close it.

I have tried such things as (using jquery) to remove the tabindex attribute from all elements and setting the tabindex to -1 for all elements that have a tabindex -- all unsuccessfully.

Please advise. I can provide more details (i.e., code) as needed.

Thanks,
Rod Early
McKesson, Inc.

Window

answered on 07 Jan 2016