Questions on Kendo UI for jQuery Forum

2 answers

263 views

Can we add a selectable=manual mode for the grid

Right now the KendoGrid support different selection modes (none, rows, cells and multiple). I would like to define a manual mode and a multiple manual mode.

Basically we need to set the selected a row programmatically, but prevent it from being selected when the user clicks the row or the cell. We have a link on first column and other ways to select an element outside the grid, but for all of our other columns, we need the user to be able to click them to select text or interact with other elements without causing a selection of the row. Selecting manually doesn't work unless I set selectable=row, but that has the undesired behavior selecting when touching any cell of a row.

Can this be added to KendoGrid?

General Discussions

answered on 28 Aug 2014

1 answer

199 views

Update Toolbar Items when options change on $scope

With regards to this example : http://demos.telerik.com/kendo-ui/toolbar/angularIs

Is it possible to update $scope.toolbarOptions at runtime and have the items on the toolbar update as well?

I cant seem to find a solution for this in your API reference. Is this feature expected anytime soon? There isn't even a way to complete empty the toolbar and repopulate the items again.

There dont seem to be many methods you can call on the toolbar too. How about some Hide() & Show() methods?

Also is it possible to use a button on the toolbar and define a ng-click event on it? Currently we are doing this by giving a template with a href tag and ng-click on it.

Toolbar

answered on 28 Aug 2014

3 answers

159 views

Programmatically Activating Loading Graphic

For Kendo ComboBoxes (and dropDown lists) is it possible to programmatically turn on/display (and turn off) the little "loading" icon that shows in the open icon area to the right (temporarily replacing the down arrow) as it shows when doing a server data fetch. And on a related subject: Is it possible to replace the standard down arrow with a custom graphic, perhaps via over-riding the style?

ComboBox

answered on 28 Aug 2014

1 answer

134 views

How to select item from drop downlist?

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

203 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

147 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

291 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

210 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

134 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

266 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