#

DevExtreme DropDownBox mit eigenem Seperator statt Komma

 Date 22.09.2021 Views 1.248

DevExtreme DropDownBox mit eigenem Seperator statt Komma

 

 

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

Ein Bild, das Text enthält. Automatisch generierte Beschreibung

 

 

//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

Ein Bild, das Text enthält. Automatisch generierte Beschreibung

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

Mobile

.