Selectable and Editable grid

[Thomas]

I've been racking my brains trying figure out how to build a particular type of grid. Here's what I'm trying to accomplish: I want a grid with a selection check box that when clicked populates a user-modifiable RadNumericTextBox control with a value from one of the other columns. The user must be able to modify the value after clicking and then on posting the whole grid I want to store the values that have been entered.

I tried using the GridClientSelectColumn along with some GridTemplateColumns but was unable to get it to work. I then tried using a GridTemplateColumn with an Html checkbox like so:

            <telerik:RadGrid ID="Foo" runat="server" AutoGenerateColumns="False"
                GridLines="Horizontal" Width="100%" AllowMultiRowSelection="true"
                AllowAutomaticDeletes="false"
                AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                OnNeedDataSource="Foo_NeedDataSource">
                <MasterTableView DataKeyNames="Key" CommandItemDisplay="None"
                    TableLayout="Fixed" ShowHeader="true" Width="784px" EditMode="InPlace">
                    <Columns>
                        <telerik:GridTemplateColumn UniqueName="Allocate" HeaderText="Pay?">
                            <HeaderStyle Width="35px" />
                            <ItemStyle Width="35px" HorizontalAlign="Center" />
                            <ItemTemplate>
                                <input id="AllocateEdit" type="checkbox" onclick=""  />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn DataField="AllocatedAmount" UniqueName="AllocatedAmount"
                            HeaderText="Amount">
                            <HeaderStyle Width="75px" />
                            <ItemStyle Width="75px" />
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="AllocatedAmountEdit" runat="server" Type="Number" Height="15px"
                                    Width="65px" MinValue="0" MaxValue="2147483647" NumberFormat-DecimalDigits="0"
                                    DbValue='<%# DataBinder.Eval(Container.DataItem, "AllocatedAmount") %>'>
                                    <EnabledStyle HorizontalAlign="right" />
                                </telerik:RadNumericTextBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

                        <telerik:GridBoundColumn DataField="Amount" HeaderText="Amount" ReadOnly="true">
                            <HeaderStyle Width="200px" />
                            <ItemStyle Width="200px" />
                        </telerik:GridBoundColumn>

                        <telerik:GridBoundColumn DataField="OtherStaticDataColumn" HeaderText="OtherStaticDataColumn" ReadOnly="true">
                            <HeaderStyle Width="70px" HorizontalAlign="Center" />
                            <ItemStyle Width="70px" HorizontalAlign="Right" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>

Yet, I could not figure out how to determine the item that was selected. Any suggestions? The idea would be that a user on checking one or more of the checkboxes would have the system default  a value into the RadNumericTextbox which they could then change. After they were done, they'd post all of their changes via a button.

[Thomas]

Related to this problem, is there a way to use the GridClientSelectColumn column and allow multi-select but hide the checkbox in the header?

[Sebastian]

Hi Thomas,

I think that the project from the following code library entry can get you started in your implementation:

http://www.telerik.com/community/code-library/submission/b311D-eeghk.aspx

The idea is to find the control residing in the corresponding grid row client-side in order to modify its state. Note that for your situation you can invoke the setValue(newValue) client method of RadNumericTextBox to change the value displayed in it.

Furthermore, in order to hide the SelectAll checkbox in the header of GridClientSelectColumn try the following code:

Private Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.WebControls.GridItemEventArgs) Handles RadGrid1.ItemCreated
   If TypeOf e.Item Is GridHeaderItem Then
      CType(e.Item, GridHeaderItem)("<MyGridClientSelectColumnUniqueName>").Controls(0).Visible = False
   End If
End Sub 'RadGrid1_ItemCreated

where <MyGridClientSelectColumnUniqueName> is the UniqueName of your GridClientSelectColumn set beforehand.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Thomas]

I did come up with a solution. I forced all rows to be editable in the ItemDataBound event and added a checkbox via a TemplateColumn with its OnCheckedChanged event wired up. Luckily there are no expensive drop lists when in "editable" mode for this particular grid and I do not expect monster row counts (of course I say that now...).

I believe this approach was the general idea advocated by Telerik some months ago when I asked a similar question. Certainly, I think this solution was easier than locating the control a runtime while not in edit mode.