Questions on Kendo UI for jQuery Forum

1 answer

130 views

Im getting the following json response from the server.

[{"TaxYear":2014,"IsCurrentFlag":false},{"TaxYear":2013,"IsCurrentFlag":true},{"TaxYear":2012,"IsCurrentFlag":false}]

How do I set the selected item based on "IsCurrentFlag" where "IsCurrentFlag == true" ?

Below is my code to Create DataSource and Set the DropDownList.

var taxYearsDS: kendo.data.DataSource = createDataSource("GetYears");

var $taxYears: JQuery = $("#taxYears");

$taxYears.kendoDropDownList({

dataSource: taxYearsDS,

dataTextField: "TaxYear",

dataValueField: "TaxYear"

});

function createDataSource(action: string): kendo.data.DataSource {

var schema: kendo.data.DataSourceSchema;

return new kendo.data.DataSource({

type: type,

transport: {

read: {

url: svcUrl + "/myapi/" + action,

dataType: "json"

},

schema: schema,

serverFiltering: false

});

}

DropDownList

answered on 28 Aug 2014

1 answer

202 views

angularjs how to configure tools - toolbar buttons

using standard jquery, i can configure the toolbar buttons this way:

$("#editor").kendoEditor({

tools: [bold,...

but how do i do it when using angularjs and the code for initializing the editor is just this:

<div ng-controller="MyController">

<textarea kendo-editor ng-model="data.html"></textarea>

</div>

Editor

answered on 28 Aug 2014

4 answers

140 views

KendoChart Data Binding

I am trying to bind the result of my wcf service to a bullet chart. This is my code. Can anyone please tell me, what am I doing wrong here.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bullet-charts/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<table class="history">
<tr>
<td class="item">Chart1</td>
<td class="chart"><div id="chart-mmHg" style="width: 485px"></div></td>
</tr>

</table>

</div>

<script>

function createChart() {
$("#chart-mmHg").kendoChart({
legend: {
visible: false
},
dataSource: {
transport: {
read: {
url: "http://localhost:29067/Service1.svc/Mymethodname",
dataType: "json"
}
}
},
series: [{
type: "bullet",
currentField: "current",
targetField: "target",
target: {
color: "#aaaaaa"
}
}],
chartArea: {
margin: {
left: 0
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: [{
plotBands: [{
from: 0, to: 17500, color: "#ccc1df", opacity: .6
}, {
from: 17500, to: 18000, color: "#1rf036", opacity: .3
}],
majorGridLines: {
visible: false
},
min: 0,
max: 18000,
minorTicks: {
visible: true
}
}],
tooltip: {
visible: true,
template: "Maximum: #= value.target # <br /> Average: #= value.current #"
}
});

}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
<style scoped>
.history {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}

.history .k-chart {
height: 65px;
}

.history td.item {
line-height: 65px;
width: 20px;
text-align: right;
padding-bottom: 22px;
}
</style>
</div>
</body>
</html>

Thanks.

General Discussions

answered on 27 Aug 2014

3 answers

270 views

Kendochart error

Hello,

I have created an application using kendo mobile. I want to use a bullet chart in my application. But when I try to create a chart, it gives me an error "Uncaught TypeError: Object [object Object] has no method 'kendoChart'". I do not understand why I am getting this error.

Please help me solve it.

Thanks,
Nirav

General Discussions

answered on 27 Aug 2014

3 answers

198 views

Change and remove icon in chart's legend

In my chart's legend, it lists each series' name with a square icon that is the same color as my line to the left of it. I need this icon to remove square icon one of my series. Is this possible?

thanks

General Discussions

answered on 27 Aug 2014

1 answer

127 views

How create a unique input filter?

I'm have a my input text:

<input type="text" id="txtSearch" class="form-control" placeholder="Buscar" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="Search()">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>

And my javascript

function Search() {
$.ajax({
type: "POST",
url: '@Url.Content("~/groups/Search")',
data: JSON.stringify({ Search: $('#txtSearch').val() }),
contentType: "application/json",
dataType: "JSON",
success: function (result) {
$('#grid').data("kendoGrid").dataSource.data(JSON.parse(result));
}
});
}

But, return error :/

Sugest?

Grid

answered on 27 Aug 2014

1 answer

251 views

Dynamically load View with Layout

How do you dynamically load a view and layout? I can get the view to work by itself, but not a view with layout. I created the simple example below to illustrate the issue. The only way I can make this work is to place the layout in the index.html file, which means it's not dynamically loaded at runtime.

// insert view
$('body').append("<div data-role='view' id='view2' data-layout='main'>This is view2</div>")

// insert layout
$('body').append("<div data-role='layout' data-id='main'><header data-role='header'>Header</header><footer data-role='footer'>Footer</footer></div>");

// display view
app.navigate('#view2');

View

answered on 27 Aug 2014

1 answer

103 views

X- button is not working.

Hi,

When i have opened the delete popup of event and after it when i am clicking the X-button as per highlighted area in attached screen then pop is not getting closed.

Please help me.

Scheduler

answered on 27 Aug 2014

5 answers

271 views

AngularJS - manually calling $scope.$apply

If I modify the scope from a callback (data-k-dragend="onDragEnd") then it seems I have to manually call $scope.$apply. I had assumed that KendoUI with the AngularJS integration would automatically wrap this for me. Can you confirm if I'm doing something wrong or if this is planned to be fixed in a future release?

Thanks!

Nick

Drag and Drop

answered on 27 Aug 2014

1 answer

82 views

Scheduler UI in day and week rendering in chrome.

Hi,

I am using the Kendo UI Web Demo. strangely if i click the day or week view the UI. even more bizzarly, if i enable developper tool in chrome or firebug tool in FF then switch off the tools, the misformed problem will go away too.

Scheduler

answered on 27 Aug 2014