I've implemented a way to expand the detail view of a grid by selecting a row in the grid, but in doing so I noticed the expand arrow no longer works. Note that if the details are already expanded, the arrow will still cause the details to collapse. I've created a jsfiddle illustrating the problem here:
http://jsfiddle.net/RaRXg/
Is there another way to achieve the desired effect (expand by row selection) which still allows the arrow to expand the selection?
Thanks.
http://jsfiddle.net/RaRXg/
Is there another way to achieve the desired effect (expand by row selection) which still allows the arrow to expand the selection?
Thanks.
5 Answers, 1 is accepted
0

Jayesh Goyani
Top achievements
Rank 2
answered on 26 Jul 2013, 10:37 AM
Hello,
Thanks,
Jayesh Goyani
<
p
>
test</
p
>
<
div
id
=
"grid"
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"tmpl-grid"
>
<
ul
>
<
li
><
label
>Price:</
label
>#= UnitPrice #</
li
>
<
li
><
label
>Stock:</
label
>#= UnitsInStock #</
li
>
<
li
><
label
>Discontinued:</
label
>#= Discontinued #</
li
>
</
ul
>
</
script
>
<
script
>
$(document).ready(function () {
});
function ExpandSelectedrow() {
var grid = $("#grid").data("kendoGrid");
$(".k-state-selected").each(function () {
if ($(this).next().hasClass('k-detail-row') == false) {
grid.expandRow(this);
}
});
}
var myGrid = $("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
scrollable: true,
selectable: true,
sortable: true,
filterable: false,
pageable: true,
detailTemplate: kendo.template($("#tmpl-grid").html()),
detailInit: function (e) {
console.log('detailInit');
},
detailExpand: function (e) {
console.log('detailExpand');
},
change: function (e) {
setInterval(function () { ExpandSelectedrow(); }, 500);
},
columns: [
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
}).data("kendoGrid");
</
script
>
Thanks,
Jayesh Goyani
0

Joshua
Top achievements
Rank 1
answered on 26 Jul 2013, 04:45 PM
Jayesh,
Thank you but that script has adverse effects as well. You can no longer expand a row once it has been collapsed.
Thanks,
Josh
Thank you but that script has adverse effects as well. You can no longer expand a row once it has been collapsed.
Thanks,
Josh
0

Jayesh Goyani
Top achievements
Rank 2
answered on 29 Jul 2013, 10:12 AM
Hello,
I am not able to reproduce this issue in my code.
Can you please provide steps to reproduce this and detail of your browser?
Thanks,
Jayesh Goyani
I am not able to reproduce this issue in my code.
Can you please provide steps to reproduce this and detail of your browser?
Thanks,
Jayesh Goyani
0

Joshua
Top achievements
Rank 1
answered on 29 Jul 2013, 03:23 PM
Here's a fiddle from the code you supplied which reproduces the issue:
http://jsfiddle.net/tbnW7/
I'm running Chrome Version 28.0.1500.72 m
Thanks,
Josh
http://jsfiddle.net/tbnW7/
I'm running Chrome Version 28.0.1500.72 m
Thanks,
Josh
0

Jayesh Goyani
Top achievements
Rank 2
answered on 30 Jul 2013, 09:50 AM
Hello,
Can you please try with the below code snippet?
Let me know if any concern.
Thanks,
Jayesh Goyani
Can you please try with the below code snippet?
<
p
>
test</
p
>
<
div
id
=
"grid"
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"tmpl-grid"
>
<
ul
>
<
li
><
label
>Price:</
label
>#= UnitPrice #</
li
>
<
li
><
label
>Stock:</
label
>#= UnitsInStock #</
li
>
<
li
><
label
>Discontinued:</
label
>#= Discontinued #</
li
>
</
ul
>
</
script
>
<
script
>
$(document).ready(function () {
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
setTimeout(function () { ExpandSelectedrow(rowIdx, colIdx); }, 100);
});
}
function ExpandSelectedrow(rowIdx, colIdx) {
if (colIdx != 0) {
var grid = $("#grid").data("kendoGrid");
grid.expandRow($(grid.tbody).find('tr:eq(' + rowIdx + ')'));
}
}
var myGrid = $("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
dataBound: onDataBound,
scrollable: true,
selectable: true,
sortable: true,
filterable: false,
pageable: true,
detailTemplate: kendo.template($("#tmpl-grid").html()),
detailInit: function (e) {
console.log('detailInit');
},
detailExpand: function (e) {
console.log('detailExpand');
},
change: function (e) {
},
columns: [
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
}).data("kendoGrid");
</
script
>
Thanks,
Jayesh Goyani