Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Here is how done it according to my Requirement
- - Client Side
- @Html.TextBox("SearchBox")
- <button id="btnSearch">Filter</button>
- <script type="text/x-kendo-tmpl" id="template">
- <div class="col-md-8 jumbotron">
- <div class="col-sm-4">
- <span><b>Name:</b></span><br />
- <span><b>Gender:</b></span><br />
- <span><b>DOB:</b></span><br />
- <span><b>Country:</b></span><br />
- <span><b>Province:</b></span><br />
- <span><b>Interset:</b></span><br />
- </div>
- <img img src="#:Image#" width="100" height="100" />
- <div class="col-sm-4">
- <span>#:FirstName#</span><br />
- <span>#:Gender#</span><br />
- <span>#:DOB#</span><br />
- <span>#:CountryName#</span><br />
- <span>#:ProvinceName#</span><br />
- <span>#:Interset#</span><br />
- </div>
- </div>
- </script>
- <div class="demo-section k-content wide">
- @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>()
- .Name("ListView")
- .TagName("div")
- .ClientTemplateId("template")
- .DataSource(dataSource =>
- {
- dataSource.Read(read => read.Action("GetStudentListViewData", "Home")).ServerOperation(true);
- dataSource.PageSize(2);
- }).Pageable()
- )
- </div>
- <script src="~/Scripts/Kendo/Scripts/kendo.all.min.js"></script>
- <script src="~/Scripts/Kendo/Scripts/kendo.aspnetmvc.min.js"></script>
- <script>
- $('#btnSearch').click(function () {
- filterListView();
- });
- $('#SearchBox').keypress(function (e) {
- if (e.which == 13) {//Enter key pressed
- $('#btnSearch').click();//Trigger search button click event
- }
- });
- function filterListView() {
- debugger;
- var searhValue = $('#SearchBox').val();
- var dataSource = ({
- filters: {
- // leave data items which are
- logic: "or",
- filters: [
- { field: "FirstName", operator: "contains", value: searhValue },
- { field: "CountryName", operator: "contains", value: searhValue },
- { field: "Gender", operator: "contains", value: searhValue },
- { field: "ProvinceName", operator: "contains", value: searhValue },
- { field: "Interset", operator: "contains", value: searhValue }
- ]
- }
- });
- var list = $("#ListView").data("kendoListView");
- list.dataSource.filter(dataSource.filters);
- }
- </script>
- public JsonResult GetStudentListViewData([DataSourceRequest] DataSourceRequest request)
- {
- var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel
- {
- FirstName = list.FirstName,
- Gender = list.Gender,
- DOB = list.DOB.Value.ToShortDateString(),
- Image = list.Image,
- CountryName = list.Name,
- ProvinceName = list.ProvinceName,
- Interset = list.Interset
- }).ToList();
- return Json(studentData.ToDataSourceResult(request));
- }
Add Comment
Please, Sign In to add comment