I have two entities Competencies and Roles. These are both created by the user and stored in the database.
On a specific screen the user select certain Competencies and certain Roles. These then have to be displayed in a matrix.
They will then use check boxes to link the Competencies and Roles.
Each competency will be linked to several of the roles.
This matrix is completely dynamic as I do not know how many
columns there will be or the names of the columns.
I know that there will be a
Competency Id column and a Competency Name column. Each row will have one or
more roles.
We use kendo grids throughout the application so I want to use
a kendo grid.
I have tried many different ways of doing this. I have
successfully passed in a System.Data.DataTable which works but is
cumbersome to create. We use NHibernate and it is easier to create a model. The
most successful way that I have that uses a model is as follows:
public class BasicRowModel
{
public string CompetencyId { get; set; }
public string CompetencyName { get; set; }
public List<BasicTrainingRoleModel> Roles { get; set; }
}
public class BasicTrainingRoleModel
{
public string RoleName { get; set; }
public bool RoleVal { get; set; }
}
My view is as follows:
@model IEnumerable<BasicRowModel>
@using Models
@using System.Linq;
@{
ViewBag.Title = "DynamicGrid2";
}
<h2>DynamicGrid2</h2>
@section
scripts
{
<script type="text/javascript" src="@Url.Content("~/Scripts/Training.js")"></script>
}
@{
ViewBag.Title = "Administration";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().Grid(Model)
.Name("RoleCompsTable")
.Columns(columns =>
{
columns.Bound(r => r.CompetencyId)
.Hidden();
columns.Bound(r => r.CompetencyName)
.Title("Competency");
for (int c = 0; c < ViewBag.RoleCount; c++)
{
//columns.Template(@<text>@item.Roles[c].RoleVal.ToString()</text>).Title(ViewBag.Roles[c]);
columns.Bound(r =>
r.Roles[c].RoleVal).Title(ViewBag.Roles[c]);
}
//columns.Bound(r
=> r.Roles[0].RoleVal).Title(ViewBag.Roles[0]);
//columns.Bound(r
=> r.Roles[1].RoleVal).Title(ViewBag.Roles[1]);
//columns.Bound(r
=> r.Roles[2].RoleVal).Title(ViewBag.Roles[2])
}))
The for loop does not work with either the columns.Bound or
the template. It results in an out of range error. When stepping into this code
it works fine but it is afterwards that the error occurs.
Exception Details: System.ArgumentOutOfRangeException:
Index was out of range. Must be non-negative and less than the size of the
collection.
Parameter name: index
Source Error:
Line 31: for (int c = 0; c <
ViewBag.RoleCount; c++)
Line 32: {
Line 33:columns.Template(@<text>@item.Roles[c].RoleVal.ToString()</text>).Title(ViewBag.Roles[c]);
Line 34: //columns.Bound(r =>
r.Roles[c].RoleVal).Title(ViewBag.Roles[c]);
Line 35: }
When I comment out the for loop and uncomment the columns.Bound
lines it works perfectly with the attached result. Obviously this is not a
solution for me as it is dynamic and I do not know how many columns there will
be. Why does the for loop not work for this?
Regards
Tyler
Hi,
In Chrome, version 46, filter menu is too narrow and bottom buttons don't fit into container.
http://i.imgur.com/8uOBHhG.png
http://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
Radosław

i am having problems trying to filter rows that are formatted as a percent. ({0:p2})
I have a simple app where I am using the following in my column definition
Field: "sample",
title: "col 1",
format: '{0:p2}',
filterable: {
ui: function(e) {
e.kendoNumericTextbox({
format: 'p2',
decimals: 2,
change: function(e) {
// code to handle change event
}
}
}}
I am now having problems when I am applying this to another application. For some reason the change event won't fire allowing me to convert the input to a decimal thus matching the underlying data which is in a decimal format.
Is this the recommended method for handling percent data? I am using local data if that makes a difference.
I want to be able to restore the selected row in a grid after performing a saveChanges() call.
I was able to get this working when there are no locked columns by using the following definitions in my gridOptions object:
...dataBound: function (e) { if (selectedUids.length != 0) { for (var i = 0; i < selectedUids.length; i++) { var curr_uid = selectedUids[i]; //find and reselect the rows via their uid attribute this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected"); } }},dataBinding: function (e) { selectedUids = []; $("#ddhintgrid .k-state-selected").each(function () { selectedUids.push($(this).data("uid")); }); },...
However, when trying this with locked columns I only get the row selection back in the unlocked section. See attached files for example.
When I try debugging I notice that with locked columns I get the same UID inserted into selectedUids twice.
The end goal here is that I want the entire row including the locked section to be re-selected after a grid.saveChanges() operation.
Hi!
I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
Can you please help with this issue?
Thanks!
outer grid:
var outerDataSource= new kendo.data.DataSource({ schema: { model: { field1: { type: "string", validation: { required: true } }, field2: { type: "boolean", validation: { required: true } }, field3: { type: "string", validation: { required: true } } } } });
$("#outerGrid").kendoGrid({ dataSource: , detailInit: onExpansion, toolbar: ["create"], columns: [ { field: "field1", title: "field1" }, { field: "field2", title: "field2" }, { field: "field3", title: "field3" }, { command: ["destroy"], title: " " }], editable: true });onExpansion:
function onExpansion(e) { var insideDataSource= new kendo.data.DataSource({ schema: { model: { in1: { type: "string", validation: { required: true } }, in2: { type: "string", validation: { required: true } } } }, data: [{ in1: "Click to edit", in2: "Click to edit" }] }); var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({ dataSource: insideDataSource, width: 90, toolbar: ["create"], editable: true, columns: [ { field: "in1" }, { field: "in2" }, { command: ["destroy"], title: " " }] }); };
Hi,
I was using "material black" theme, and noticed that the tree does not style properly with it. Its background is shown as white, when it clearly should be dark grey from the theme. Node texts are light grey (set correctly from the theme), so they are barely visible.
The underlying problem seems to be, that kendo.common.min.css has bg color for "div.k-treeview", but kendo.materialblack.min.css doesn't.
Any suggestions, which extra css class we should use for our treeview, without breaking other themes?
Thanks...
From another post, I was able to apply the styles:-
.k-widget > span.k-invalid,input.k-invalid{ border: 1px solid red !important;}
Which changes textbox borders to red, where validation has failed. This works, but I would also like to apply the same style to text areas and kendo dropdown lists. How can I achieve this?
Thanks
I am using Kendo UI 2016 Q1. In this version there I noticed a strange behavior when I want to clear items selected on MultiSelect. I clear them like this:
var multi = $("#test").data("kendoMultiSelect");multi.value([]);console.log(multi.value(), multi.dataItems());Is it possible to use 2 datasources with a single bar chart? I am trying to create a bar chart that would show gift card orders and redemption over time in the same chart. I have 2 datasources, orders and redemptions. (These are OData returning json to a kendo datasource).
I was hoping I could do something in the chart like:
series: [
{
name: "Purchased",
data:dsOrders,
field: "Amount",
aggregate: "sum",
categoryField: "PurchaseDate",
},
{
name: "Redeemed",
data:dsRedemptions,
field: "RedeemedAmount",
aggregate: "sum",
categoryField: "RedeemedDate"
}
],
Trying that directly didn't work so I was wondering if there is something I am missing? Thanks so much,
Jayme