This is a migrated thread and some comments may be shown as answers.

No data is displayed

4 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Harald
Top achievements
Rank 2
Harald asked on 01 Jul 2020, 02:37 PM

I based the implementation on the example video about TagHelpers. But no data is displayed. A call to the URL (https://localhost:44337/Suppliers/Read) provides data. What am I doing wrong?

SuppliersController:

001.using System;
002.using System.Collections.Generic;
003.using System.Linq;
004.using System.Threading.Tasks;
005.using Kendo.Mvc.Extensions;
006.using Kendo.Mvc.UI;
007.using Microsoft.AspNetCore.Mvc;
008.using Microsoft.AspNetCore.Mvc.Rendering;
009.using Microsoft.EntityFrameworkCore;
010.using VIMANTO.EasyOrder.Data;
011.using VIMANTO.EasyOrder.Models;
012. 
013.namespace VIMANTO.EasyOrder.Controllers
014.{
015.    public class SuppliersController : Controller
016.    {
017.        private readonly ApplicationDbContext _context;
018. 
019.        public SuppliersController(ApplicationDbContext context)
020.        {
021.            _context = context;
022.        }
023. 
024.        [HttpGet]
025.        public ActionResult Read()
026.        {
027.            return Json(_context.Suppliers.Where(s => s.IsDeleted == false).ToList());
028.        }
029. 
030.        // GET: Suppliers
031.        public async Task<IActionResult> Index()
032.        {
033.            return View(await _context.Suppliers.Where(s => s.IsDeleted == false).ToListAsync());
034.        }
035. 
036.        // GET: Suppliers/Details/5
037.        public async Task<IActionResult> Details(int? id)
038.        {
039.            if (id == null)
040.            {
041.                return NotFound();
042.            }
043. 
044.            var supplier = await _context.Suppliers
045.                .FirstOrDefaultAsync(m => m.Id == id);
046.            if (supplier == null)
047.            {
048.                return NotFound();
049.            }
050. 
051.            return View(supplier);
052.        }
053. 
054.        // GET: Suppliers/Create
055.        public IActionResult Create()
056.        {         
057.            return View();
058.        }
059. 
060.        // POST: Suppliers/Create
061.        // To protect from overposting attacks, enable the specific properties you want to bind to, for
062.        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
063.        [HttpPost]
064.        [ValidateAntiForgeryToken]
065.        public async Task<IActionResult> Create([Bind("Id,InternalNumber,Name,AdditionalName,Street,Postcode,City,Phone,Fax,Mail,Web,CustomerNumber")] Supplier supplier)
066.        {
067.            if (ModelState.IsValid)
068.            {
069.                _context.Add(supplier);
070.                await _context.SaveChangesAsync();
071.                return RedirectToAction(nameof(Index));
072.            }
073.            return View(supplier);
074.        }
075. 
076.        // GET: Suppliers/Edit/5
077.        public async Task<IActionResult> Edit(int? id)
078.        {
079.            if (id == null)
080.            {
081.                return NotFound();
082.            }
083. 
084.            var supplier = await _context.Suppliers.FindAsync(id);
085.            if (supplier == null)
086.            {
087.                return NotFound();
088.            }
089.            return View(supplier);
090.        }
091. 
092.        // POST: Suppliers/Edit/5
093.        // To protect from overposting attacks, enable the specific properties you want to bind to, for
094.        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
095.        [HttpPost]
096.        [ValidateAntiForgeryToken]
097.        public async Task<IActionResult> Edit(int id, [Bind("Id,InternalNumber,Name,AdditionalName,Street,Postcode,City,Phone,Fax,Mail,Web,CustomerNumber")] Supplier supplier)
098.        {
099.            if (id != supplier.Id)
100.            {
101.                return NotFound();
102.            }
103. 
104.            if (ModelState.IsValid)
105.            {
106.                try
107.                {
108.                    _context.Update(supplier);
109.                    await _context.SaveChangesAsync();
110.                }
111.                catch (DbUpdateConcurrencyException)
112.                {
113.                    if (!SupplierExists(supplier.Id))
114.                    {
115.                        return NotFound();
116.                    }
117.                    else
118.                    {
119.                        throw;
120.                    }
121.                }
122.                return RedirectToAction(nameof(Index));
123.            }
124.            return View(supplier);
125.        }
126. 
127.        // GET: Suppliers/Delete/5
128.        public async Task<IActionResult> Delete(int? id)
129.        {
130.            if (id == null)
131.            {
132.                return NotFound();
133.            }
134. 
135.            var supplier = await _context.Suppliers
136.                .FirstOrDefaultAsync(m => m.Id == id);
137.            if (supplier == null)
138.            {
139.                return NotFound();
140.            }
141. 
142.            return View(supplier);
143.        }
144. 
145.        // POST: Suppliers/Delete/5
146.        [HttpPost, ActionName("Delete")]
147.        [ValidateAntiForgeryToken]
148.        public async Task<IActionResult> DeleteConfirmed(int id)
149.        {
150.            var supplier = await _context.Suppliers.FindAsync(id);
151.            supplier.IsDeleted = true;
152.            await _context.SaveChangesAsync();
153.            return RedirectToAction(nameof(Index));
154.        }
155. 
156.        private bool SupplierExists(int id)
157.        {
158.            return _context.Suppliers.Any(e => e.Id == id);
159.        }
160.    }
161.}

 

Index.chtml:

01.@{
02.    ViewData["Title"] = "Lieferanten";
03.    Layout = "~/Views/Shared/_Layout.cshtml";
04.}
05. 
06.<div class="row">
07.    <div class="col-xs-12">
08.        <h3 class="k-text-info">Lieferanten verwalten</h3>
09.        <partial name="_SuppliersGrid" />
10.    </div>
11.</div>

 

_SuppliersGrid:

01.<kendo-grid name="SuppliersGrid" height="550" auto-bind="false">
02.    <columns>
03.        <column field="Name" title="Lieferant" />
04.        <column field="AdditionalName" title="Zusatz" min-screen-width="768" />
05.            <column field="Street" title="Strasse" />
06.            <column field="Postcode" min-screen-width="768">
07.                <filterable multi="true"></filterable>
08.            </column>
09.            <column field="City" title="Ort" />
10.    </columns>
11. 
12.    <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
13.        <schema>
14.                <model>
15.                    <fields>
16.                        <field name="Id" type="number"></field>
17.                    </fields>
18.                </model>
19.            </schema>
20.        <transport>
21.            <read url="@Url.Action("Read", "Suppliers")" />
22.        </transport>
23.        <sorts>
24.                <sort field="Name" direction="asc" />
25.            </sorts>
26.    </datasource>
27.    <groupable enabled="true" />
28.        <sortable enabled="true" />
29.    <pageable button-count="5" refresh="true" />
30.    <filterable enabled="true" />
31.</kendo-grid>

4 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 06 Jul 2020, 11:31 AM

Hi Harald,

I have investigated the provided code snippets and I have noticed that a plain collection of data is returned to the client-side. Whenever the Kendo UI Grid is configured to use an AJAX data source, it is needed to return a DataSourceResult object that contains the data and the total count of items. 

The following example demonstrates what collection has to be returned:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

In case the issue persists, let me know.

 

Kind regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Harald
Top achievements
Rank 2
answered on 12 Jul 2020, 12:31 PM

I changed the controller.

01.public ActionResult ReadActiveSuppliers([DataSourceRequest] DataSourceRequest request)
02.        {
03.            using (_context)
04.            {
05.                IEnumerable<Supplier> suppliers = _context.Suppliers.Where(s => s.IsDeleted == false);
06.                DataSourceResult result = suppliers.ToDataSourceResult(request);
07.                return Json(result);
08.            }
09.        }

 

Unfortunately there are still no data displayed. If I call the URL with Postman, I get the data. See screenshot.

 

0
Accepted
Tsvetomir
Telerik team
answered on 14 Jul 2020, 03:37 PM

Hi Harald,

Thank you for sharing the response from the server performed with Postman. Indeed, I have noticed that the properties are spelled with Camel-case whereas the grid expects them to be spelled with Pascal-case.

In order to configure the serialization options of the application, follow the instructions from the article below:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

Regards,
Tsvetomir
Progress Telerik

0
Harald
Top achievements
Rank 2
answered on 27 Jul 2020, 06:40 PM
Great. Now the data is displayed. Thank you very much.
Tags
Grid
Asked by
Harald
Top achievements
Rank 2
Answers by
Tsvetomir
Telerik team
Harald
Top achievements
Rank 2
Share this question
or