We recently ran into an issue where we needed to get a reference to a telerik control on the client side but that control was going to be inside a grid or repeater so that there would be many copies all with unique generated IDs. It

looked like maybe the function $telerik.findControl could work for us, but there was limited documentation and I couldn’t find a single example online of someone successfully using it. Pretty much every post I cam across had the person being routed to some other more convoluted work around rather than addressing why their findControl call wasn’t working. So after getting it working I figured I’d give a quick explaination.

The method is:

var telerikControl = $telerik.findControl( domElementOfSomeParent , controlIdFromServerSide );

So just to be very clear, domElementOfSomeParent is an HTML DOM object that you can get from javascript or jquery or whatever.  It defines the scope for the search for the control.  Only elements that are ancestor (children, grand children etc) of domElementOfSomeParent will be considered.  And controlIdFromServerSide is a string that is the same as the ID you are specifying on the server, even if that ID is for a control that is going to be rendered multiple times because it’s in some gridview or repeater.

What you’ll get back is the telerik client object for your control.

Here is an interesting way I came across online of someone using responsive CSS to deal with tables.  Once the window width gets below 700px it switches from a table to more of a list of tables where each table becomes a row in the previous table. 

http://codepen.io/anon/pen/MwWwbY

It’s pulled off with this CSS (especially the ::last-child and ::before lines:

@media (max-width: 700px) {
  table {
    display: block;
    width: 500px;
    margin: 0 auto;
  }
  thead {
    display: none;
  }
  tbody {
    display: block;
  }
  tbody tr {
    display: block;
    border: 1px lightgray solid;
    border-radius: 4px;
    margin-bottom: 5px;
  }
  tbody tr td {
    display: block; 
    overflow: hidden;
    height: 1.2em;
    border-bottom: 1px lightgray solid;
  }
  tbody tr td::last-child {
    border: 0;
  }
  tbody tr td::before {
    display: inline-block;
    content: attr(title); 
    width: 25%;
    font-weight: 600;
    text-align: right;
    border-right: 1px lightgray solid;
    padding-right: 10px;
    margin-right: 10px;
  }
}

This:

changes into this:

This site http://howtocenterincss.com/ takes care of the problem.  Just answer a few questions about how you want stuff aligned (centered, left, right + top middle bottom) and they give you the css.

Just a quick tip.  If you are ever debugging an MVC Action where you are passing JSON directly to the server (or for that matter where you are debugging anything complicated enough that you care about the raw data being passed to your method) I found this to be helpful.

Run this code in the debugger (or you can just paste it into a Watch item)

Request.InputStream.Position = 0

And then you can add this as a watch item

new System.IO.StreamReader(Request.InputStream).ReadToEnd()

This will write out the entire raw input data, which is very helpful if you want to see the exact JSON being passed to your method.