Thanks Sovan!

Let me know if there are any articles you would like to see on Kendo UI and ASP.NET (MVC or WebForms).

Regards,

Hi John,
Awesome article..
Thanks a trillion.

Sovan

I hope to do a whole series of articles on Kendo UI and ASP.NET (MVC or WebForms). Let me know what would be helpful for you and I'll do my best to put something together.

Regards,

John DeVight

Awesome…. I was looking for Kendo UI ASP.net MVC application since december.

Hi John,

Any idea how to take this one step further so you could mark your model with an attribute [ReadOnly(true)] ala Data Annotations?

Regards,
Brian

In above code what reference I've to add for Document class. I'm unable to resolve this.

Thanks in advance.

Regards,
Santhosh G

This is great. Maybe this is a silly question, but is there a way to get a model value into the data attribute? ie data: { documentType: @Model.SomeValue}

Fantastic, works like a charm.

John,
Happy New Year! How have you been doing? I discovered a bug (and a fix!) with your tabstrip extensions. When you have multiple tabstrips and you try to dynamically add a tab to one of the tabstrips, it adds the tab to both and doesn’t select the correct tab. The indexing gets all out of whack and you get some pretty wacky behavior.

This is happening because the addTab() function is getting an array of all tabstrip items and it includes all other tabs!

var tabstripitems = tabstrip.find('.t-tabstrip-items');

The fix for this is to remove the other tabstrip items and you can do this by using the splice method on the tabstripitems:

if (tabstripitems.length > 1) {
tabstripitems.splice(1, tabstripitems.length - 1);
}

You need to also add this to the removeTab function as well, because I noticed wacky behavior after I removed a tab. The indexing got messed up. When I tried to select a tab from the inner tabstrip, a tab in the outer tabstrip was displayed. I have provided you a couple screen shots here of what was going on (I sent this in an email).

