Guest User

Untitled

a guest
Nov 21st, 2017
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.19 KB | None | 0 0
  1. Here is how done it according to my Requirement
  2.  
  3. - Client Side
  4.  
  5. @Html.TextBox("SearchBox")
  6.  
  7. <button id="btnSearch">Filter</button>
  8.  
  9. <script type="text/x-kendo-tmpl" id="template">
  10. <div class="col-md-8 jumbotron">
  11. <div class="col-sm-4">
  12. <span><b>Name:</b></span><br />
  13. <span><b>Gender:</b></span><br />
  14. <span><b>DOB:</b></span><br />
  15. <span><b>Country:</b></span><br />
  16. <span><b>Province:</b></span><br />
  17. <span><b>Interset:</b></span><br />
  18. </div>
  19. <img img src="#:Image#" width="100" height="100" />
  20. <div class="col-sm-4">
  21. <span>#:FirstName#</span><br />
  22. <span>#:Gender#</span><br />
  23. <span>#:DOB#</span><br />
  24. <span>#:CountryName#</span><br />
  25. <span>#:ProvinceName#</span><br />
  26. <span>#:Interset#</span><br />
  27. </div>
  28. </div>
  29. </script>
  30.  
  31. <div class="demo-section k-content wide">
  32. @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>()
  33. .Name("ListView")
  34. .TagName("div")
  35. .ClientTemplateId("template")
  36. .DataSource(dataSource =>
  37. {
  38. dataSource.Read(read => read.Action("GetStudentListViewData", "Home")).ServerOperation(true);
  39. dataSource.PageSize(2);
  40. }).Pageable()
  41. )
  42. </div>
  43.  
  44. <script src="~/Scripts/Kendo/Scripts/kendo.all.min.js"></script>
  45. <script src="~/Scripts/Kendo/Scripts/kendo.aspnetmvc.min.js"></script>
  46. <script>
  47. $('#btnSearch').click(function () {
  48.  
  49. filterListView();
  50. });
  51. $('#SearchBox').keypress(function (e) {
  52. if (e.which == 13) {//Enter key pressed
  53. $('#btnSearch').click();//Trigger search button click event
  54. }
  55. });
  56. function filterListView() {
  57. debugger;
  58. var searhValue = $('#SearchBox').val();
  59. var dataSource = ({
  60. filters: {
  61. // leave data items which are
  62. logic: "or",
  63. filters: [
  64. { field: "FirstName", operator: "contains", value: searhValue },
  65. { field: "CountryName", operator: "contains", value: searhValue },
  66. { field: "Gender", operator: "contains", value: searhValue },
  67. { field: "ProvinceName", operator: "contains", value: searhValue },
  68. { field: "Interset", operator: "contains", value: searhValue }
  69. ]
  70. }
  71. });
  72. var list = $("#ListView").data("kendoListView");
  73. list.dataSource.filter(dataSource.filters);
  74. }
  75. </script>
  76.  
  77. public JsonResult GetStudentListViewData([DataSourceRequest] DataSourceRequest request)
  78. {
  79. var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel
  80. {
  81. FirstName = list.FirstName,
  82. Gender = list.Gender,
  83. DOB = list.DOB.Value.ToShortDateString(),
  84. Image = list.Image,
  85. CountryName = list.Name,
  86. ProvinceName = list.ProvinceName,
  87. Interset = list.Interset
  88. }).ToList();
  89.  
  90. return Json(studentData.ToDataSourceResult(request));
  91. }
Add Comment
Please, Sign In to add comment