Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

Task:
How to read the cells, data of a DevExtreme DataGrid at runtime in javascript

 

Solution:
1) Discover DataGrid with jquery

2) Function getVisibleRows() determines the lines shown

3) row[RowNumber] returns the data of the row

 

 

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

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de