Since all Telerik UI components for ASP.NET MVC are actually jQuery plugins one can use them without any server-side code (or ASP.NET MVC). In this blog post I will show how to use the grid and bind it to Twitter. Here are the required steps:

 

  1. Register the two CSS files to style the grid:
    <head>
     <link rel="stylesheet" type="text/css" href="telerik.common.min.css" />
     <link rel="stylesheet" type="text/css" href="telerik.vista.min.css" />
    </head>
  2. Then add the JavaScript files:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="telerik.common.min.js"></script>
      
    <script type="text/javascript" src="telerik.grid.min.js"></script>
  3. Add the minimum HTML required by the grid:
    <div id="Grid" class="t-widget t-grid">
    <div class="t-grid-header">
    <div class="t-grid-header-wrap">
    <table cellspacing="0">
    <colgroup>
    <col style="width:100px;" />
    <col style="width:80px;" />
    <col />
    </colgroup>
    <tr>
    <th class="t-header" scope="col">Author</th>
    <th class="t-header" scope="col">Avatar</th>
    <th class="t-header t-last-header" scope="col">Post</th>
    </tr>
    </table>
    </div>
    </div>
    <div class="t-grid-content" style="height:400px;">
    <table cellspacing="0">
    <colgroup>
    <col style="width:100px;" />
    <col style="width:80px;" />
    <col />
    </colgroup>
    <tbody>
    <tr class="t-no-data">
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    <div class="t-grid-footer">
    <table cellspacing="0">
    <colgroup>
    <col style="width:100px;" />
    <col style="width:80px;" />
    <col />
    </colgroup>
    <tr>
    <td class="t-footer" colspan="3">
    <div class="t-status">
    <a class="t-icon t-refresh" href="#"></a>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </div>

  4. Initialize the jQuery plugin of the grid:
    $(document).ready(function() {
    $("#Grid").tGrid({
    columns:
    [
    {"name":null,"type":""},
    {"name":null,"type":""},
    {"name":"text","type":"String"}
    ],
    pageSize:0,
    onDataBinding:onDataBinding,
    onRowDataBound:onRowDataBound
    });
    });

  5. And finally bind it to the Twitter service:
    function onRowDataBound(e) {
    var row = e.row;
    var dataItem = e.dataItem;

    // update `Author` cell with template
    row.cells[0].innerHTML = [
    '<a class="t-link" href="http://www.twitter.com/', dataItem.from_user, '">',
    dataItem.from_user,
    '</a>'
    ].join('');

    // update `Avatar` cell with template
    row.cells[1].innerHTML = [
    '<img width="48" height="48"',
    ' src="', dataItem.profile_image_url,
    '" alt="', dataItem.from_user, '" />'
    ].join('');
    }

    function onDataBinding(e) {
    var grid = $(this).data('tGrid');

    $('.t-status .t-icon', grid.element).addClass('t-loading');

    // call the twitter search api
    $.ajax({
    url: 'http://search.twitter.com/search.json',
    contentType: 'application/json; charset=utf-8',
    type: 'GET',
    dataType: 'jsonp',
    error: function(xhr, status) {
    alert(status);
    },
    data: {
    q: $('#searchText').val()
    },
    success: function(result) {
    grid.dataBind(result.results);
    $('.t-status .t-icon', grid.element).removeClass('t-loading');
    }
    });
    }

    I have attached a zip file with a runnable demo. Check it out!

 


About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Comments

Comments are disabled in preview mode.