Почему моя Kendo React Grid не отображает мои данные? - PullRequest
Новая
       16

Почему моя Kendo React Grid не отображает мои данные?

0 голосов
/ 03 апреля 2019

У меня возникли проблемы с отображением моих данных в KendoUI React Grid. Мое приложение - это ASP.NET Core React с Redux и KendoUI для React. Я следовал за собственной документацией Telerik и вообще не получаю ошибок из своего кода.

Я также вижу данные, возвращаемые контроллером в сетевом мониторе консоли, но сетка просто говорит, что есть no records available. Может кто-нибудь помочь мне понять, где я ошибся?

Вот мой код:

ClientApp / SRC / компоненты / приспособления / withState.js 

import React from 'react';
import { toDataSourceRequestString, translateDataSourceResultGroups } from '@progress/kendo-data-query';

export function withState(WrappedGrid) {
    return class StatefullGrid extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                dataState: { skip: 0, take: 100 }
            };
        }

        render() {
            return (
                <WrappedGrid
                    filterable={true}
                    sortable={true}
                    pageable={{ pageSizes: true }}
                    {...this.props}
                    total={this.state.total}
                    data={this.state.data}
                    skip={this.state.dataState.skip}
                    pageSize={this.state.dataState.take}
                    filter={this.state.dataState.filter}
                    sort={this.state.dataState.sort}
                    onDataStateChange={this.handleDataStateChange}
                />
            );
        }
        componentDidMount() {
            this.fetchData(this.state.dataState);
        }
        handleDataStateChange = (changeEvent) => {
            this.setState({ dataState: changeEvent.data });
            this.fetchData(changeEvent.data);
        }
        fetchData(dataState) {
            const queryStr = `${toDataSourceRequestString(dataState)}`;
            const hasGroups = dataState.group && dataState.group.length;
            const base_url = 'api/VesselData/GetGridVessels';
            const init = {
                method: 'GET', accept: 'application/json', headers: {}
            };

            fetch(`${base_url}?${queryStr}`, init)
                .then(response => response.json())
                .then(({ data, total }) => {
                    this.setState({
                        data: hasGroups ? translateDataSourceResultGroups(data) : data,
                        total,
                        dataState
                    });
                });
        }
    }
}

Я проверил base_url в браузере, и он возвращает данные без проблем вообще.

ClientApp / SRC / просмотров / Fixtures.js 

import * as React from 'react';
import { GridColumn, Grid } from '@progress/kendo-react-grid';
import { withState } from '../components/fixtures/withState';

const StatefullGrid = withState(Grid);

class Fixtures extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h3>Fixtures</h3>
                <StatefullGrid>
                    <GridColumn field="Name" title="Name" />                        
                </StatefullGrid>
            </div>
        );
    }
}

export default Fixtures;

Контроллеры / VesselDataController.cs 

using Microsoft.AspNetCore.Mvc;
using Shelly.Data;
using Shelly.Services;
using System.Collections.Generic;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

namespace Shelly.UI.Controllers
{
    [Produces("application/json")]
    [Route("api/[controller]")]
    public class VesselDataController : Controller
    {
        private readonly IVesselService vesselService;

        public VesselDataController(IVesselService vesselService)
        {
            this.vesselService = vesselService;
        }

        [HttpGet("[action]")]
        public JsonResult GetGridVessels([DataSourceRequest] DataSourceRequest request)
        {
            var vessels = vesselService.GetVessels();
            var result = vessels.ToDataSourceResult(request);
            return Json(result);
        }
    }
}

Как я уже сказал, точка останова показывает, что base_url запрашивается, и данные возвращаются клиенту, и все же, сетка просто сообщает no records available, как будто есть соединение, которое я пропустил.

Кто-нибудь может помочь?

...