how to bind new kendo datasource to a existing kendo-web-UI listview? - kendo-ui

Question

i create a kendo-datasource and assign it to a kendo-listview. its work fine. But i added a search functionality for the list-view. the problem is after search the datasoruce is updated but my listview does not reflect the changes. please help me here is the code bellow. thanks
<script type="text/javascript">
var shareDataSource; var title = $('#blogTitle').val() || "";
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
$("#listView").kendoListView({
dataSource: shareDataSource,
template: kendo.template($("#template").html()),
autoBind: true
});
function searchByTitle() {
var title = $('#blogTitle').val();
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/BlogPosts/?title=" + title
}
},
pageSize: 15
});
shareDataSource.read();
}</script>
<div>
<input type="text" id="blogTitle" size="5" />
<input type="button" value="Search" onclick="searchByTitle();" />
</div> <div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="post">
<div class="post-meta">
<h2 class="post-title"> <a title="" rel="bookmark" href="">${Title}</a></h2>
<hr/>
<p class="post-metadata">November 29, 2012 in <a rel="category tag" title="View all posts in .net" href="">.net</a>,
<a rel="category tag" title="View all posts in SQL Server R2" href="">SQL Server R2</a> | Tags: <a rel="tag" href="">software</a>,
<a rel="tag" href="">technology</a> | <a title="" href="">Leave a comment</a></p>
</div> <div class="post-content"> ${Content}
</div>
</div>
</script>

Answer 1

Hasib,
you have already defined kendo datasource on the top, try not to recreate it again in your search method. In theory to update your ListView you need to call read on your data source :
function searchByTitle() {
shareDataSource.read();
}

Answer 2

update the datasource [read]. But should use parametrMap. Bobby_D mention above.
//---------------------------------------------------------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function(){ var title = $('#blogTitle').val() || "";
return "api/BlogPosts/?title=" + title;}
}
},
pageSize: 15
});
//----------------- better -----------------------------
var shareDataSource;
shareDataSource = new kendo.data.DataSource({
transport: {
read: {
url:"api/BlogPosts/",// "api/Blogposts/",//
data: {
title: function () { return ($('#blogTitle').val() || ""); } // sends the value of the input as the title id
}
}
},
pageSize: 15
});