Populate datagrid combobox from javascript

[Myriam]

Hello
I have a datagrid which contain combobox. The user can add row by clicking on a button in my form.
So the user can have as many rows as he wants.

I have 2 arrays in javascript. One for the text value and one for the key value.

I would like to populate my combo box (as many as it has in my grid) with the array that I have in javascript.
how can I do that?
Here is my arrays

var correspondance = new Array(2);
            correspondance[0] = ["St-Victor", "Beauceville", "St-Georges", "Notre-Dame-des-Pins", "St-Anges", "Tring-Jonction", "St-Odilon-de-Cranbourne", "Frampton", "St-Frédéric", "St-Joseph", "Vallée-Jonction", "Ste-Marie", "St-Benoit-Labre", "St-Ephrem", "St-Narcisse-de-Beaurivage", "St-Elzéar", "Ste-Hénédine", "St-Isidore", "Ste-Marguerite", "Scott", "St-Bernard", "St-Sylvestre", "St-Patrice-de-beaurivage", "Lac-Etchemin", "St-Camille-de-Lellis", "St-Magloire", "St-Cyprien-des-Etchemins", "Ste-Rose-de-Watford", "St-Benjamin", "St-Prosper", "Ste-Justine", "St-Zacharie", "Ste-Aurélie", "St-Côme-Linière", "St-Honoré-de-Shenley", "St-Théophile", "St-Robert-Bellarmin", "St-Ludger", "St-Gédéon-de-Beauce", "Courcelles", "St-Évariste-de-Forsyth", "La Guadeloupe", "St-Martin"];
            correspondance[1] = ["G0M2B0", "G5X3N9", "G5Y7R7", "G0M1K0", "G0S3E0", "G0N1X0", "G0S3A0", "G0R1M0", "G0N1P0", "G0S2V0", "G0S3J0", "G6E2K9", "G0M1P0", "G0M1R0", "G0S1W0", "G0S2J0", "G0S2R0", "G0S2S0", "G0S2X0", "G0S3G0", "G0S2G0", "G0S3C0", "G0S1B0", "G0R1S0", "G0R2S0", "G0R3M0", "G0R1B0", "G0R4G0", "G0M1N0", "G0M1Y0", "G0R1Y0", "G0M2C0", "G0M1M0", "G0M1J0", "G0M1V0", "G0M2A0", "G0M2E0", "G0M1W0", "G0M1T0", "G0M1C0", "G0M1S0", "G0M1G0", "G0M1B0"];

Here is my grid

<telerik:RadGrid
                                  ID="RadGrid2"
                                  Skin="Vista"
                                  runat="server"
                                  ShowFooter="true"
                                  CommandItemStyle-HorizontalAlign="Center">
                                     <MasterTableView
                                         ShowFooter="true"
                                         CommandItemDisplay="bottom"
                                         EditMode="InPlace" >
                                         <CommandItemTemplate>
                                             <asp:LinkButton ID="LinkButton1" CommandName="CalculDistance" Runat="server" CssClass="TexteBlanc16">Calculer</asp:LinkButton>
                                         </CommandItemTemplate>
                                         <Columns>
                                             <telerik:GridTemplateColumn UniqueName="CodePostal" HeaderText="Code Postal">
                                                 <ItemTemplate>
                                                     <asp:DropDownList ID="LstCodePostal" runat="server"  OnBlur="CreerCodePostal()"></asp:DropDownList>
                                                 </ItemTemplate>
                                             </telerik:GridTemplateColumn>
                                         </Columns>
                                      </MasterTableView>
                              </telerik:RadGrid>

Thank you

[Shinu]

Hello Myriam,

One suggestion is to use RadComBox and hook the OnClientLoad and populate the Combobox.

The following help article will help you to achieve the same.
RadComboBoxItemCollection Object.

Thanks,
Shinu.

[Myriam]

Hello
I was able to do something like this:

 

function RowCreated(sender, eventArgs) {

         var master = $find("<%=RadGrid2.ClientID %>").get_masterTableView();
         var row = eventArgs.get_gridDataItem();
         var ListCodePostal = row.findElement("LstCodePostal");
         for (var i = 0; i < correspondance[0].length; i++) {
             var optn = document.createElement("OPTION");
             optn.text =  correspondance[0][i];
             optn.value = correspondance[1][i];
             ListCodePostal.options.add(optn);
             }
     }

and it works.

Now I want to get what is selected in the dropdownlists but I'm not able to do it.

I've tried this:

Private Sub RadGrid2_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid2.ItemCommand
      If e.CommandName = "CalculDistance" Then
          CalculerDistanceMultiple()
      End If
  End Sub

Private Sub CalculerDistanceMultiple()
       Dim cpt As Integer = 0
       Dim CodePostalDe As String
       Dim CodePostalA As String
       Dim kmCalcule As Decimal
       Do While cpt < RadGrid2.Items.Count
           'For Each Item As GridDataItem In RadGrid2.Items
           If CodePostalDe = "" Then
               Dim LstcodeDe As DropDownList = DirectCast(RadGrid2.Items(cpt)("CodePostal").FindControl("LstCodePostal"), DropDownList)
               CodePostalDe = LstcodeDe.SelectedValue
               cpt = cpt + 1
               'Avancer le for each de 1 enregistrement
           End If
           Dim LstcodeA As DropDownList = DirectCast(RadGrid2.Items(cpt)("CodePostal").FindControl("LstCodePostal"), DropDownList)
           If Not (LstcodeA.SelectedValue Is Nothing) And (LstcodeA.SelectedValue <> "") Then
               CodePostalA = LstcodeA.SelectedValue
               kmCalcule = kmCalcule + TrouverDistance(CodePostalDe, CodePostalA)
           End If
           CodePostalDe = CodePostalA
           ' Next
           cpt = cpt + 1
       Loop
       Response.Write(kmCalcule)
   End Sub

But it always says that my ListCodeA.selectedvalue is "" and it's not...I even don't have any blank row in my array that populate my dropdownlists...

Can anyone help me