Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

DevExtreme DropDownBox mit eigenem Seperator statt Komma

22.09.2021 (👁15871)


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