Selection

<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: '../../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: '../../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: '../../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>