How do I make the multi select default to the first value if there is only one when the datasource is filtered

4 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 20 Apr Link to this post

    How do I make the multi select default to the first value if there is only one row in the datasource view when the datasource is filtered

     

    In angular i have tried many things, last thing I tried was a watch.   Here is code that is not working where ddlRegion is my angular multiselect

     

        $scope.$watch("dsRegions.view().length",
                     function handledsRegionsChange(newValue, oldValue) {
                         values = [];

                         if (($scope.dsRegions.view().length == 1) && ($scope.selectedRegion == null)) {
                             values[0] = $scope.dsRegions.view()[0].RegionId.toString()
                             $scope.selectedRegion = $scope.dsRegions.view()[0].RegionId;
                             $scope.ddlRegion.value(values);
                         }
                     }
                 );

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 22 Apr Link to this post

    Hello Patrick,

    My suggestion is to use the dataBound event of the Kendo UI MultiSelect widget. Please refer to the http://dojo.telerik.com/UhAsU example that shows this approach in action. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 23 Apr in reply to Boyan Dimitrov Link to this post

     

    Thanks Boyan, I am not able to figure this out from the sample.  I tried to update the sample to display items 4 and 7 when there are 77 products but the code does not seem to work.  An alert is fired so the 77 matches but the setting the scope variable is not appearing to take in the data bound event.  Do you have any suggestions?  In my case i want to select the first record if there is only one record.

    My attempt at following your suggestion is below.

     

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example" ng-app="KendoDemos">
        <div class="demo-section k-content" ng-controller="MyCtrl">
            <h4>Select product</h4>
            <select kendo-multi-select="multiSelect" k-options="selectOptions" k-ng-model="selectedIds"></select>
            <p ng-show="selectedIds.length" style="padding-top: 1em;">Selected: {{ selectedIds }}</p>
        </div>
    </div>
       
      
     
    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.selectOptions = {
                placeholder: "Select products...",
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                valuePrimitive: true,
                autoBind: false,
              dataBound: function(e) {
          console.log(this.dataSource.view().length);
            if (this.dataSource.view().length == 77)
            {
    $scope.selectedIds  = [ 4, 7 ];
            alert('There are 77 products');
            }
      },
                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                        }
                    }
                }
            };
            //$scope.selectedIds = [ 4, 7 ];
         
         
          })
    </script>
     
     
    </body>
    </html>


  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Apr Link to this post

    Hello Patrick,

    There is an error with because $scope.selectedIds because is not defined (it is undefined) so trying to access the length of undefined throws an error. To avoid initial selection the $scope.selectedIds should be defined as empty array. I modified the http://dojo.telerik.com/EwAFA  example in order to work with ng-show. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready