Code Beispiel: Laden eines Popups mit DevExtreme mit einem DataGrid
Multiple Selection , Web , Asp.Net Core MVW
@{ 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 >-----------------*@ |
Javascript Datei
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() >-------- } |
Api Controller
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() >------------- }
} }
|