This is a migrated thread and some comments may be shown as answers.

Details won't expand after data source filter()

2 Answers 122 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dessie Lunsford asked on 25 Jul 2013, 12:27 AM

Hey all,
Some odd behavior happening when I try to filter the datasource for a grid. Using the repro code below:

<!doctype html>

<html>

<head id="head" runat="server">

<title></title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<script type="text/javascript">

var ds;

$(document).ready(function () {

var peopleData = JSON.parse($("#gridData")[0].innerHTML);

ds = new kendo.data.DataSource({ data: peopleData, pageSize: 5 });

bindData();

});

function bindData(filter) {

if (filter)

ds.filter({

field: "SearchableText",

operator: "contains",

value: filter

});

$("#Grid").kendoGrid({

columns: [{ field: "FullName", title: "Name" },

{ field: "Phone", title: "Phone" },

{ field: "Email", title: "Email" }],

dataSource: ds,

detailTemplate: kendo.template($("#detailTemplate").html())

});

}

function dataSearch(inText) {

if (inText.length < 3)

bindData();

else

bindData(inText.toLowerCase());

}

</script>

</head>

<body>

<form runat="server">

Search: <input onkeyup="dataSearch(this.value)" type="text" />

<div style="width:400px" id="Grid"></div>

<script type="text/x-kendo-template" id="detailTemplate">

#= Details #

</script>

<div style="display:none" id="gridData" runat="server">

[

{"Phone":"1","Email":"A","Fax":"F","FullName":"Adam","SearchableText":"adam","Details":"det1"},

{"Phone":"1","Email":"A","Fax":"F","FullName":"Bob","SearchableText":"bob","Details":"det2"}

]

</div>

</form>

</body>

</html>

The behavior seems different across browsers but using Chrome (28.0.1500.72 at the moment):
When the page first loads, if i click on to the search box and type "ada", the grid filters correctly bu when i click the expand details triangle, nothing happens.
If i instead press tab on page load to get to the input, the details expand correctly after filtering.
Additionally, if i type the full "adam" it doesn't work when i tab, but does when I click. It seems like every other keystroke will break the details expanding.

Any help would be appreciated.

2 Answers, 1 is accepted

answered on 26 Jul 2013, 12:52 PM

Hello,

The Grid is initialized each time and is not destroyed. You should either skip the initialization if the Grid was already initialized:

function bindData(filter) {

if (filter)

ds.filter({

field: "SearchableText",

operator: "contains",

value: filter

});

var grid = $("#Grid");

if(!grid.data("kendoGrid")){

grid.kendoGrid({

columns: [{ field: "FullName", title: "Name" },

{ field: "Phone", title: "Phone" },

{ field: "Email", title: "Email" }],

dataSource: ds,

detailTemplate: kendo.template($("#detailTemplate").html())

});

}

or destroy the Grid before the next initialization.

Regards,
Daniel
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!