How to bind RadCheckBox in a GridTemplateColumn?

[Rob Ainscough]

I'm trying to figure out how to bind my DataSource (in my case this is assigned in Code Behind using  List) to a RadCheckBox in my ItemTemplate.

My code that isn't working:

<telerik:RadGrid ID="rg_Balances" runat="server" AutoGenerateColumns="False">
                                <MasterTableView TableLayout="Auto">
                                    <Columns>
                                        <telerik:GridTemplateColumn DataField="Selected" DataType="System.Boolean" HeaderText="Select Unit(s) To Pay">
                                            <ItemTemplate>
                                                <telerik:RadCheckBox ID="rcb_Selected" runat="server" OnCheckedChanged="UpdateTotal" AutoPostBack="true"></telerik:RadCheckBox>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn DataField="UnitMask" DataType="System.String" HeaderText="Unit" ReadOnly="true"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Balance" DataType="System.Decimal" DataFormatString="{0:C2}" HeaderText="Balance" ReadOnly="true"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="IncludeNextCharges" DataType="System.Boolean" HeaderText="Include Next Charges"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="NextPeriodTotalCharges" DataType="System.Decimal" DataFormatString="{0:C2}" HeaderText="Next Charges" ReadOnly="true"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Total" DataType="System.Decimal" DataFormatString="{0:C2}" HeaderText="Unit Total" ReadOnly="true"></telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings>
                                    <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                                </ClientSettings>
                            </telerik:RadGrid>

 

The binding property is called "Selected" and it's a member of my object in my List of objects.  In SL5 I accomplished this with the following code:

<telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn x:Name="ServiceMAPIDColumn" Header="ServiceID" IsVisible="False" DataMemberBinding="{Binding ServiceMAPID}"/>
                <telerik:GridViewDataColumn x:Name="ServiceSelectedColumn" Header="" DataMemberBinding="{Binding Selected, Mode=TwoWay}" IsReadOnly="True">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox x:Name="ServiceSelectedCheckBox" IsChecked="{Binding Selected, Mode=TwoWay}" Tag="{Binding}">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Click">
                                        <ei:CallMethodAction TargetObject="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType=sdk:ChildWindow}}" MethodName="UpdateCustomerUnitServiceSelected" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </CheckBox>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn x:Name="ServiceNameColumn" Header="Service" IsReadOnly="True" Width="198" DataMemberBinding="{Binding ServiceName}" />
                <telerik:GridViewDataColumn x:Name="ServiceAmountColumn" Header="Amount" IsReadOnly="True" Width="80" DataMemberBinding="{Binding ServiceAmount}" TextAlignment="Right" DataFormatString="{}{0:C2}"/>
            </telerik:RadGridView.Columns>

 

In ASP.NET AJAX there doesn't appear to be a DataTemplate or anything similar?  

Any hints on how I can get a RadCheckBox bound to a RadGrid datasource?

Cheers, Rob.

[Marin Bratanov]

Hi Rob,

A RadCheckBox is bound in the same way as an <asp:CheckBox>. I created an example for you that also shows how you can use its server CheckedChanged event:

<telerik:RadGrid runat="server" ID="rg1" OnNeedDataSource="rg1_NeedDataSource" RenderMode="Lightweight">
    <MasterTableView EditMode="InPlace" AutoGenerateColumns="false" CommandItemDisplay="Top" DataKeyNames="theBoolField,textField">
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn DataField="theBoolField" HeaderText="template column with checkboxes">
                <ItemTemplate>
                    <telerik:RadCheckBox runat="server" ID="cb1" Checked='<%# Eval("theBoolField") %>' OnCheckedChanged="cb1_CheckedChanged" AutoPostBack="true" />
                    <br />
                    <telerik:RadLabel Text="text" ID="lbl1" runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadCheckBox runat="server" ID="cb1" Checked='<%# Bind("theBoolField") %>' OnCheckedChanged="cb1_CheckedChanged" AutoPostBack="true" />
                    <br />
                    <telerik:RadLabel Text="text" ID="lbl1" runat="server" />
                </EditItemTemplate>
                <InsertItemTemplate>
                    <telerik:RadCheckBox runat="server" ID="cb1" Checked='<%# Bind("theBoolField") %>' OnCheckedChanged="cb1_CheckedChanged" AutoPostBack="true" />
                    <br />
                    <telerik:RadLabel Text="text" ID="lbl1" runat="server" />
                </InsertItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

protected void cb1_CheckedChanged(object sender, EventArgs e)
{
    GridDataItem itm = ((sender as Control).NamingContainer as GridDataItem);
    //in my example all templates are the same to make it shorter, in a real case they may differ
    RadLabel lbl = itm.FindControl("lbl1") as RadLabel;
    if (!((itm is GridDataInsertItem) && itm.IsInEditMode))
    {
        //the  way to tell one mode from the other is here:
        //https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/in-place
        //an Insert item will not have data associated with it already, that's why the object can be null
        lbl.Text = itm.GetDataKeyValue("textField").ToString();
    }
    else
    {
        lbl.Text = DateTime.Now.ToString();
    }
}

protected void rg1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = GetDummyData();
}

protected DataTable GetDummyData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("theBoolField", typeof(bool)));
    tbl.Columns.Add(new DataColumn("textField", typeof(string)));
    tbl.Columns.Add(new DataColumn("numField", typeof(int)));
    tbl.Columns.Add(new DataColumn("secondTextField", typeof(string)));
    tbl.Rows.Add(new object[] { true, "one", 1, "red" });
    tbl.Rows.Add(new object[] { false, "two", 2, "green" });
    tbl.Rows.Add(new object[] { true, "three", 3, "blue" });
    tbl.Rows.Add(new object[] { true, "four", 4, "pink" });

    return tbl;
}

Regards,
Marin Bratanov
Progress Telerik

[Rob Ainscough]

Hi Marin,

Brilliant, that's working exactly how I need it to work. I would imagine this is a fairly common scenario but I couldn't find anything like this in your documentation.  I'd highly recommend you add this "sample" to your documentation.

It's a little odd that one has to instantiate 3 ItemTemplates, one for each mode of operation, but it does work and I don't have the visual issues that arise from some of Telerik's other code samples.

Thank you.

Cheers, Rob.

[Marin Bratanov]

Hello Rob, 

It's good to hear you're making progress.

You don't have to define the three. 

I was just trying to showcase how this can work in various custom templates and how you can have different templates if you like.

If you omit a template, the previous ones will be used. For example, if you define an ItemTemplate and an EditItemTemplate, the InsertItemTemplate will use the EditItemTemplate. If you only define an ItemTemplate, the edit and insert items will use that. Obviously, at least an ItemTemplate is needed, otherwise nothing will be rendered.

This exact example may not exist in our documentation, because it is a generic data binding scenario that works in the same fashion with the standard ASP controls. Ours are built on top of the framework and assume familiarity with its standard approaches and techniques, so we document things that are specific to our product, because we cannot aim to be a clone of MSDN.

Regards,
Marin Bratanov
Progress Telerik