This project is read-only.

Getting Started

DropDownList

Grid

TabStrip

TreeView

Window

Comming Soon

  • ComboBox

 

 

dataBindAsTable

Description

Bind a list of json objects as a table in the dropdownlist items.

Screen Shot

Sample

View

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    DropdownlistDataBindAsTable
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<%=
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes(new { style = "width: 425px" })
%>

<%
    Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(() =>
        {%>
            initDropDownList();
        <%});
%>

<script type="text/javascript">
    initDropDownList=function () {
        $.ajax({
            url: '/Home/GetWikiPagesAsJson',
            contentType: 'application/json; charset=utf-8',
            type: 'GET',
            dataType: 'json',
            error: function (xhr,status) {
                if(typeof console!="undefined") console.log(status);
            },
            success: function (response) {
                if(typeof console!="undefined") console.log(response);
                $('#dropdownlist').data('tDropDownList').dataBindAsTable({
                    data: response,
                    displayFields: [{ 
                        fieldName: "Title", 
                        style: "font-weight:bold" 
                    },{
                        fieldName: "Url"
                    },{ 
                        fieldName: "PageViews",
                        style: "color:Red;"
                    }],
                    separator: { visible: true, color: "Blue" },
                    selectedField: "Title",
                    valueField: "Id",
                });
            }
        });
    }
</script>

</asp:Content>
    

Controller

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using TelerikMvcAspxApp.Models;

namespace TelerikMvcAspxApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View("DropdownlistDataBindAsTable");
        }

        public JsonResult GetWikiPagesAsJson()
        {
            return Json(GetWikiPageList(), JsonRequestBehavior.AllowGet);
        }

        private IList<WikiPage> GetWikiPageList()
        {
            IList<WikiPage> list = new List<WikiPage>();
            list.Add(new WikiPage { Id = 1, Title = "Telerik MVC : Creating an \"ExtJS border-layout\" with Splitters", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:creating-an-extjs-border-layout-with-splitters", 
				PageViews = 100, DateCreated = new DateTime(2011, 5, 11) });
            list.Add(new WikiPage { Id = 2, Title = "Telerik MVC : Resizing Controls Within Splitter Panes", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:resizing-controls-within-splitter-panes", 
				PageViews = 200, DateCreated = new DateTime(2011, 5, 12) });
            list.Add(new WikiPage { Id = 3, Title = "Telerik MVC : Dynamically Add a Tab to the TabStrip", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:dynamically-add-a-tab-to-the-tabstrip", 
				PageViews = 300, DateCreated = new DateTime(2011, 5, 12) });
            list.Add(new WikiPage { Id = 4, Title = "Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:jquery-ajax-partial-view-and-the-telerik-grid", 
				PageViews = 400, DateCreated = new DateTime(2011, 5, 14) });
            list.Add(new WikiPage { Id = 5, Title = "Telerik MVC : Creating Standard MessageBox Dialogs", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:creating-generic-messagebox-dialogs", 
				PageViews = 500, DateCreated = new DateTime(2011, 5, 11) });
            list.Add(new WikiPage { Id = 6, Title = "Telerik MVC : Extending the Telerik Extensions for ASP.NET MVC", 
				Url = "http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc", 
				PageViews = 600, DateCreated = new DateTime(2011, 5, 11) });
            return list;
        }
    }
}
	
  

Last edited Dec 23, 2011 at 4:13 PM by jddevight, version 17

Comments

clamont Feb 18, 2012 at 10:48 PM 
Will this extension only work with "AllowGet" for JSON requests? There are security issues with exposing JSON via a GET. POST is better.

clamont Feb 18, 2012 at 10:45 PM 
Will the initialization of the .ajax value interfere with other Telerik controls I have on the page? For example, what if I have a grid on the same page? I'm thinking of using this control within a custom ToolbarTemplate for a Grid