Your search did not match any results.

Selection

This demo processes tab selection and uses SelectBox and MultiView components to emulate page content. Both these components are bound to Tabs, and vice versa.

Backend API
<div id="center-content"> <div id="demo-items-container"> <div class="content dx-fieldset"> <div class="dx-field"> <div class="tabs-container"> @(Html.DevExtreme().Tabs() .ID("tabs") .OnInitialized("onTabsInitialized") .DataSource(new JS("employees")) .SelectedItem(new JS("employees[0]")) .OnSelectionChanged("selectionChanged") ) </div> </div> <div class="dx-field select-box-container"> <div class="dx-field-label">Selected user:</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .ID("select") .OnInitialized("onSelectBoxInitialized") .DataSource(new JS("employees")) .OnSelectionChanged("selectionChanged") .InputAttr("aria-label", "Select Employee") .Value(new JS("employees[0]")) .DisplayExpr("text") ) </div> </div> <div class="dx-field multiview-container"> @(Html.DevExtreme().MultiView() .ID("multiview") .OnInitialized("onMultiviewInitialized") .OnSelectionChanged("selectionChanged") .SelectedItem(new JS("employees[0]")) .Height(112) .DataSource(new JS("employees")) .Loop(false) .AnimationEnabled(true) .ItemTemplate(@<text> <div class="employee-info"> <img src="<%- picture %>" alt="<%- text %>" class="employee-photo" /> <p class="employee-notes"> <b>Position: <%- position %></b><br /> <%- notes %> </p> </div> </text>) ) </div> <div class="icon-container"> <span class="dx-icon dx-icon-info"></span> <span class="demo-info">You can use swipe gestures in this area.</span> </div> </div> </div> </div> <script> let multiview; let selectBox; let tabs; function onMultiviewInitialized(e) { multiview = e.component; } function onSelectBoxInitialized(e) { selectBox = e.component; } function onTabsInitialized(e) { tabs = e.component; } function setSelection(value) { if (tabs) { tabs.option('selectedItem', value); } if (selectBox) { selectBox.option('value', value); } if (multiview) { multiview.option('selectedItem', value); } } function selectionChanged(e) { if (e.selectedItem || e.addedItems?.length) { setSelection(e.selectedItem || e.addedItems[0]) } } const employees = [ { id: 0, icon: 'user', text: 'John Heart', position: 'CEO', picture: '../../Content/Images/employees/01.png', notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', }, { id: 1, icon: 'user', text: 'Olivia Peyton', position: 'Sales Assistant', picture: '../../Content/Images/employees/09.png', notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.', }, { id: 2, icon: 'user', text: 'Robert Reagan', position: 'CMO', picture: '../../Content/Images/employees/03.png', notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.', }, ]; </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TabsController : Controller { public ActionResult Selection() { return View(); } } }
#center-content { display: flex; align-items: center; justify-content: center; } .select-box-container, .multiview-container { padding: 16px; } #demo-items-container { width: 680px; } .employee-info { display: flex; align-items: center; } .employee-photo { height: 80px; width: 80px; border-radius: 50%; border: 1px solid #ebebeb; flex-shrink: 0; object-fit: contain; margin-right: 24px; border-color: var(--dx-color-border); } .employee-notes b { display: inline-block; margin-bottom: 8px; } .dx-field-label { font-size: 16px; } #multiview { cursor: move; } .demo-info { padding-left: 8px; opacity: 0.6; } .icon-container { padding-left: 16px; display: flex; align-items: center; } .dx-icon { font-size: 18px; }

You can use the following properties to configure selection: