FormDecorator for different GridCheckBoxColumn

[Kjell]

How can I use different FormDecorator skin for different telerik:GridCheckBoxColumn?
I want to use black for GridCheckBoxColumn DataField="admin" and Metro for GridCheckBoxColumn DataField="writer" and Office2010Silver for telerik:GridTemplateColumn with a asp:CheckBox?

[Konstantin Dikov]

Hi Kjell,

The requirement that you have will be difficult to accomplish, due to the way that RadFormDecorator works. I would personally recommend that you use GridTemplateColumns with RadButton as check boxes instead of CheckBox control, which will allow you to explicitly set the Skin property:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <telerik:RadButton ToggleType="CheckBox" ButtonType="ToggleButton" Skin="MetroTouch" runat="server"></telerik:RadButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <telerik:RadButton ToggleType="CheckBox" ButtonType="ToggleButton" Skin="BlackMetroTouch" runat="server"></telerik:RadButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

The other option that you have is to keep using the CheckBox controls, but handle the decoration manually on client-side, using the client-side API of the RadFormDecorator and its decorate(element) method:

<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" Skin="BlackMetroTouch" DecorationZoneID="fakeZone"/>
<telerik:RadFormDecorator runat="server" ID="RadFormDecorator2" Skin="MetroTouch" DecorationZoneID="fakeZone"/>
<span id="fakeZone"></span>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%=RadGrid1.ClientID%>");
            var formDecorator1 = $find("<%=RadFormDecorator1.ClientID%>");
            var formDecorator2 = $find("<%=RadFormDecorator2.ClientID%>");

            var tableView = grid.get_masterTableView();
            var items = tableView.get_dataItems();
            for (var i = 0; i < items.length; i++) {
                formDecorator1.decorate(items[i].get_cell("column1"));
                formDecorator2.decorate(items[i].get_cell("column2"));
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridCheckBoxColumn UniqueName="column1"></telerik:GridCheckBoxColumn>
            <telerik:GridCheckBoxColumn UniqueName="column2"></telerik:GridCheckBoxColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Hope this helps.


Regards,
Konstantin Dikov
Telerik