Kendo Ui web Listview - kendo-ui

Question

I am using Listview of kendo ui. I have no server wrapper class I am using the free web version.
My controller code is given below:
public ActionResult Index()
{
return View();
}
public ActionResult GetCandidateSearch()
{
IhrmsEntities Entity = new IhrmsEntities();
List<VW_CANDBASICSEARCH> lstCandidateSearch = Entity.VW_CANDBASICSEARCH.Take(50).ToList();
return Json(lstCandidateSearch,JsonRequestBehavior.AllowGet);
}
My index.cshtml
<div>
#Html.Partial("~/Views/Home/PvCandidateBasicSearch.cshtml")
</div>
My PvCandidateBasicSearch.cshtml
<div class="gridHolder" style="width: 100%">
<div id="listCandidateView" class="itemDisplay"></div>
<div id="pager"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="itemDisplay">
<div class="text-label">${CAND_NAME} </div>
<div class="text-label">${CAND_LOCATION} </div>
<div class="text-label">${CAND_MOBILE} </div>
<div class="text-label">${CAND_PRE_EMAIL} </div>
<div class="text-label">${CAND_SKILL} </div>
<div class="text-label">${CAND_CITY} </div>
<a href="/Home/EditCandidate?id=${CAND_ID}" >Edit</a>
<a href="/Home/DeleteCandidate?id=${CAND_ID}" >Delete</a>
</div>
</script>
<style type="text/css">
.text-label {
font-size: large;
}
.itemDisplay {
margin: auto;
padding: 6px 8px;
width:auto;
min-width:200px;
height: auto;
min-height:100px;
border: 1px solid #999999;
-webkit-border-radius: 6px;
border-radius: 6px;
font-weight: normal;
background: #deefff;
}
.gridHolder{width: 100%; height:auto; min-height:300px; margin:auto;}
</style>
My javascript code in layout.cshtml is given below
<script type="text/javascript">
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#btnSearch").click(function () {
LoadListView();
});
function LoadListView() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
}
</script>
when I first click search button it is perfectly going to the GetCandidateSearch action method and showing result.But when I second time clicking search button it is not going the action method. Plz help me.

Answer 1

You're misunderstanding the the datasource concept.
The datasource is an object holds the data gathered from request. On the second click you just re-binding that datasource to the ListView...
Basically, you need to bind the list view to the datasource on page load, then "OnClick", do datasource.read()
try this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$(document).ready(function() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
});
$("#btnSearch").click(function () {
$("#listCandidateView").datasource.read();
});
Not saying that the exact code will work, but it should give you an idea of the approach.