Telerik Extensions for ASP.NET MVC : Extended Client API Documentation

Coming Soon

dataBindAsTable

Description

Version(s) Supported

Razor View Engine

@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .HtmlAttributes( new { style = "width:400px" })
        .ClientEvents(events => events.OnLoad("combobox_onLoad"))
        .Render();
}

<script type="text/javascript">
	combobox_onLoad = function (e) {
		var rootUrl = '@Url.Content("~")';

		$.ajax({
			url: rootUrl + '/ComboBox/SelectProducts',
			contentType: 'application/json; charset=utf-8',
			type: 'GET',
			dataType: 'json',
		})
		.done(function(response) {
			var combobox = $('#combobox').data('tComboBox');

			combobox.dataBindAsTable({
				data: response.products,
				displayFields: [{
					fieldName: "Product",
					style: "font-weight:bold"
				}, {
					fieldName: "SubCategory",
					style: "color:Blue"
				}],
				selectedField: "Product",
				valueField: "Id",
				height: '500px'
			});
		});
	}
</script>

Controller

using System.Web.Mvc;

namespace TelerikMvcClientApiRazor.Controllers
{
	public class ComboBoxController : BaseController
	{
		public ActionResult DataBindListItemsAsTable()
		{
			return View();
		}
		
		public ActionResult SelectProducts()
		{
			return Json(new { products = GetProducts() }, JsonRequestBehavior.AllowGet);
		}
		
		protected IList GetProducts()
		{
			IList products = new List();

			products.Add(new Product { Id = 1, Name = "ASP.NET AJAX", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 44 });
			products.Add(new Product { Id = 2, Name = "ASP.NET MVC", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 3, Name = "Silverlight", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 59 });
			products.Add(new Product { Id = 4, Name = "WPF", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 51 });
			products.Add(new Product { Id = 5, Name = "Windows Forms", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 27 });
			products.Add(new Product { Id = 6, Name = "Windows Phone", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 24 });
			products.Add(new Product { Id = 7, Name = "Telerik Reporting", Category = "Developer Tools", SubCategory = "Report Designer and Viewer", Controls = 8 });
			products.Add(new Product { Id = 8, Name = "OpenAccess ORM", Category = "Developer Tools", SubCategory = "Data Access", Controls = 8 });
			products.Add(new Product { Id = 9, Name = "Just Code", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 12 });
			products.Add(new Product { Id = 10, Name = "Just Mock", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 9 });
			products.Add(new Product { Id = 11, Name = "Just Trace", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 10 });
			products.Add(new Product { Id = 12, Name = "Just Decompile", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 6 });
			products.Add(new Product { Id = 13, Name = "TeamPulse", Category = "Agile Project Management", SubCategory = "", Controls = 9 });
			products.Add(new Product { Id = 14, Name = "Test Studio", Category = "Software Testing Tools", SubCategory = "", Controls = 5 });
			products.Add(new Product { Id = 15, Name = "Testing Framework", Category = "Software Testing Tools", SubCategory = "", Controls = 12 });
			products.Add(new Product { Id = 16, Name = "Sitefinity ASP.NET CMS", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 17, Name = "Add-ons Marketplace", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 18, Name = "SharePoint Acceleration Kit", Category = "SharePoint", SubCategory = "" });
			products.Add(new Product { Id = 19, Name = "Telerik Minifier", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 20, Name = "Code Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 21, Name = "Razor Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 22, Name = "Visual Style Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 23, Name = "Template Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 24, Name = "Kendo UI Widgets", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 25, Name = "Kendo UI Framework", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 6 });
			products.Add(new Product { Id = 26, Name = "Kendo UI DataViz", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 4 });
			products.Add(new Product { Id = 27, Name = "Kendo UI Mobile", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 8 });

			return products;
		}
	}
}
	

disableListItems

Description

Version(s) Supported

Razor View Engine

@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("combobox_onLoad"))
        .Render();
}
<button style="margin-top:10px;" onclick="disableDropDownListItems();">Disable List Items</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	disableDropDownListItems = function () {
		var combobox = $('#combobox').data('tComboBox');

		combobox.disableListItems([
			{ value: 6 }, // Disable the item with a value of 6.
			{ text: 'Unselectable'} // Disable the item with the text of 'Unselectable'.
		]);
	}
</script>

selectByText

Description

Version(s) Supported

Razor View Engine

@{
	Html.Telerik().ComboBox()
		.Name("combobox")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("combobox_onLoad"))
		.Render();
}
<br />
<br />
<button style="margin-top:10px;" onclick="selectByText('Web Content Management');">Select Web Content Management (by Text)</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	selectByText = function (text) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.selectByText(text);
	}
</script>

selectByValue

Description

Version(s) Supported

Razor View Engine

@{
	Html.Telerik().ComboBox()
		.Name("combobox")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("combobox_onLoad"))
		.Render();
}
<br />
<br />
<button style="margin-top:10px;" onclick="selectByValue(7);">Select Item with Value 7 (by Value)</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	selectByValue = function (value) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.selectByValue(value);
	}
</script>

dataBindAsTable

Description

Version(s) Supported

Razor View Engine

