• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

toDataSourceRequestString

Converts a DataSourceRequestState into a string that is comparable with the DataSourceRequest format in UI for ASP.NET MVC.

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: 20 } };
        }

        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}
                    dataStateChange={this.dataStateChange}
                />
            );
        }

        componentDidMount() {
            this.fetchData(this.state.dataState);
        }

        dataStateChange = (changeEvent) => {
            this.setState({ dataState: changeEvent.data });
            this.fetchData(changeEvent.data);
        }

        fetchData(dataState) {
            const queryStr = `${toDataSourceRequestString(dataState)}`; // Serialize the state
            const hasGroups = dataState.group && dataState.group.length;

            const base_url = 'api/Products';
            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
                    });
                });
        }
    }
}

Parameters

state DataSourceRequestState

The state that will be serialized.

Returns

string - The serialized state.

In this article

Not finding the help you need?