10 Answers, 1 is accepted
Use the DataSource.data method to provide the new data to the dataSource.
Please note that posting the same message on different threads may be considered spam and backfire so that you don't get your response fast.
Regards,Alex Gyoshev
Telerik
Rank 1
Rank 1
$.ajax( { type: "POST", url: contextClientData.ContextSelectionDetails, dataType: "json", contentType: "application/json; charset=utf-8", data: JSON.stringify({ contextSearchValue: encodeURIComponent(contextSearchValue) }), success: function (result) { $("#treeview").data("kendoTreeView").dataSource.data(result); }, complete: function (message) { }, error: function (message) { } });
I am getting search results. But treeview was flickering more than one time
Hello Palanisamy,
Can you please provide a reproduction case for this, for example by hard-coding some sample data in a Dojo snippet?
Regards,Alex Gyoshev
Telerik
Rank 1
already added in snippet. Please provide sample for rebind from mvc json result .
$.ajax(
{
type: "GET",
url: contextClientData.ContextSelectionDetails + "?contextSearchValue=" + encodeURIComponent(contextSearchValue) + "&isFS=" + isFavoriteSuppressed + "&isLD=" + isLinkDisable + "&isG=" + isGlobalContext,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$("#treeview").data("kendoTreeView").dataSource.data(result);
},
complete: function (message) {
},
error: function (message) {
}
});
Hello Palanisamy,
The provided snippet is not runnable, nor does it provide data to show how the TreeView is bound. We cannot infer what you mean by "flickering" -- this is why I ask for a way to reproduce it, so that I can provide relevant assistance.
Regards,Alex Gyoshev
Telerik
Rank 1
Hi Alex,
I will tell you the clear concept. Very first we are loading the data in tree view. After that in search button click,i am trying to bind the results from mvc controller as jsonresult. search results are coming correctly upto controller. After binding in treeview,results are coming unexpected manner. For example search results are 6 means,after binding in treeview ,results are coming as 10 or 15 or 100 with expanded and collapse manner. Keepon treeview expanding,collapsing(i mean refreshing). That should not be the case.
once i enter the text in textbox and click the search button, search results should come properly with expanded mode.Please see the attached image and below code.
--This is for loading the data in treeview
function loadTreeView() {
if(!$("#btnSearch").hasClass("selected")) {
$("#btnSearch").addClass("selected");
$(".contextDiv").show();
if (!isContextLoaded) {
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read:
{
url: function (options) {
return "/WC3/ContextSelection/BindContext";
}
}
},
schema: {
model: {
id: "id",
hasChildren: "haschild",
context: "context"
}
}
});
$kendoTreeView = $("#treeview").kendoTreeView({
loadOnDemand: true,
dataSource: homogeneous,
template: kendo.template($("#treeview-template").html()),
dataBound: treeViewDataBound,
expand: expandTree,
collapse: collapseTree,
select: function (e) {
e.preventDefault();
}
});
registerEvents();
}
}
}
----THis is search button click event
$("#btnContextSearch").click(function() {
var contextSearchValue = $("#contextSearch").val();
if (contextSearchValue.length >= CHARACTER_LENGTH.SEARCH_MIN_LENGTH) {
contextSearchClause(contextSearchValue);
}
});
--This is search method
function contextSearchClause(contextSearchValue) {
$.ajax(
{
type: "GET",
url: "/WC3/ContextSelection/ContextSelectionDetails" + "?contextSearchValue=" + encodeURIComponent(contextSearchValue) + "&isFS=" + isFavoriteSuppressed + "&isLD=" + isLinkDisable + "&isG=" + isGlobalContext,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
--- I am trying to bind the json result from mvc controller. upto controller search results coming correctly. But after binding here(in treeview),results are not coming properly. Treeview keep on expanding or collapsing. I mean refreshing. Can u look into this issue?
$("#treeview").data("kendoTreeView").dataSource.data(result);
},
complete: function (message) {
},
error: function (message) {
}
});
}
--my controller method
/// <summary>
/// Get Context Selection Details
/// </summary>
/// <param name="contextSearchValue">contextSearchValue</param>
/// <param name="isFS">Defines the favorite suppression</param>
/// <param name="isLD">Defines the link disable</param>
/// <param name="isG">Defines the global context</param>
/// <returns></returns>
public ActionResult ContextSelectionDetails(string contextSearchValue, bool isFS, bool isLD, bool isG)
{
WebResponse<Collection<TreeNode>> objContextResponse = null;
this.fosHttp.SetHeader(new UserRequestInfo().GetUserRequestInfo());
objContextResponse = this.fosHttp.Get<WebResponse<Collection<TreeNode>>>(
string.Format(CultureInfo.CurrentCulture, WebConstants.GetContextSelection, this.BaseServiceLink, contextSearchValue, isFS, isLD, isG));
//Use custom serialize as the JavaScript serialize doesn't support DataMember attributes
return new CustomJsonResult { Data = objContextResponse.Result };
}
Could you please provide the samples for this scenario?
Scenario:
--------------
Note: 1. Use one jsonresult method for loading the data in treeview
2. Use another jsonresult method for rebinding the search results.
I need to load the data from mvc controller as jsonresult. After that while clicking search button, I need to rebind the search results from another jsonresult method.
Still if you are not getting, Please provide the samples for below scenarios.
1. loading the data in treeview from jsonresult method.
2. Search functionality(After clicking search button, i need to rebind the searchresults from jsonresult method)
3. Use javascript kendo treeview and mvc. In controller use jsonresult method.
Or else i need below sceenario...
Code:
----------
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read:
{
url: function (options) {
if(isSearch)
{
return url1;
}
else
{
return url2;
}
}
}
},
schema: {
model: {
id: "id",
hasChildren: "haschild",
context: "context"
}
}
});
$kendoTreeView = $("#treeview").kendoTreeView({
loadOnDemand: true,
dataSource: homogeneous,
template: kendo.template($("#treeview-template").html()),
dataBound: treeViewDataBound,
expand: expandTree,
collapse: collapseTree,
select: function (e) {
e.preventDefault();
}
});
In the above code i checked the condition for different read url. But always read url taking the first one only.(I mean url1 only even isSearch Condition is true). Kindly provide the solution for this.
Rank 1
Hi Alex,
Below is the clear scenario. You should see my previous post also. You will get more idea.
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the other data is to be fetched in the search click. I tried changing the read URL from script but it is defaulted back when the user tries to seacrhthe tree which should not be the case.
Below is my tree
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read:
{
url: function (options) {
return "/WC3/ContextSelection/BindContext";
}
}
},
schema: {
model: {
id: "id",
hasChildren: "haschild",
context: "context"
}
}
});
$kendoTreeView = $("#treeview").kendoTreeView({
loadOnDemand: true,
dataSource: homogeneous,
template: kendo.template($("#treeview-template").html()),
dataBound: treeViewDataBound,
expand: expandTree,
collapse: collapseTree,
select: function (e) {
e.preventDefault();
}
});
I then change the read url in script as following
var tree = $("#treeview").data("kendoTreeView");
tree.dataSource.transport.options.read.url = "/WC3/ContextSelection/ContextSelectionDetails/";
But when we try search in the tree the URL is still "/WC3/ContextSelection/BindContext" instead of "/WC3/ContextSelection/ContextSelectionDetails/"
Rank 1
HI Alex,
I tried below way also.See my below code. My Search Url calling infinite times while searching. Please see the attachment for further reference.
Code:
------------
var isSearch; var searchUrl; var contextSearchValue;
//Loading tree view data
function loadTreeView() {
searchUrl = contextClientData.ContextSelectionDetails + "?contextSearchValue=" +encodeURIComponent(contextSearchValue) + "&isFS=" +isFavoriteSuppressed + "&isLD=" +isLinkDisable + "&isG=" +isGlobalContext;
//if (!$("#btnSearch").hasClass("selected"))
//{
$("#btnSearch").addClass("selected");
$(".contextDiv").show();
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: function (options) {
if (isSearch) {
return searchUrl;
}
else {
return getUrl();
}
}
}
},
schema: {
model: {
id: "id",
hasChildren: "haschild",
context: "context"
}
}
});
if (!isContextLoaded) {
$kendoTreeView = $("#treeview").kendoTreeView({
loadOnDemand: true,
dataSource: homogeneous,
template: kendo.template($("#treeview-template").html()),
dataBound: treeViewDataBound,
expand: expandTree,
collapse: collapseTree,
select: function (e) {
e.preventDefault();
}
});
registerEvents();
}
else
{
$("#treeview").data("kendoTreeView").dataSource.read();
}
//}
}
$("#btnContextSearch").click(function() {
contextSearchValue = $("#contextSearch").val();
if (contextSearchValue.length >= CHARACTER_LENGTH.SEARCH_MIN_LENGTH) {
contextSearchClause(contextSearchValue);
}
});
function contextSearchClause(contextSearchValue) {
isSearch = true;
loadTreeView();
}
Hello Palanisamy,
Based on the latest code listing, it appears that the TreeView is initialized on every call of loadTreeView. Initializing the widget over the same element is not supported by the framework. A way to achieve the functionality that you want is to make the request to the server and use setDataSource to replace all the data in the TreeView with the received tree, if the server provides a complete hierarchy. I am afraid that the only example that we have about searching in the TreeView is for client-side searching when the data is fully loaded.
Regards,Alex Gyoshev
Telerik