Conditionaly change folder and file icons in the grid

2 posts, 1 answers
  1. Andreas
    Andreas avatar
    12 posts
    Member since:
    Aug 2010

    Posted 22 Sep 2010 Link to this post


    I'm using a custom content provider for the FileExplorer component, and I  want to conditionally change the folder and file icons for the _grid_ depending on the "state" of that particular folder or file.

    For example, say I've just selected a folder in the TreeView, and the grid is now displaying the contents of that selected folder. The grid might now have the following content: Folder1, Folder2, fileA, fileB

    At server side, I know that e.g. Folder2 and fileB are "special" in some way, and I want to mark the client markup that is generated for these two items with a "special css class". The idea is that this css class will be used to override the standard icons used.

    Is there a way of doing this? (Preferrably server side, since there I've already got all information and infrastructure ready).

    My first idea was to traverse the fileExplorer.Grid.Items in Page_PreRender looking for GridDataItems that met a special criteria. However, I can't seem to find find any property in the GridDataItems that maps to the corresponding DirectoryItems that backs the FileExplorer. If I could use a value in the GridDataItem to find out which DirectoryItem it represents, i.e. the DirectoryItems path property, I could then set a css class based on that. (This strategy is what I'm currently using for the icon override in the TreeView, since the RadTreeNode.Value is the same as the DirectoryItem.Name)

    Another idea was to add a css class directly on the DirectoryItem at the time of Provider.ResolveRootDirectoryAsTree(..) running. But I haven't found a way of doing it in that manner.

    Do you have any suggestions on how to accomplish what I'm looking for?

    Thank you in advance,
    Regards Andreas
  2. Answer
    Fiko avatar
    1406 posts

    Posted 29 Sep 2010 Link to this post

    Hello Andreas,

    This requires some customizations to be made in order to achieve the desired result. I recommend you to follow these steps in order to achieve the desired result:
    • Add a custom attribute to the Grid's column. This online demo shows how to do that for a custom column, but the solution is the same for the default columns
    • Use the RadGrid's OnRowDataBound event and get the custom parameter
    • Use the value of the custom parameter in order to determine whether to change the folder's icon or not
    • You can change the folder's icon by assigning your own CSS class and to the element.

    Please note that all of the steps should be done on the client, because the embedded RadGrid uses client-side databinding.

    I hope this helps.

    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top