I submitted a patch to CodePlex (path ID# 11271). This fix is not perfect however. It just fixed it if you want to add a tab to first tabstrip, NOT if you want to add it to any other tabstrips. Some additional coding will be required to identify which tabstrip the tab needs to be added to and to remove (or splice) the other tabstrips.

I want to apologize. I have been pretty quiet lately. I was hoping to contribute more.

Steve

Excellent work John and a sincere thank you for a job well done and for sharing. I have incorporated this into my current mvc3 project framework.

I have a few things I noticed for those who are reading and incorporating this work into their projects. The files may have changed a bit after John posted, so you shouldn't need to worry about the _rootUrl variable. The message for the Confirm Dialog button is wrong, but can be easily corrected in the Index.cshtml file. I may have missed it above, but you need to add the following to your layout.cshtml OR to each view that uses the dialogs: @Html.Partial("_MessageBoxDialogs"). And if you want to remove the close button on the Wait diaolog, you can add the following to your Telerik window declaration.
.Buttons(b => b
.Clear()
)

Thanks again.

Hi Donna,

I've added an addNode function to the TreeView. Sorry it has taken so long. You can find it here: Change Set 11873

Here are some examples:

var node = $('#MyTreeView').data('tTreeView').findNodeByText('Free Tools');
var newNode = node.addNode({ 
  text:'New Node Text 1', 
  value:101, 
  spriteCssClass:'my-sprite-class' 
});

or

var node = $('#MyTreeView').data('tTreeView').findNodeByText('Free Tools');
var newNode = node.addNode({
  text:'New Node Text 2', 
  value:102, 
  image: { 
    src: 'http://demos.telerik.com/aspnet-mvc/Content/PanelBar/FirstLook/notesItems.gif', 
    alt:'test' 
  } 
});

It doesn't work with checkboxes yet. I'll try and get that done soon.

Regards,

John DeVight
telerikmvcextendedjs at gmail dot com

Hi Donna,

No worries. Please feel free to ask questions. I apologize that I haven't been good about responding lately. Been busy with the holidays fast approaching.

As for your question about the tree. Take a look at this article: Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid

My guess is that the tree isn't getting initialized properly.

What I discovered, is that when a telerik control is rendered, javascript is executed to create the "client side object" that manages the behavior of the control. The problem is that the jQuery.ajax function removes all javascript from the response that it receives from a successful call. To resolve this, I get the telerik control's "initialization javascript code" using the function WriteInitializationScript, and placed it in a hidden field. In the jQuery.ajax.success function, after I have added the tab, I use the javascript eval function to evaluate the javascript that was stored in the hidden field.

Another possible issue is if there are no other telerik tree controls on the page, then the appropriate telerik javascript files are not loaded on the page. You may need to "manually" do this (in your view or layout view, not the partial view returned from the jQuery.ajax call) using the Telerik().ScriptRegistrar(). Probably something like this:

{
       Html.Telerik().ScriptRegistrar()
            .DefaultGroup(group =>
                group.Add("~/Scripts/2011.2.818/telerik.treeview.min.js")
            );
}

Let me know how it turns out.

Regards,

John DeVight

Hi John,

I am sorry to keep bugging you so much. I did work around my problem with the addTab for the TabStrip about which I posted a few weeks ago. However, I now have a different issue. It appears that expanding nodes in a hiearchical treeview which is on a tab dynamically added to a tabstrip using the addTab extension is not working. I've tried using the BindTo to bind to a list of treeviewitems which had parent nodes with children Items stored in the ViewData and I've tried using LoadOnDemand with the DataBinding Ajax stuff. The parent nodes appear with the + icon, but when I click on the expand icon, nothing happens. If you have any ideas on how I can fix this, I would really appreciate it! If you need to see my code, please let me know.

Thank you,
Donna

Hi John,

No problem. Thank you so much for your help. I don't blame you for getting sidetracked with Kendo. I hope to start looking at it soon myself. I'll check back later to see if you've come up with anything. In the meantime, I'm going to do this a little differently to hopefully get this project finished.

Thanks again for all you do!
Donna

Sorry, I haven't responded back about this. I took a look at telerik's tree list, but haven't had time to figure out an MVC equivalent. When I do get the chance to figure it out, I'll let you know.

Hi Donna,

I'll take a look and see what I can do.

As for the addnode function for the tree view, I got a bit side tracked with telerik's release of Kendo UI and a new project I've started on CodePlex called: Kendo MVC Extensions for ASP.NET. I'll get the addnode function finished up soon.

Thanks for you patience,

John

Hi John,

I'm looking forward to using the AddNode function for the TreeView. I do have a question/problem. I am using the AddTab for the TabStrip and I have some code in the $(document).ready function in the partial view for the tab I am adding that is not working. I set a breakpoint in Firebug and it appears to be hitting the code, but when the tab renders, it is like the code didn't work. I am hiding a div and setting a change function on a dropdown list to either hide or show the div depending on what is chosen. But the div is being shown right off the bat when it should be hidden. This worked until I added it to a dynamically added tab. If you have any suggestions or ideas as to how to fix this, I would very much appreciate them! I may be overlooking something…

Thank you so much,
Donna

Here's the code of the partial view:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.AddReportsToUserModel)" %>
<script type="text/javascript">
$(document).ready(function () {
$("#webTaskDiv").hide();
$("#webTaskError").hide();

$("#resourceTypes").change(function () {
if ($(this).val() == 5) {
$("#webTaskDiv").show();
$("#webTaskError").show();
}
else {
$("#webTaskDiv").hide();
$("#webTaskError").hide();
}
});

$('a#continueBtn').click(function () {
var reporttreeview = $('#ReportsToAdd').data('tTreeView');
var reports = [];
var checkedNodes = $('#ReportsToAdd :checked').closest('.t-item');
if (checkedNodes.length > 0) {
$('#ReportsToAdd :checked').closest('.t-item')
.each(function (index, node) { // first arg: index, second arg: node
reports.push(reporttreeview.getItemValue(node));
});
if (reports.length > 0) {
$.cookie("reportKeys", reports);
$.ajax({ url: '<%= Url.Action("GetAddReportsPart2", "User") %>',
contentType: 'application/html; charset=utf-8',
data: { userKey: '<%:Model.userKey %>' },
type: 'GET',
dataType: 'html',
cache: false,
success: function (result2) {
$('#AddReportsTabStrip').data('tTabStrip').removeTab({ text: 'Select Report and User Groups' });
$('#AddReportsTabStrip').data('tTabStrip').addTab({ text: "Select Report and User Groups", html: result2 });
$('#AddReportsTabStrip').data('tTabStrip').selectTab({ text: "Select Report and User Groups" });
}
});
}
}
else {
$("#AddReportsErrorField").replaceWith('<div id="AddReportsErrorField" class="display-field" style="color:#FF3366; font-size:small;">Please select at least one report to add for the user.</div>');
}
});
});
</script>
<div style="overflow: auto; height:630px;">
<div style="float:left; width:40%; padding:5px;">
<span class="listbox-label">Reports</span><br />
<span class="editor-label">Choose report(s) to add</span><br />
<%= Html.Telerik().TreeView().Name("ReportsToAdd").ShowCheckBox(True).HtmlAttributes(New With {.style = "font-size:1em; height:500px; width:350px"})
.BindTo(CType(Model.treeViewNodes, IEnumerable(Of TreeViewItem)),
Sub(mappings)
mappings.For(Of TreeViewItem)(
Sub(binding)
binding
.ItemDataBound(
Sub(item, rpt)
item.Text = rpt.Text
item.Value = rpt.Value
item.Encoded = False
End Sub)
End Sub)
End Sub)
%>
</div>
<div style="float:right; width:45%; padding:5px;">
<div>
<span class="listbox-label">Resource Types</span><br />
<%: Html.DropDownList("resourceTypes", Model.resourceType, " — Select —")%>
</div>
<div>
<br /><span class="listbox-label">Compression Types</span><br />
<%: Html.DropDownList("compressionTypes", Model.compressionType, " — Select —")%>
</div>
<div id="compressionError"></div>
<div id="webTaskDiv">
<br /><span class="listbox-label" id="webTasksLabel">Web Links</span><br />
<%: Html.DropDownList("webTasks", Model.webTasks, " — Select —")%>
</div>
<div id="webTaskError"></div>
<div style="float:none; clear:both; text-align:center">
<div class="table_menu">
<br />
<ul class="left">
<li><a href="#" id="continueBtn" class="button add_new"><span><span>Continue</span></span></a></li>
<li><a href="#" id="cancelBtn" class="button add_new"><span><span>Cancel</span></span></a></li>
</ul>
<br />
<div></div>
<div id = "AddReportsErrorField"></div>
</div>
</div>
</div>
</div>

Here's the javascript code for adding the tab dynamically:
function getReportsToAdd() {
$.ajax({ url: '<%= Url.Action("GetReportsToAdd", "User") %>',
contentType: 'application/html; charset=utf-8',
data: { userKey: '<%:Model.webUser.UserKey %>' },
type: 'GET',
dataType: 'html',
cache: false,
success: function (result2) {
$('#AddReportsTabStrip').data('tTabStrip').removeTab({ text: 'Select Reports' });
$('#AddReportsTabStrip').data('tTabStrip').addTab({ text: "Select Reports", html: result2 });
$('#AddReportsTabStrip').data('tTabStrip').selectTab({ text: "Select Reports" });
}
});
}

Thanks for answering. Sure, the control I have thought it should be to behave more like the control that has telerik treelist in asp net version. who has what it already has the current MVC telerik grid but would add the nesting owns treeview. thanks again.

Sounds like an interesting idea. Can you tell me more about how you would like the control to behave?

Hi John, I'm wanting to do a mix a gridview control with a treeview, but without success I have reviewed your post about how to make a custom table razor but not how to apply it in order to increase functionality and make it behave like a treeview. thanks for responding.