I'm trying to place a Kendo Grid inside of an EditorTemplate. I'll be using this as a select list, so to speak.
However, nothing I do seems to get my grid to display. Any examples on how to do something like this? All the examples I see are basically simple control types.
So given:
<script type="text/x-kendo-template" id="schedulerTemplate"> <!-- What do I put here. --></script>I thought the following would work inside of a $(function() {} block
// Workout Grid $("#workoutgrid").kendoGrid({ dataSource: { transport: { read: { url: "/Workout/GetWorkoutList/", dataType: "json" }, create: { url: "/Workout/Create/", type: "POST", dataType: "json" } }, batch: true, pageSize: 20, schema: { model: { id: "Id", fields: { Id: { editable: false, nullable: true }, Name: { type: "string" }, Description: { type: "string" } } } } }, pageable: true, sortable: true, silectable: true, selectable: true, reorderable: true, resizable: true, pageable: true, filterable: { mode: "row" }, toolbar: [{ template: '<a class="k-button k-grid-custom-command" href="/Admin/Movement/Edit/#=0#">Add New</a>' }], columns: [ { hidden: true, field: "Id" }, { field: "Name", title: "Workout", filterable: { cell: { operator: "contains" } } }, { field: "Description", title: "Description", filterable: { cell: { operator: "contains" } } }, { field: "WorkoutTypeId", title: "WorkoutType", filterable: { cell: { operator: "contains" } } }] //{ title: "Action", width: 80, template: '<a href="/Admin/Movement/Edit/#=Id#">Edit</a>' }] });
Hi,
I'm having a few issue with the following piece of code:
<div kendo-chart k-transitions="true" k-theme="'flat'" k-legend="{ position: 'bottom', labels: { template: '#= series.name #: #= value #' }}" k-series-defaults="{ type: 'donut', holeSize: 45, labels: { position: 'center', visible: true, background: 'transparent', color: 'white' }}" k-series-colours="[ '#309B46', '#E61E26' ]" k-chart-area="{ height: 170 }" k-series="[{ name: 'Normal', field: 'value', color: '#65c178' }, { name: 'Offline', field: 100 - 'value', color: '#E61E26' }]" k-data-source="donutData" k-tooltip="{ visible: true, template: '#= series.name #: #= value #' }" >My controller defines 'value' field, and the chart shows up, but I'm still having a few problems.
1) How can I call this directive with different a field variable without defining almost the same directive again?
Say I have 'value' and 'value2', and I want to generate chart for each one of them, and call the same directive without explicitly defining it for each of the values.
2) How can I get "field: 100 - 'value'" to resolve in a directive? I don't want to have view logic in my controller
3) How do I set colours for this chart? Colour parameter in k-series doesn't work even if I pass it from my controller, and neither does k-series-colours
Thanks in advance for your help.
Kind Regards,
Dima
View
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.AssessmentID).Width(110);
columns.Bound(e => e.AssessmentName).Width(110);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("scorelist")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
)
.Events(e => e.DetailInit("detailInit"))
)
<script id="listviewTemplate" type="text/kendo-tmpl">
<div class="StudentResultItem">
<p>#=ResultValue#</p>
</div>
</script>
<script id="scorelist" type="text/kendo-tmpl">
@(Html.Kendo().ListView<AssessmentScoreModel>()
.Name("Scores_#=AssessmentID#")
.TagName("div")
.ClientTemplateId("listviewTemplate")
.HtmlAttributes("class='StudentResultItems'")
.ToClientTemplate()
)
</script>
Model:
public class StudentResultModel
{
public int AssessmentID { get; set; }
public string AssessmentName { get; set; }
public List<AssessmentScoreModel> ResultItem { get; set; }
}
public class AssessmentScoreModel
{
public int ResultID { get; set; }
public string ResultValue { get; set; }
}
When I run it, it can not show listview
we have requirement to call a cross-domain exalead web service. It's working fine with the plain ajax jquery request but its not working with the kendo UI grid. Below is the code, kindly help to resolve the issue.
Ajax jquery code:
<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.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.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>
<div id="grid"></div>
<script>
$( document ).ready(function() {
$.ajax({
type: 'GET',
url: 'web service URL',
crossDomain: true,
dataType: 'jsonp',
success: function(responseData, textStatus, jqXHR)
{
console.log(responseData);
},
error: function (responseData, textStatus, errorThrown)
{
console.warn(responseData, textStatus, errorThrown);
alert('CORS failed - ' + textStatus);
}
});
});
</script>
Kendo UI grid code:
<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.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.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 type="text/javascript" src="/Style%20Library/kendo.all.min.js"></script>
<div id="grid"></div>
<script>
$( document ).ready(function() {
// The base remote Url
var base_url = "web service url";
// Create a reusable shared Transport object
var productTransport = new kendo.data.RemoteTransport({
read: {
url: base_url,
dataType: 'jsonp', // jsonp is necessary here for cross domain calls, not just json
type: 'GET'
}
});
console.log(productTransport);
// Create a reusable shared DataSource object
var datasource = new kendo.data.DataSource({
transport: productTransport
});
console.log(datasource);
// This function is data-bound to the flat listview
$("#grid").kendoGrid({
dataSource: datasource
});
});
</script>
Hello Guys,
We have a client request to show week number in kendo ui scheduler timeline view and month view. Please find attached screen shot to see exact requirement. Telerik advised to check out the demo which is not really relevant to my requirement as It does not explain how to change scheduler header to show week number. I can calculate week number as below but have no clue how to put it to scheduler header.
"Week " + kendo.recurrence.weekInYear(this.startDate(), this.calendarInfo().firstDay);
Please Help....!!!
Thanks,
Lilan
I was just curious if there is or will be released integration or adoption of reactive streams for the kendo widgets? We are looking at wiring some of the dataviz widgets to websockets but we were hoping to integrate backpressure mechanisms.
Thanks...Matt
I have some Grouped rows.
How do I go about obtaining the "children" rows of the groups?
Thank you.

when the user type in some text in the kendo combo box data gets filter accordingly in the combo box
now on clicking down arrow key first option is not getting highlighted instead the second option is getting highlighted.

Kendo ui examples on telerik sites often include kendo.all.min.js.
Is there a list of files to include instead on all.min.js when you use only some widgets?
Kendo.all.min.js is a large file of 700kB, and it makes no sense to download it every time you display a page.
For a page using charts I tried to use kendo.dataviz.chart.min.js but I got an error KendoChart is not a function.
Any lists of the single files to include?
I see js in the framework have semantic names, but since I got errors I need explanations about how to use them.
Thanks
Paolo