Styling RadGrid with client-side binding

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 14 Apr 2014 Link to this post


    Telerik Product and Version

    Supported Browsers and Platforms

    all browsers supported by RadControls

    Components/Widgets used (JS frameworks, etc.)

    no external dependencies


    Very often you would like to style certain columns, for example align the text to right, set background or text color and so on. This can be easily achieved by setting the corresponding server properties from the markup or code behind. However, for RadGrid with client-side binding this won’t be possible because not all the rows are created on the server and thus the properties won’t affect all the rows on the client. The observed behavior, after increasing the page size from the pager for example, is that only the first n cells in a column (where n is the PageSize, default is 10) are styled. In order to workaround this behavior you need to implement a client-side solution. In this code library there are 3 approached presented in 3 separate pages:

    Approach1: pure CSS. This approach will work in all browsers (except IE6 and below)

    Approach2: CSS3. This approach relies on the new feature in CSS3 and it’s much simpler than the above. However it will work only for HTML5 compliant browsers.

    Approach3: JavaScript. It is simple and works in all browsers.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.