Questions on Kendo UI for jQuery Forum

1 answer

129 views

Is there a way to only display specific months, in my case 1-4 which is representing the quarters instead of actual months due to how the data is inserted into the database? I have the following in the categoryAxis but it is still displaying all of the months. I can put in [3] for the months but then it goes 1, 4, 7, 10 instead of 1, 2, 3, 4. The database will only ever have 1-4 as a quarter and then the year and so I am attempting to limit the display to only the data that will be inserted.

categoryAxis: [

{

field: "Fiscal",

type: "date",

maxDateGroups: 4,

autoBaseUnitSteps: {

days: [],

weeks: [],

months: [1,4]

},

baseUnit: "months",

labels: {

dateFormats: {

months: "MM/yy"

}

],

Charts

answered on 08 Jan 2016

1 answer

324 views

How to reset a map

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

216 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

274 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

614 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

455 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

584 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

206 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