Dessie Lunsford
Top achievements
Rank 2
Rank 2
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:
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.
2 Answers, 1 is accepted
0
Hello,
or destroy the Grid before the next initialization.
Regards,
Daniel
Telerik
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()) }); } }Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dessie Lunsford
Top achievements
Rank 2
Rank 2
answered on 26 Jul 2013, 09:44 PM
That seemed to do it. Many thanks.