This is a migrated thread and some comments may be shown as answers.

Selectable and Editable grid

3 Answers 160 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 01 Feb 2008, 09:46 PM
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.

3 Answers, 1 is accepted

Sort by
0
Thomas
Top achievements
Rank 1
answered on 01 Feb 2008, 10:22 PM
Related to this problem, is there a way to use the GridClientSelectColumn column and allow multi-select but hide the checkbox in the header?
0
Sebastian
Telerik team
answered on 04 Feb 2008, 03:23 PM
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
0
Thomas
Top achievements
Rank 1
answered on 04 Feb 2008, 10:51 PM
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.
Tags
Grid
Asked by
Thomas
Top achievements
Rank 1
Answers by
Thomas
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or