DevExtreme Datagrid: Daten einer Spalte auslesen
Aufgabe:
Wie kann man die Zellen, Daten eines DevExtreme DataGrid zur Laufzeit in
javascript auslesen
Lösung:
1) DataGrid mit jquery ermitteln
2) Funktion getVisibleRows() ermittelt die gezeigten Zeilen
3) row[RowNumber] gibt die Daten der Zeile zurück
//get Devextreme.Datagrid let dataGrid = $("#gridDataTable").dxDataGrid("instance"); //let cols = dataGrid.getVisibleColumns();
//--< @Loop: Rows >-- var sKeys = ""; let rows = dataGrid.getVisibleRows(); for (var iRow = 0; iRow < rows.length; iRow++) { //< row > let row = rows[iRow]; sKeys = sKeys + ";" + row["key"]; //</ row > } //--</ @Loop: Rows >--
//< correct > if (sKeys.startsWith(";")) { sKeys = sKeys.substring(1) }; //</ correct >
alert(sKeys);
|
Javascript Code, Laufzeit auswertung des DevExtrem DataGrid
//*==== Script for Devextreme Grid *======
function onButtonSave() { //--------< onButtonSave() >----------
//get Devextreme.Datagrid let dataGrid = $("#gridDataTable").dxDataGrid("instance"); //let cols = dataGrid.getVisibleColumns();
//--< @Loop: Rows >-- var sKeys = ""; let rows = dataGrid.getVisibleRows(); for (var iRow = 0; iRow < rows.length; iRow++) { //< row > let row = rows[iRow]; sKeys = sKeys + ";" + row["key"]; //</ row > } //--</ @Loop: Rows >--
//< correct > if (sKeys.startsWith(";")) { sKeys = sKeys.substring(1) }; //</ correct >
alert(sKeys); //--------</ onButtonSave() >---------- }
function demo_customizeColumns(columns) { //------< customizeColumns() GridColumns anpassen >-------- //*Spalten anpassen nach dem Laden if (columns.length > 0) {
//----< @Loop: Columns >---- for (iCol = 0; iCol < columns.length; iCol++) { var col = columns[iCol]; if (col.dataField.includes("col_")) //col_1 { //-----< Columns >----- col.alignment = "right"; col.dataType = "string"; //todo: number //-----</ Columns >----- } } //----</ @Loop: Columns >----
} //------</ customizeColumns() GridColumns anpassen >-------- }
function onEditorPreparing(editorelement) { //------< onEditorPreparing() >-------- //1.event on edit, called for each cell //*editorName="dxNumberBox" var dataField = editorelement.dataField; if (dataField != null) { if (dataField.includes("col_")) {
} }
} //------</ onEditorPreparing() >-------- //*====/ Script for Devextreme Grid *======
|
DevExtreme Asp View (Webseite)
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@*format Grid in javascript file *@ <script src="~/js/jsDemo.js"></script>
<form>
<div style="margin:10px"> <button onclick="onButtonSave()">Save</button> <input id="inputSetValues" type="text" value="123" style="background-color:aquamarine"/> </div>
@*-------------< Grid >-----------------*@ <div id="divGrid" style="width:80%"> @(Html.DevExtreme().DataGrid() .ID("gridDataTable") .DataSource(d => d.Mvc().Controller("apiDemo").Key("IDKey") .LoadAction("getGridData") .UpdateAction("UpdateGridCell") ) .Editing(e => e.AllowAdding(false) .AllowDeleting(false) .AllowUpdating(true) .Mode(GridEditMode.Cell).UseIcons(true) )
.CustomizeColumns("demo_customizeColumns") //define columns format .OnEditorPreparing("onEditorPreparing") .AllowColumnResizing(true) ) </div> @*-------------</ Grid >-----------------*@
@*===========< Script >==========*@ <script> DevExpress.localization.locale("de"); </script> @*===========</ Script >==========*@
</form>
|
DevExtreme Datagrid API
Web API zur Anzeige der Grid Daten und zum Aktualisieren von Werte
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("getGridData")] public object getGridData(DataSourceLoadOptions loadOptions, string filterGridParameters) { ///-------------< getDataGrid() >------------- if (filterGridParameters != null) { var orgaIdList = filterGridParameters.Split(","); //.Select(Int32.Parse).ToList(); Console.Write(orgaIdList); }
//--< Get Linq.Query >-- //DataView view = new DataView(); DataTable dtTable = new DataTable(); // view.ToTable(false,< string array = "" >); dtTable.Columns.Add("IDKey", typeof(String)); dtTable.Columns.Add("description", typeof(String)); dtTable.Columns.Add("col_1", typeof(String)); //Double dtTable.Columns.Add("col_2", typeof(String)); //Double dtTable.Columns.Add("col_3", typeof(String)); //Double
DataRow row = dtTable.Rows.Add(); row["IDKey"] = "A"; row["description"] = "format 0->0 2.12->2,12 3.123->3,12"; row["col_1"] = 0; row["col_2"] = 2.12; row["col_3"] = 3.123;
row = dtTable.Rows.Add(); row["IDKey"] = "B"; row["description"] = "format 0->0 2.12->2,12 3.123->3,12"; row["col_1"] = 0; row["col_2"] = 2.12; row["col_3"] = 3.123;
row = dtTable.Rows.Add(); row["IDKey"] = "C"; row["col_1"] = 123456; row["col_2"] = 333333.789; row["col_3"] = 555555.12345;
List<DataRow> dataList = dtTable.Select().ToList(); //----< fill Data_to_View >---- //---< @Loop: Rows >---
//----</ fill Data_to_View >---- return JsonConvert.SerializeObject(dtTable) ; ///-------------</ getDataGrid() >------------- }
[HttpPut("UpdateGridCell")] public ActionResult UpdateGridCell([FromForm] Dictionary<string,string> cell) { //-------------< UpdateGridRow() >------------- var sKey = cell["key"]; //ID=A var sCell_Column_Value = cell["values"]; //{"..":".."}
sCell_Column_Value = sCell_Column_Value.Substring(1,sCell_Column_Value.Length-2); //"..":".." string[] arrCell_Column_Value = sCell_Column_Value.Split(':');
string sColumn_Name = arrCell_Column_Value[0]; //"col_1" string sCell_Value = arrCell_Column_Value[1]; //"123,45"
return Ok(); //-------------</ UpdateGridRow() >------------- }
} } |
Javascript Debugger in der rows Auflistung
Name |
Wert |
Typ |
|
◢ |
rows[0] |
Object {rowType: "data", data: Object, key: "A", …} |
Object |
Name |
Wert |
Typ |
|
◢ |
rows[0] |
Object {rowType: "data", data: Object, key: "A", …} |
Object |
▶ [[Prototype]] |
Object |
Object |
|
▶ cells |
Array(5) [Object, Object, Object, …] |
Object |
|
◢ data |
Object {IDKey: "A", description: "format 0->0 2.12->2,12 3.123->3,12", col_1: "0", …} |
Object |
|
▶ [[Prototype]] |
Object |
Object |
|
col_1 |
"0" |
string |
|
col_2 |
"2,12" |
string |
|
col_3 |
"3,123" |
string |
|
description |
"format 0->0 2.12->2,12 3.123->3,12" |
string |
|
IDKey |
"A" |
string |
|
▶ __proto__ |
Object |
Object |
|
dataIndex |
0 |
number |
|
isEditing |
false |
boolean |
|
isExpanded |
false |
boolean |
|
isSelected |
false |
boolean |
|
key |
"A" |
string |
|
rowIndex |
0 |
number |
|
rowType |
"data" |
string |
|
▶ values |
Array(5) ["A", "format 0->0 2.12->2,12 3.123->3,12", "0", …] |
Object |
Devexpress UI, Asp.Core, Asp.Net MVC