@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<script src="~/js/jsDemo.js"></script>

<form>

    @*-------------< Base_Field >-----------------*@

    <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().Button()

                        .ElementAttr("class", "button-info")

                        .Text("A")

                        .OnClick("onClickButtonPopUp")

                    )

                    @(Html.DevExtreme().Button()

                        .ElementAttr("class", "button-info")

                        .Text("B")

                        .OnClick("onClickButtonPopUp")

                        // .OnClick("function(e) { onClick(e, 'submitButton'); }")

                    )

                </div>

            </div>

        </div>

    </div>

    @*-------------</ Base_Field >-----------------*@

    @*-------------< PopUp >-----------------*@

    @(Html.DevExtreme().Popup()

    .ID("popupInput")

    .Height(400)

    .Width(600)

    .Container(".dx-viewport")

    .ShowTitle(true)

    .Title("Input Popup")

    .DragEnabled(false)

    .CloseOnOutsideClick(true)

    .ShowCloseButton(true)

    .ContentTemplate(new TemplateName("popupTemplate"))

    //-< PU_Buttons >

    .ToolbarItems(barItems => {

        barItems.Add()

            .Toolbar(Toolbar.Bottom)

            .Location(ToolbarItemLocation.Before)

            .Widget(widget => widget.Button()

                .Icon("add")

                .Text("Save")

                .OnClick("onClickPopupSave")

                .Type(ButtonType.Success)

                );

        barItems.Add()

            .Toolbar(Toolbar.Bottom)

            .Location(ToolbarItemLocation.Before)

            .Widget(widget => widget.Button()

                .Icon("remove")

                .Text("Abbrechen")

                .OnClick("onClickPopupSave")

                .Type(ButtonType.Success)

                );

    })

    //-</ PU_Buttons >

    )

    @*-------------</ PopUp >-----------------*@

</form>

@*-------------/ Template >-----------------*@

@using (Html.DevExtreme().NamedTemplate("popupTemplate"))

{

    <div>this is my content template</div>

    <div style="width:200px">

        @(Html.DevExtreme().DataGrid()

        .DataSource(d => d.Mvc().Controller("apiDemo").LoadAction("getDropDownData").Key("Id"))

            .Columns(columns =>

            {

                columns.Add().DataField("Id").Visible(false);

                columns.Add().DataField("Product");

            })

            .Selection(s => s.Mode(SelectionMode.Multiple))

            .FocusedRowEnabled(true)

    )

    </div>

}

@*-------------</ Template >-----------------*@

function onClickButtonPopUp(caller) {

    //--------< onClickButtonPopUp() >--------

    //alert("test");

    //< caller >

    //var component = caller.component;

    //var element = caller.element;

    //</ caller >

    //get PopUp from htmlside

    const popup = $("#popupInput").dxPopup("instance");

    popup.show();

    //--------</ onClickButtonPopUp() >--------

}

function onClickPopupSave(caller) {

    //--------< onClickButtonPopUp() >--------

    //alert("test");

    //< caller >

    //var component = caller.component;

    //var element = caller.element;

    //</ caller >

    //get PopUp from htmlside

    const popup = $("#popupInput").dxPopup("instance");

        popup.hide();

    //--------</ onClickButtonPopUp() >--------

}

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("Product", typeof(String));

            DataRow row = dtTable.Rows.Add();

            row["Id"] = "A";

            row["Product"] = "Product A";

            row = dtTable.Rows.Add();

            row["Id"] = "B";

            row["Product"] = "Product B";

            row = dtTable.Rows.Add();

            row["Id"] = "C";

            row["Product"] = "Product C";

            List<DataRow> dataList = dtTable.Select().ToList();

            //----< fill Data_to_View >----

            //---< @Loop: Rows >---

            //----</ fill Data_to_View >----

            return  JsonConvert.SerializeObject(dtTable) ;

            ///-------------</ getDataGrid() >-------------

        }

    }

}