Get / Set RadComboBox values client side RadGrid BathEdit mode

[Sean]

Greetings,

I am trying to copy a selection from 1 RadComboBox to 11 other RadComboBoxes within a RadGrid.  I am using BatchEdit mode so am using client-side script.  The dataitem.findElement("cboRadPerson") in my script returns a div and not a combo box. Maybe there is a complication because I have a button in the EditItemTemplate.

What is the best way to get the selected value of  a RadComboBox, and what is the best way to set the selected value in a RadComboBox?

Thanks, Sean

        function CopyPerson(event) {

            event = event || window.event;
            var id = event.srcElement.name;
            var moFrom = id.slice(-2);
            var masterTableView = $find('<%= gvLINE_ITEM.ClientID %>').get_masterTableView();
            var selectedrow = masterTableView.get_selectedItems()[0];
            var dataitem = masterTableView.get_dataItems()[selectedrow._itemIndex];

            var cboFrom = dataitem.findElement("cboRadPerson");
            var cboTo;
                         
            for (i = parseInt(moFrom) + 1 ; i < 12; i++) {
                cboTo = dataitem.findElement("cboRadPerson" + i);
                cboTo.findItemByValue(cboFrom.get_value()).select();
            }            
        }

              <telerik:RadGrid ID="gvLINE_ITEM" runat="server" Skin="Office2010Silver" ViewStateMode="Enabled"
                  DataSourceID="dsLINE_ITEM"  EnableViewState="true"
                  AllowSorting="True" AllowAutomaticDeletes="True" AllowAutomaticUpdates="False"
                  AllowPaging="false"  AllowAutomaticInserts="false" 
                  Height="670px" ShowFooter="True"
                  RenderMode="Lightweight" CssClass="DDGridView"
                  HeaderStyle-CssClass="th" 
                  EnableHeaderContextMenu="true" >
                    <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" 
                        AllowColumnsReorder="True" EnableRowHoverStyle="true" AllowKeyboardNavigation="true" >
                       <Scrolling AllowScroll="True" UseStaticHeaders="true" />
      <Selecting AllowRowSelect="True" />
      <Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False" />         
                       <ClientEvents OnRowSelected="RowSelected" OnBatchEditSetEditorValue="BatchEditSetEditorValue" />               
                    </ClientSettings>
       <GroupingSettings ShowUnGroupButton="true" />                  
                    <MasterTableView CommandItemDisplay="Top" 
                        DataKeyNames="LINE_ITEM_ID"  
                        ClientDataKeyNames="LINE_ITEM_ID,PERSON_ID_01,PERSON_ID_02,PERSON_ID_03,PERSON_ID_04,PERSON_ID_05,PERSON_ID_06,PERSON_ID_07,PERSON_ID_08,PERSON_ID_09,PERSON_ID_10,PERSON_ID_11,PERSON_ID_12"
                        DataSourceID="dsLINE_ITEM" HorizontalAlign="NotSet" EditMode="Batch" AllowMultiColumnSorting="true"  
                        AutoGenerateColumns="False" > 
                        <BatchEditingSettings EditType="ROW"  />
                        <CommandItemSettings ShowAddNewRecordButton="true" ShowSaveChangesButton="true" ShowCancelChangesButton="true" ShowRefreshButton="false" ShowExportToExcelButton="false" />

                           <telerik:GridTemplateColumn ItemStyle-CssClass="td1"  SortExpression="PERSON.NAME" HeaderText="Jan" HeaderStyle-Width="135px"  
                               DataType="System.String"
                               DataField="PERSON_ID_01" UniqueName="PERSON_NAME" ColumnGroupName="colGroup1" >
                                <ItemTemplate>     
                                    <asp:LABEL ID="lblPERSON" runat="server" ToolTip='<%# Eval("PERSON_ID_01") %>'
                                        Text='<%# If(String.IsNullOrEmpty(Eval("PERSON.NAME")), "", If(Eval("PERSON.EXPENSE_LINE_TYPE_ID").ToString() = "1", Eval("PERSON.NAME") & " (e)", Eval("PERSON.NAME") & " (c)")) %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadComboBox ID="cboRadPerson" runat="server" DataValueField="PERSON_ID" DataTextField="NAME" DataSourceID="dsPERSON_01" CssClass="DDDropDownList" />     
                                    <Button name="btnCopyPerson01" value="01" type="button"  onclick="CopyPerson();">
                                        Copy<img src='../img3/arrow right red16.jpg' alt="Copy Person" title="Copy selected value to the rest of year." ></Button>                                                                                                                                                                                                                
                                </EditItemTemplate>                                 
                            </telerik:GridTemplateColumn> 
                            <telerik:GridTemplateColumn ItemStyle-CssClass="td1"  SortExpression="PERSON1.NAME" HeaderText="Feb" HeaderStyle-Width="135px" 
                                DataField="PERSON_ID_02" UniqueName="PERSON1_NAME" ColumnGroupName="colGroup2" DataType="System.String" >
                                <ItemTemplate>     
                                    <asp:LABEL ID="lblPERSON1" runat="server" Text='<%# If(String.IsNullOrEmpty(Eval("PERSON1.NAME")), "", If(Eval("PERSON1.EXPENSE_LINE_TYPE_ID").ToString() = "1", Eval("PERSON1.NAME") & " (e)", Eval("PERSON1.NAME") & " (c)")) %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                     <telerik:RadComboBox ID="cboRadPerson1" runat="server" RenderMode="Lightweight" DataValueField="PERSON_ID" DataTextField="NAME" DataSourceID="dsPERSON_02" CssClass="DDDropDownList" />   
                                </EditItemTemplate>                                 
                            </telerik:GridTemplateColumn>
                        </Columns>
                        
                    </MasterTableView>                  
              </telerik:RadGrid>

 

[Peter Milchev]

Hello,

The expected behavior of the .findElement() is to return the DOM element, in your case the div element. In order to get the ComboBox control you should use the .findControl() method. Then you could easily get and set the selected value of the ComboBox:

 

var cb = dataitem.findControl("RadComboBox1");
var selectedValue = cb.get_selectedItem().get_value();

var cb2 = dataitem.findControl("RadComboBox2");
var itemToSelect = cb.findItemByValue(selectedValue);
itemToSelect.select();

The RadComboBox Client-side Programming section could be used for further reference.

Regards,
Peter Milchev
Telerik by Progress