[Solved] MVC Treeview checked node values null with Ajax view

[Stéphan Parrot]

Hello folks,
    I'm having a major issue with the MVC TreeView which I can't resolve right now...
Here's the case:
I have a page which has an Ajax.ActionLink which calls an action that loads a list of items into a ViewModel and displays the view in a treeview inside a DIV.

I can select nodes in the treeview and then, I have a Remove button which posts to an action to remove the actual checked nodes from the list.

My problem is that, when I debug the code and inspect the values of these checked items, it's set to null...

Now, I have tried with a page that displays the treeview directly and submits the form using an Html.Form instead of an Ajax.Form like in the description above and with this case, it works perfectly as in the demos on the telerik demo page...

I've attached a sample project showing this odd behavior and I'd be very grateful to get an answer on how to make this work if possible!
OR, if someone can suggest me a better approach to have a CheckBoxList (that's what I'm trying to achieve here, using a treeview as a CheckBoxList control), that would be awesome!

Thanks!

Stéphan

[Atanas Korchev]

Hello Stéphan Parrot,

 There are two problems:

1. The JavaScript files of the TreeView are not loaded
2. The TreeView is not initialized

Please check this help topic which shows the required steps to load a partial view containing a Telerik component via ajax.

I hope this helps,
Atanas Korchev
the Telerik team

[Stéphan Parrot]

Well, I just tried that and I can't get it to work either...
I've attached the update code sample...
Maybe if you can provide me with a small sample from your side that depicts how it work or update my code sample to a working sample?

Thanks again!

Stéphan

[shailendra]

Hello Stéphan ,

I am facing similar problem using Treeview with Ajax.
I am building tree with ajax but it has stopped expanding and collapse functionality.
It seems treeview is not able to read javascript files of telerik.
Please provide me any workaround if you find?
I will be thankfull to you.

[Hristo Germanov]

Hi shailendra,

I can't find where is the problem.
In WithAjaxController you have method who don't work.

private void RemoveInfoItem(CustomInfos infoToRemove)
{
   var list = GetCustomInfoList() as IList<CustomInfos>;
   list.Remove(infoToRemove);
   SetCustomInfoList(list);
}

But in WithoutAjaxCollector you have method who work fine.

private void RemoveInfoItem(CustomInfos infoToRemove)
{
   var list = GetCustomInfoList() as IList<CustomInfos>;
   var itemToRemove = list.FirstOrDefault(i => i.ID == infoToRemove.ID);
   if(itemToRemove!=null)
      list.Remove(itemToRemove);
   SetCustomInfoList(list);
}

Greetings,
Hristo Germanov
the Telerik team

[Stéphan Parrot]

Hello Hristo,
    I don't understand your post. First, you reply to someone else but you mention the code I have posted. Secondly, you say that there's code that doesn't work but provide no information about what is not working.
I need specifics to answer this question. Also, the project I've provided along the problem description is quite clear enough: I can't get the values of the checked nodes in the treeview when posting to an action called from an AJAX call but it works with the Html call.

Tell me what isn't working in my code as you mention so I can look at it and update if necessary.

Thank you.

[shailendra]

Hello Hristo,

I have no problem with the code ,Stéphan has posted , that's working fine as to show the issue he has reported.
I have posted a reply as i am facing almost similar problem, Treview is not able to expand or collapse its nodes when tree is generated using Ajax though its working fine with normal Html binding.

Moreover i have created separate thread with reporting the issue i am facing along with sample application but could not get any reply.

Please reply to my thread, I will be thankful to you.

Regards,
Shailendra

[Hristo Germanov]

Hello Stéphan,

Please accept my apologize about previous post.

In your sample application I sаw a few mistakes:
1. You have Ajax.Beginform() and because of this you need to use PartialView(partial view, model) instead of RedirectToAction(action name). And then you will be able to post checked checkboxes.
2. You couldn't remove checked checkboxes because of the method RemoveInfoItem.

private void RemoveInfoItem(CustomInfos infoToRemove)
{
   var list = GetCustomInfoList() as IList<CustomInfos>;
   list.Remove(infoToRemove);
   SetCustomInfoList(list);
}

In your RemoveCustomInfos method you set HasChildren with info.Checkable(this property is always true in your case) and then you try to remove all items in infos_checkedNodes list. But your odd items are with HasChildren property set to false and you couldn't remove any item. I think you need to do something like this:

private void RemoveInfoItem(CustomInfos infoToRemove)
{
   var list = GetCustomInfoList() as IList<CustomInfos>;
   var itemToRemove = list.FirstOrDefault(i => i.ID == infoToRemove.ID);
   list.Remove(itemToRemove);
   SetCustomInfoList(list);
}

For your convenience I have attached the modified sample project.

Sincerely yours,
Hristo Germanov
the Telerik team

[Stéphan Parrot]

Hristo, 
    Thanks you very much for the explanations! It worked perfectly!
One thing I'd like to point out is that I don't think it's necessary to specifically use PartialView since View() also works but, you were right about redirectToAction, I wasn't thinking about that possibility!
Now I know and I thank you for that!

Have a nice week-end!

@shailendra:
Have you tried Hristo's suggestion? Did that fixed your problem as well?

I hope so!

[shailendra]

Hi Stephan,

yes, That worked for me too.
Now everything is ok.