This website is no longer actively supported
Written by John DeVight on 14 Jun 2011 14:37
Download the source code and sample project from CodePlex.
Overview
The Telerik Extensions for ASP.NET MVC are really nice, but lacks a rich client API. Telerik has left it up to you to implement for yourself. One way of doing this is to write the same block of code each time that functionality is needed; not really efficient, but it works. Another way is to create a separate javascript class that encapsulates the block of code and takes a reference to the Telerik control as a parameter. This is better than the first option, but just doesn't feel right. The direction that I chose was to extend the Telerik Extensions so that the block of code is executed from the Telerik control.
The Telerik ScriptRegister evaluates the page that is being rendered and identifies what components are being used and downloads only the javascript files needed to support I created a variable that contained the list of functions to extend a Telerik plugin. So the first thing I do is check to see if the javascript file for the component has been downloaded for the page by checking to see if the jQuery plugin is defined. If it is, then I define my extension functions and apply the functions to the Telerik plugin using the jQuery .extend() function.
The following implementation is based on Telerik Extensions for ASP.NET MVC version 2011.2.818.
Telerik jQuery Plugin Classes
Here are a list of the Telerik jQuery plugin classes that I have extended:
Component | jQuery Plugin Class |
---|---|
ComboBox | $.telerik.combobox |
DropDownList | $.telerik.dropDownList |
Grid | $.telerik.grid |
TabStrip | $.telerik.tabstrip |
TreeView | $.telerik.treeview |
Window | $.telerik.window |
Example of Extending the Window Extension
Here is an example of some functions for extending the Telerik Window extension.
(function($){ // Was the tekerik.window.min.js added to the page by the telerik script registrar? if ($.telerik.window != undefined) { // Extend the window plugin. var windowExtensions = { /// <summary> /// Set a new height for the window. /// </summary> /// <param type="int" name="h">New height for the window.</param> setHeight: function(h) { $(this.element).find('.t-window-content').height(h); }, /// <summary> /// Set a new width for the window. /// </summary> /// <param type="int" name="w">New width for the window.</param> setWidth: function(w) { $(this.element).find('.t-window-content').width(w); } }; // Add the extensions to the window plugin. $.extend(true, $.telerik.window.prototype, windowExtensions); } })(jQuery);
Hi - I have just integrated your telerik extensions for the treeview context menu. I like how simplistic it is and that you can have different menus based on the node type. I do have one suggestion/request. Is it possible to clear the menu when the user right clicks on something else? Currently, the old menu stays on the screen and another shows, so if the user right clicked on 5 different nodes without left clicking on something, you see 5 different menus on the screen.
Thank you so much for your contributions!
Good catch! Thank you. I've updated the telerik.extensions.js file on http://telerikmvcextendedjs.codeplex.com. See change Set: 7991 on the Source Code tab. Let me know if you have any problems with it…
John DeVight
Telerik MVP
I think I have answered my own question. I changed your code to use the mouseup event instead of the click event :
$(document).mouseup(function(e) {
// hide the context menu and remove it from DOM
$.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
$contextMenu.remove();
});
});
This appears to work. If you know of any reason I shouldn't use this, please let me know.
Thank you again!
Donna
Oh sorry! I should have refreshed my browser page before my last reply. I just downloaded your latest - change set 7991 and it works beautifully!
Thank you so much again!
Donna
=)
Let me know if there are any other features you would like to see and I'll do my best to incorporate them!
John DeVight
Telerik MVP
Will do! Thank you!
Hi John,
Thanks for you great job!
The client sorting function does not work with below setting in telerik mvc 2011.Q1.614:
.Scrollable(s => s.Height("auto"))
Also, it does not work with ClientTemplate setting in a grid.
Please help to check it.
Thanks and Regards,
Henry Zhou
Again, thank you. I see that when the "Scrollable" property is set, the grid column headers and grid contents are separated into two tables, each within it's own div. I'll fix my code to take this into consideration and post when I am done.
John DeVight
Telerik MVP
I've updated the telerik.extensions.js to fix the client sorting function when .Scrollable() is set. I have also made a change to the code to support the ClientTemplate setting. To get the updated telerik.extensions.js, download the latest sample applications attached to this article or go to http://telerikmvcextendedjs.codeplex.com/SourceControl/list/changesets and download Change Set 8215.
John DeVight
Telerik MVP
ClientTemplate:
columns.Bound(a => a.Region).Width(240).ClientTemplate("<#= Region.RegionName #>");
Client Sorting will not working on this column.
Interesting. Thank you for pointing this out to me.
The Telerik Grid stores column information in the "columns" JSON collection. For example, if the grid name is "MyGrid", then to view the columns information, look at $("#MyGrid").data("tGrid").columns. I am using a column's "type" attribute to determine how to sort. In the example that you provided above, "Region" is an object and therefore in the column's "type" attribute, is the value "Object". I would like to come up with the right implementation for you. In the case of a column "type" that I am unable to sort on, such as "Object" I can attempt to sort on the display text. In the example you provided, I would end up sorting on Region.RegionName.
Would that work for you?
John DeVight
Telerik MVP
Hello John,
Was checking out the tab manipulation features and encountered few bugs.
1. getTabIndex: line number 60
$.each($(this.element).find('.t-tabstrip-items').find('a'), function (i, a) {
Deleted the $ after each
2. removeTab: line number 181
var i = o.index; ///0;
Changed 0 initial value to o.index
Great work.
Thanks,
Iggie
Thanks Iggie! I'll take a look =)
John DeVight
Telerik MVP
Hi John,
Do you have plans for implementing the below listed client side features in Telerik Grid, like you have done enableClientSort
1. Client side filtering through javascirpt (with text box appearing on each column)
2. Client side paging through javascript
Your extensions are really helpful.
Thanks,
Balakrishna.
Hi Balakrishna,
Thank you for letting me know what you would like to see added to my extensions!
Yes, I do have plans to add client side filtering and paging within the next few months. I'm finishing up some additional features to the combobox and dropdownlist, window, grid and splitter that will come out around mid October.
The combobox and dropdownlist will have the ability to display "disabled" items.
The window will have the ability to set the title.
The grid will have the ability to enable/disable row select.
The splitter will have a "layout manager" feature to create a "border-layout" like the ExtJS border layout - http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
Please let me know if there are other other features you would like to see.
Regards,
John DeVight
John DeVight
Telerik MVP
Hi John,
I was badly in need of a way to add and remove tabs from the TabStrip dynamically and your extension comes a great way in helping implement that functionality. Thanks a lot for that.
I am however getting a interesting situation in removeTab() functionality that uses index based removing. No matter what I pass as index to the removeTab(), it is always removing the first tab (that is tab with index 0). Here is the code that I am using for the removeTab():
function removeTab(index) {
var tabStrip = $('#TabStrip').data('tTabStrip');
tabStrip.removeTab({ index: index });
}
I have checked the index variable that I am passing using alert statement and it is correctly set. I would be very grateful to you for your help.
regards,
Nirvan.
Hi Nirvan,
Sorry about the problem you are experiencing. I'll take a look at it tonight to see what the problem is.
Thanks for your patience.
Regards,
John DeVight
John DeVight
Telerik MVP
Hi Nirvan,
Sorry for the delay.
I fixed the issue and uploaded the latest telerik.extensions.js to http://telerikmvcextendedjs.codeplex.com/SourceControl/list/changesets, changeset 10168.
Regards,
John DeVight
John DeVight
Telerik MVP
Hi John,
I am trying to use the tabstrip extensions - specifically addTab - and I am getting an error - $("#DataInqTabStrip").data("tTabStrip").addTab is not a function. I have included your js file in the telerik scriptregistrar :
<%: Html.Telerik().ScriptRegistrar().Globalization(True)
.DefaultGroup(Function(group) group.Add("jquery-1.5.1.min.js"))
.DefaultGroup(Function(group) group.Add("jquery.validate.min.js"))
.DefaultGroup(Function(group) group.Add("telerik.common.min.js"))
.DefaultGroup(Function(group) group.Add("telerik.tabstrip.min.js"))
.DefaultGroup(Function(group) group.Add("telerik.extensions.js"))
.DefaultGroup(Function(group) group.Combined(True).Compress(True))%>
I see it in firebug. I have no idea what I am doing wrong. Any help you can give is very much appreciated! Here is the code:
View:
<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMCCarrierWebApp.WebTaskModel)" %>
<script type="text/javascript">
$(document).ready(function () {
$('a#submit_link').click(function () {
$.ajax({
url: '/DataInquiry/Index/',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
cache: false
})
.success(function (result) {
$('#DataInqTabStrip').data('tTabStrip').addTab({ text: 'Next Tab', html: result });
});
});
});
</script>
<div id="maintab">
<div id="datainquiry">
<div class="leftnav">
<%Html.Telerik().TreeView().Name("InquiryActionTree").Items(Function(items) items.Add().Text("New Inquiry")).Render()%>
</div>
<div class="rightnav">
<% Html.Telerik().TabStrip().Name("DataInqTabStrip").Items(Function(items) items.Add().Text("New Inquiry").Content(Sub()%>
<%: Html.Label("Please select the customer:")%>
<% Html.Telerik().DropDownList.Name("customer").BindTo(Session("CustomerList")).Render()%><br />
<%: Html.Label("Please choose the type of inquiry:")%>
<% Html.Telerik.DropDownList().Name("inquiryType").BindTo(Model.webTaskList).Render()%><br />
<%: Html.Label("Please enter the data on which to inquire:")%>
<%: Html.TextArea("inquiryData")%><br />
<a id="submit_link" href="#">Perform Inquiry</a>
<% End Sub)).Render()%>
</div>
<div id="Error"></div>
</div>
</div>
Controller:
Function Index() As ActionResult
Return PartialView("ShipmentInformation")
End Function
Thank you so much!
Donna
Hi Donna,
Could you try removing the .Combined(True) and .Compress(True) options and see what happens?
Regards,
John DeVight
John DeVight
Telerik MVP