@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes( new { style = "width:400px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}

<script type="text/javascript">
	dropdownlist_onLoad = function (e) {
		var rootUrl = '@Url.Content("~")';

		$.ajax({
			url: rootUrl + '/DropDownList/SelectProducts',
			contentType: 'application/json; charset=utf-8',
			type: 'GET',
			dataType: 'json',
		})
		.done(function(response) {
			var dropdownlist = $('#dropdownlist').data('tDropDownList');

			dropdownlist.dataBindAsTable({
				data: response.products,
				displayFields: [{
					fieldName: "Product",
					style: "font-weight:bold"
				}, {
					fieldName: "SubCategory",
					style: "color:Blue"
				}],
				selectedField: "Product",
				valueField: "Id",
				height: '500px'
			});
		});
	}
</script>

Controller

using System.Web.Mvc;

namespace TelerikMvcClientApiRazor.Controllers
{
	public class DropDownListController : BaseController
	{
		public ActionResult DataBindListItemsAsTable()
		{
			return View();
		}
		
		public ActionResult SelectProducts()
		{
			return Json(new { products = GetProducts() }, JsonRequestBehavior.AllowGet);
		}
		
		protected IList GetProducts()
		{
			IList products = new List();

			products.Add(new Product { Id = 1, Name = "ASP.NET AJAX", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 44 });
			products.Add(new Product { Id = 2, Name = "ASP.NET MVC", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 3, Name = "Silverlight", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 59 });
			products.Add(new Product { Id = 4, Name = "WPF", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 51 });
			products.Add(new Product { Id = 5, Name = "Windows Forms", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 27 });
			products.Add(new Product { Id = 6, Name = "Windows Phone", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 24 });
			products.Add(new Product { Id = 7, Name = "Telerik Reporting", Category = "Developer Tools", SubCategory = "Report Designer and Viewer", Controls = 8 });
			products.Add(new Product { Id = 8, Name = "OpenAccess ORM", Category = "Developer Tools", SubCategory = "Data Access", Controls = 8 });
			products.Add(new Product { Id = 9, Name = "Just Code", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 12 });
			products.Add(new Product { Id = 10, Name = "Just Mock", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 9 });
			products.Add(new Product { Id = 11, Name = "Just Trace", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 10 });
			products.Add(new Product { Id = 12, Name = "Just Decompile", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 6 });
			products.Add(new Product { Id = 13, Name = "TeamPulse", Category = "Agile Project Management", SubCategory = "", Controls = 9 });
			products.Add(new Product { Id = 14, Name = "Test Studio", Category = "Software Testing Tools", SubCategory = "", Controls = 5 });
			products.Add(new Product { Id = 15, Name = "Testing Framework", Category = "Software Testing Tools", SubCategory = "", Controls = 12 });
			products.Add(new Product { Id = 16, Name = "Sitefinity ASP.NET CMS", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 17, Name = "Add-ons Marketplace", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 18, Name = "SharePoint Acceleration Kit", Category = "SharePoint", SubCategory = "" });
			products.Add(new Product { Id = 19, Name = "Telerik Minifier", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 20, Name = "Code Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 21, Name = "Razor Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 22, Name = "Visual Style Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 23, Name = "Template Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 24, Name = "Kendo UI Widgets", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 25, Name = "Kendo UI Framework", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 6 });
			products.Add(new Product { Id = 26, Name = "Kendo UI DataViz", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 4 });
			products.Add(new Product { Id = 27, Name = "Kendo UI Mobile", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 8 });

			return products;
		}
	}
}
	

disableListItems

Description

Version(s) Supported

Razor View Engine

@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}
<button style="margin-top:10px;" onclick="disableDropDownListItems();">Disable List Items</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	disableDropDownListItems = function () {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');

		dropdownlist.disableListItems([
			{ value: 6 }, // Disable the item with a value of 6.
			{ text: 'Unselectable'} // Disable the item with the text of 'Unselectable'.
		]);
	}
</script>

selectByText

Description

Version(s) Supported

Razor View Engine

@{
	Html.Telerik().DropDownList()
		.Name("dropdownlist")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
		.Render();
}
<br />
<br />
<button style="margin-top:10px;" onclick="selectByText('Web Content Management');">Select Web Content Management (by Text)</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	selectByText = function (text) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.selectByText(text);
	}
</script>

selectByValue

Description

Version(s) Supported

Razor View Engine

@{
	Html.Telerik().DropDownList()
		.Name("dropdownlist")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
		.Render();
}
<br />
<br />
<button style="margin-top:10px;" onclick="selectByValue(7);">Select Item with Value 7 (by Value)</button>

<script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	selectByValue = function (value) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.selectByValue(value);
	}
</script>

hideColumn

Description

Version(s) Supported

Parameters

JavaScript

$('#MyGrid').data('tGrid').hideColumn(1);

showColumn

Description

Version(s) Supported

Parameters

JavaScript

$('#MyGrid').data('tGrid').showColumn(1);

toggleColumnVisibility

Description

Version(s) Supported

Parameters

JavaScript

$('#MyGrid').data('tGrid').toggleColumnVisibility({ index: 1, visible: true });

enableClientSort

Description

Version(s) Supported

Parameters

JavaScript

$('#MyGrid').data('tGrid').enableClientSort();

$('#MyGrid').data('tGrid').enableClientSort({ onlyColsDefinedInMarkup:false });

hideGroupColumns

Description

Version(s) Supported

JavaScript

$('#MyGrid').data('tGrid').hideGroupColumns();

enableRowDblClick

Description

Version(s) Supported

JavaScript

$('#MyGrid').data('tGrid').enableRowDblClick();

getTab

Description

Version(s) Supported

Parameters

JavaScript

var tab = $('#MyTabStrip').data('tTabStrip').getTab({ text: 'Tab 2' });

var tab = $('#MyTabStrip').data('tTabStrip').getTab({ index: 1 });