Wie kann man in einer DevExtreme Multiselect Dropdownbox die Elemente mit einem anderen Separator trennen
Im Standard wird in einer DevExtreme Dropdownbox der angezeigte Inhalt mit Komma getrennt:
Test1, Test2, ..Tests |
Wenn man den Separator ändern möchte, dann muss man die Eigenschaft: .DisplayValueFormatter(function..) anpassen
Wie hier im Code Beispiel wird die Function mit einem Array-Return gefüllt. In der Join() steht der neue Separator.
@(Html.DevExtreme().DropDownBox() .ValueExpr("Id") .DisplayExpr("col_1") .DataSource(d => d.Mvc().Controller("apiDemo").LoadAction("getDropDownData").Key("Id") .LoadMode(DataSourceLoadMode.Raw) )
.Placeholder("Select..") .ShowClearButton(true) .ContentTemplate(new TemplateName("dropBox_Template")) .DisplayValueFormatter("function(value) { return Array.isArray(value) ? value.join('|') : value; }") ) |
Neues Ergebnis:
Test1|Test2|..Tests |
Demo.cs
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/js/jsDemo.js"></script> <form> @*-------------< MultiSelect >-----------------*@ <div id="divMultiSelect">
<div class="" style="width:400px;margin-left:20px"> <div class="dx-field"> <div class="dx-field-label">DropDown Test</div> <div class="dx-field-value"> @(Html.DevExtreme().DropDownBox()
//.Value(new[] {"B" }) .ValueExpr("Id") .DisplayExpr("col_1") .DataSource(d => d.Mvc().Controller("apiDemo").LoadAction("getDropDownData").Key("Id") .LoadMode(DataSourceLoadMode.Raw) )
.Placeholder("Select..") .ShowClearButton(true) .ContentTemplate(new TemplateName("dropBox_Template")) .DisplayValueFormatter("function(value) { return Array.isArray(value) ? value.join('|') : value; }") ) </div> </div> </div>
@using (Html.DevExtreme().NamedTemplate("dropBox_Template")) { @(Html.DevExtreme().DataGrid() .ID("templateID") .DataSource(d => d.Mvc().Controller("apiDemo").LoadAction("getDropDownData").Key("Id")) .Columns(columns => { columns.Add().DataField("Id").Visible(false); columns.Add().DataField("col_1"); }) .Selection(s => s.Mode(SelectionMode.Multiple)) .FocusedRowEnabled(true) .SelectedRowKeys(new JS(@"component.option(""value"")")) .OnSelectionChanged("function(selectedItems) { onSelectionChanged(selectedItems, component) }") ) } </div> @*-------------</ MultiSelect >-----------------*@
</form>
|
jsDemo.js Script
//value in dropbox changed function onSelectionChanged(selectedItems, component) { //--------< onSelectionChanged() >-------- try { var keys = selectedItems.selectedRowKeys; component.option('value', keys); } catch (err) { alert(err); } //--------</ onSelectionChanged() >-------- } |
Beispiel Daten Code
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using DevXCore.Models; using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevXCore.Models.DBContext; using MvcContrib.UI.DataList; using System.Data; using Newtonsoft.Json;
namespace DevXCore.Controllers.Api {
[Route("api/[controller]")] [ApiController] public class apiDemoController : ControllerBase { #region Controller Init private readonly ApplicationDbContext _dbContext; public apiDemoController(ApplicationDbContext dbContext) { //----< Init: Controller >---- _dbContext = dbContext; //----</ Init: Controller >---- } #endregion
[HttpGet("getDropDownData")] public object getDropDownData(DataSourceLoadOptions loadOptions, string filterGridParameters) { ///-------------< getDataGrid() >-------------
//--< Get Linq.Query >-- DataTable dtTable = new DataTable(); // view.ToTable(false,< string array = "" >); dtTable.Columns.Add("Id", typeof(String)); dtTable.Columns.Add("col_1", typeof(String));
DataRow row = dtTable.Rows.Add(); row["Id"] = "A"; row["col_1"] = "Test1";
row = dtTable.Rows.Add(); row["Id"] = "B"; row["col_1"] = "Test2";
row = dtTable.Rows.Add(); row["Id"] = "C"; row["col_1"] = "..Tests";
List<DataRow> dataList = dtTable.Select().ToList(); //----< fill Data_to_View >---- //---< @Loop: Rows >---
//----</ fill Data_to_View >---- return JsonConvert.SerializeObject(dtTable) ; ///-------------</ getDataGrid() >------------- }
} }
|
DevExtreme
Devexpress DataGrid in Asp.Net MVC, Core