Merge pull request #1 from czernous-devexpress/add_dropDownOptions_DDB

update code snippets

Author: czernous-devexpress

angular/src/app/app.component.html

@@ -6,5 +6,6 @@
     displayExpr="text"
     (onItemClick)="logAction($event)"
     [splitButton]="true"
-    (onButtonClick)="logButtonClick()">
-</dx-drop-down-button>
+    (onButtonClick)="logButtonClick()"
+    [dropDownOptions]="dropDownOptions">
+</dx-drop-down-button>

angular/src/app/app.component.ts

@@ -6,18 +6,21 @@ import { Component } from '@angular/core';
     styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    actions: Array<{id: Number, text: String, icon: String}> = [
-        { id: 1, text: "My profile", icon: "user" },
-        { id: 2, text: "Messages", icon: "email" },
-        { id: 3, text: "Contacts", icon: "group" },
-        { id: 4, text: "Log out", icon: "runner" }
+    actions: Array<{ id: Number; text: String; icon: String }> = [
+        { id: 1, text: 'My profile', icon: 'user' },
+        { id: 2, text: 'Messages', icon: 'email' },
+        { id: 3, text: 'Contacts', icon: 'group' },
+        { id: 4, text: 'Log out', icon: 'runner' }
     ];
+    dropDownOptions = {
+        height: 150
+    };
 
     logAction(e) {
-        console.log(e.itemData.text + " was clicked");
+        console.log(e.itemData.text + ' was clicked');
     }
 
     logButtonClick() {
-        console.log("Main button was clicked");
+        console.log('Main button was clicked');
     }
 }

jquery/index.js

@@ -1,23 +1,26 @@
 const actions = [
-    { id: 1, text: "My profile", icon: "user" },
-    { id: 2, text: "Messages", icon: "email" },
-    { id: 3, text: "Contacts", icon: "group" },
-    { id: 4, text: "Log out", icon: "runner" }
+    { id: 1, text: 'My profile', icon: 'user' },
+    { id: 2, text: 'Messages', icon: 'email' },
+    { id: 3, text: 'Contacts', icon: 'group' },
+    { id: 4, text: 'Log out', icon: 'runner' }
 ];
 
-$(function() {
-    $("#myDropDownButton").dxDropDownButton({
-        text: "Sandra Johnson",
-        icon: "user",
-        displayExpr: "text",
+$(function () {
+    $('#myDropDownButton').dxDropDownButton({
+        text: 'Sandra Johnson',
+        icon: 'user',
+        displayExpr: 'text',
         items: actions,
-        keyExpr: "id",
-        onItemClick: function(e) {
-            console.log(e.itemData.text + " was clicked");
+        keyExpr: 'id',
+        onItemClick: function (e) {
+            console.log(e.itemData.text + ' was clicked');
         },
         splitButton: true,
-        onButtonClick: function() {
-            console.log("Main button was clicked");
+        onButtonClick: function () {
+            console.log('Main button was clicked');
+        },
+        dropDownOptions: {
+            height: 150
         }
     });
-});
+});

react/src/App.js

@@ -6,19 +6,21 @@ import 'devextreme/dist/css/dx.light.css';
 import DropDownButton from 'devextreme-react/drop-down-button';
 
 const actions = [
-    { id: 1, text: "My profile", icon: "user" },
-    { id: 2, text: "Messages", icon: "email" },
-    { id: 3, text: "Contacts", icon: "group" },
-    { id: 4, text: "Log out", icon: "runner" }
+    { id: 1, text: 'My profile', icon: 'user' },
+    { id: 2, text: 'Messages', icon: 'email' },
+    { id: 3, text: 'Contacts', icon: 'group' },
+    { id: 4, text: 'Log out', icon: 'runner' }
 ];
-
+const dropDownOptions = {
+    height: 150
+};
 class App extends React.Component {
     logAction(e) {
-        console.log(e.itemData.text + " was clicked");
+        console.log(e.itemData.text + ' was clicked');
     }
 
     logButtonClick() {
-        console.log("Main button was clicked");
+        console.log('Main button was clicked');
     }
 
     render() {
@@ -32,8 +34,9 @@ class App extends React.Component {
                 onItemClick={this.logAction}
                 splitButton={true}
                 onButtonClick={this.logButtonClick}
+                dropDownOptions={dropDownOptions}
             />
         );
     }
 }
-export default App;
+export default App;

vue/src/App.vue

@@ -8,17 +8,18 @@
         @item-click="logAction"
         :split-button="true"
         @button-click="logButtonClick"
+        :drop-down-options="dropDownOptions"
     />
 </template>
 
 <script>
 import DxDropDownButton from 'devextreme-vue/drop-down-button';
 
 const actions = [
-    { id: 1, text: "My profile", icon: "user" },
-    { id: 2, text: "Messages", icon: "email" },
-    { id: 3, text: "Contacts", icon: "group" },
-    { id: 4, text: "Log out", icon: "runner" }
+    { id: 1, text: 'My profile', icon: 'user' },
+    { id: 2, text: 'Messages', icon: 'email' },
+    { id: 3, text: 'Contacts', icon: 'group' },
+    { id: 4, text: 'Log out', icon: 'runner' }
 ];
 
 export default {
@@ -27,16 +28,19 @@ export default {
     },
     data() {
         return {
-            actions
-        }
+            actions,
+            dropDownOptions: {
+                height: 150
+            }
+        };
     },
     methods: {
         logAction(e) {
-            console.log(e.itemData.text + " was clicked");
+            console.log(e.itemData.text + ' was clicked');
         },
         logButtonClick() {
-            console.log("Main button was clicked");
+            console.log('Main button was clicked');
         }
     }
-}
-</script>
+};
+</script>