Hey all,
Some odd behavior happening when I try to filter the datasource for a grid. Using the repro code below:
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.
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.