title: Get items from a DevExpress ListBox using JavaScript
body: <p>Im creating two DevExpress ListBox to set a relation between products and clients.
  See <a href="https://demos.devexpress.com/aspxeditorsdemos/ListEditors/MovingItems.aspx" rel="nofollow noreferrer">Moving Items between List Boxes</a></p>
  
  <p>So:
  My Controller C#</p>
  
  <pre><code>public ActionResult ReglaCreate()
      {
          if (Authentication.User.Identity.IsAuthenticated)
          {
              Service service= new Service();
              var articulos = service.GetArt();
              var locales = service.GetLoc();
              Session["Articulos"] = articulos;
              Session["Locales"] = locales;
              return View();
          }
          else
              return RedirectToAction("Login", "Account");
      }
  </code></pre>
  
  <p>DevExpress ListGrid</p>
  
  <pre><code>        &lt;div class="wrapper wrapper-content animated fadeInRight" id="ReglaCreateController" ng-controller="ReglaController"&gt;
  &lt;div class="row"&gt;
      &lt;div class="ibox-content"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;div class="form-group" style="width:50%"&gt;
                  &lt;label class="col-lg-2 control-label" style="float:left"&gt;Nombre&lt;/label&gt;
                  &lt;textarea style="font-size:15px;text-align:left;width:350px;height:40px;margin-left:15px;" class="control-label" id="lblNombreRegla"&gt;{{lblNombreRegla}}&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;br /&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-4" style="width:17.5%"&gt;
                  &lt;span style="float:right"&gt;&lt;label class="col-lg-2 control-label" style="width:180px"&gt;Locales disponibles&lt;/label&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style="padding-left: 495px"&gt;
                  &lt;span style="float:left"&gt;&lt;label class="col-lg-2 control-label" style="width:180px"&gt;Locales elegídos&lt;/label&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;table style="height"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DevExpress().ListBox(settings =&gt;
     {
         settings.Name = "lbAvailableLocales";
         settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
  
         var locales = (List&lt;LocalViewModel&gt;)Session["Locales"];
  
         foreach (var local in locales)
         {
             settings.Properties.Items.Add(local.Nombre, local.ID);
         }
         settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { UpdateButtonStateLocales(); }";
         settings.Properties.EnableClientSideAPI = true;
         settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
         settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
     }).GetHtml()
                  &lt;/td&gt;
                  &lt;td style="padding: 60px"&gt;
                      &lt;div class="form-horizontal"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveSelectedItemsToRightLocales";
                             settings.Text = "Agregar &gt;";
                             settings.ClientSideEvents.Click = "function(s, e) { AddSelectedItemsLocales();  }";
                         }).GetHtml()
                              &lt;/div&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveAllItemsToRightLocales";
                             settings.Text = "Agregar todos &gt;&gt;";
                             settings.ClientSideEvents.Click = "function(s, e) { AddAllItemsLocales(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveSelectedItemsToLeftLocales";
                             settings.Text = "&lt; Eliminar";
                             settings.ClientSideEvents.Click = "function(s, e) { RemoveSelectedItemsLocales(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveAllItemsToLeftLocales";
                             settings.Text = "&lt;&lt; Eliminar todos";
                             settings.ClientSideEvents.Click = "function(s, e) { RemoveAllItemsLocales(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DevExpress().ListBox(settings =&gt;
             {                   
                 settings.Name = "lblChoosenLocales";
                 settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
                 settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s,e) { UpdateButtonStateLocales(); }";
                 settings.Properties.EnableClientSideAPI = true;
                 settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
                 settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
             }).GetHtml()
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;br /&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-4" style="width:17.5%"&gt;
                  &lt;span style="float:right"&gt;&lt;label class="col-lg-2 control-label" style="width:180px"&gt;Artículos disponibles&lt;/label&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style="padding-left: 495px"&gt;
                  &lt;span style="float:left"&gt;&lt;label class="col-lg-2 control-label" style="width:180px"&gt;Artículos elegídos&lt;/label&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DevExpress().ListBox(settings =&gt;
     {
         settings.Name = "lbAvailable";
         settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
  
         var articulos = (List&lt;ArticuloViewModel&gt;)Session["Articulos"];
  
         foreach (var articulo in articulos)
         {
             settings.Properties.Items.Add(articulo.Nombre, articulo.ID);
         }
         settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { UpdateButtonState(); }";
         settings.Properties.EnableClientSideAPI = true;
         settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
         settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
     }).GetHtml()
                  &lt;/td&gt;
                  &lt;td style="padding: 60px"&gt;
                      &lt;div class="form-horizontal"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveSelectedItemsToRight";
                             settings.Text = "Agregar &gt;";
                             settings.ClientSideEvents.Click = "function(s, e) { AddSelectedItems();  }";
                         }).GetHtml()
                              &lt;/div&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveAllItemsToRight";
                             settings.Text = "Agregar todos &gt;&gt;";
                             settings.ClientSideEvents.Click = "function(s, e) { AddAllItems(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveSelectedItemsToLeft";
                             settings.Text = "&lt; Eliminar";
                             settings.ClientSideEvents.Click = "function(s, e) { RemoveSelectedItems(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                              &lt;div class="col-md-4"&gt;
                                  @Html.DevExpress().Button(settings =&gt;
                         {
                             settings.Name = "btnMoveAllItemsToLeft";
                             settings.Text = "&lt;&lt; Eliminar todos";
                             settings.ClientSideEvents.Click = "function(s, e) { RemoveAllItems(); }";
                         }).GetHtml()
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DevExpress().ListBox(settings =&gt;
             {
                 settings.Name = "lblChoosen";
                 settings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
                 settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s,e) { UpdateButtonState(); }";
                 settings.Properties.EnableClientSideAPI = true;
                 settings.Width = System.Web.UI.WebControls.Unit.Pixel(350);
                 settings.Height = System.Web.UI.WebControls.Unit.Pixel(200);
             }).GetHtml()
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      @*&lt;br /&gt;*@
      &lt;div style="float:right"&gt;
          &lt;input class="btn btn-sm btn-primary" type="submit" name="btnGuardar" id="btnGuardar" value="Crear" ng-click="Guardar()" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My controllers JS: </p>
  
  <pre><code>$scope.Guardar = function () {
      if (confirm('¿Está seguro de guardar los datos?')) {
          $("#btnGuardar").prop('disabled', 'disabled');
          $scope.MostrarMensajeOk = false;
          $scope.MostrarMensajeError = false;
  
          var nombreRegla = $("#lblNombreRegla").val();
          var localesEnGrilla = $("#lblChoosenLocales").val();
          var articulosEnGrilla = $("#lblChoosen").val();
  
          //some code here
  
          $http({
              method: 'POST',
              url: baseURL + 'Configuracion/CrearRegla/?Nombre=' + nombreRegla + "&amp;Locales="+ localesEnGrilla + "&amp;Articulos="+ articulosEnGrilla,
          }).success(function (result) {
              if (result != null) {
                  $("#btnGuardar").prop('disabled', '');
                  $scope.MostrarMensajeOk = false;
                  $scope.MostrarMensajeError = false;
  
                  $scope.volver();
              }
          }).error(function (data, status, headers, config) {
              $("#btnGuardar").prop('disabled', '');
              alert(data);
              $scope.MostrarMensajeOk = false;
              $scope.MostrarGrilla = false;
              $('html, body').animate({ scrollTop: 0 }, 'slow');
          });
      };
  };
  </code></pre>
  
  <p>What i need its get all selected items from both list, to save in my database and then work it. What can i do? Is this posible? I've trying a lot of solutions but nothing works. </p>