New to Kendo UI for jQuery? Start a free 30-day trial

Animation

configuration

Configures the opening and closing animations of the suggestion popup. Setting the animation option to false will disable the opening and closing animations. As a result the suggestion popup will open and close instantly.

animation

Object

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
    animation: false,
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Apples", value: "1" },
        { text: "Oranges", value: "2" }
    ],
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
</script>

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
    animation: {
        close: {
            effects: "fadeOut zoom:out",
            duration: 300
        },
        open: {
            effects: "fadeIn zoom:in",
            duration: 300
        }
    },
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Apples", value: "1" },
        { text: "Oranges", value: "2" }
    ],
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
</script>

animation.close

Object

The animation played when the suggestion popup is closed. Configures the closing animation effects, duration, and other animation-related settings. By default, the popup closes with a simple fade-out effect. You can customize this behavior by specifying different effects and duration values.

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  },
  dataTextField: "text",
  dataValueField: "value",
  dataSource: [
      { text: "Apples", value: "1" },
      { text: "Oranges", value: "2" }
  ],
  columns: [
      { field: "text", title: "Text" },
      { field: "value", title: "Value" }
  ]
});
</script>

animation.open

Object

The animation played when the suggestion popup is opened.

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  },
  dataTextField: "text",
  dataValueField: "value",
  dataSource: [
      { text: "Apples", value: "1" },
      { text: "Oranges", value: "2" }
  ],
  columns: [
      { field: "text", title: "Text" },
      { field: "value", title: "Value" }
  ]
});
</script>

Animation

animation

animation.close

animation.open

Related Members