[REACT] Crud manager in the grid

[bharat95]

Hi,

I want to integrate bryntum grid with asp.net. I was able to find crud manager in gantt but unable to find crudmanager in grid. Please help me how to load data from asp controller.

Thanks,
Bharat

[tasnim]

Hi,

To add the backend to the grid, Please check this demo https://bryntum.com/products/grid/examples/php/
Please also check docs https://bryntum.com/products/grid/docs/api/Core/data/Store

Hope this will help.

[bharat95]

Hi Tasnim

I'm using below code but I'm getting error

Type '{ readUrl: string; }' is not assignable to type 'Store | Partial<StoreConfig> | undefined'.
Object literal may only specify known properties, and 'readUrl' does not exist in type 'Store | Partial<StoreConfig>'.ts(2322)

.

I'm using react typescript.

import { Grid } from '@bryntum/grid-trial';
import { Fragment } from 'react';

let bryntumGrid;
try {
  bryntumGrid = require('@bryntum/grid-react');
} catch {
  console.warn('@bryntum/grid-react is not available.');
}

let ProjectGrid = () => <Fragment>Bryntum Gantt is not available.</Fragment>;
if (bryntumGrid) {
  try {
    require('../../styles/bryntum.grid.css');
  } catch {
    console.warn('bryntum.grid.css is not available.');
  }

  const { BryntumGrid } = bryntumGrid;
  const gridConfig = new Grid({
    columns: [
      { text: '', field: 'Name', width: 200 },
      { text: 'Status', field: 'Status', width: 200 },
    ],
    store: {
      readUrl: '/project/projectgrid/data',
    },
    tbar: [
      {
        type: 'buttongroup',
        style: 'margin-left:auto',
        items: [
          {
            type: 'button',
            ref: 'addButton',
            text: 'New Pool',
            tooltip: 'Toggles read-only mode on grid',
            icon: 'b-fa-plus-circle',
            iconAlign: 'start',
            onAction: () => {
              alert('hi');
            },
          },
        ],
      },
    ],
  });
  ProjectGrid = () => {
    return (
      <Fragment>
        <BryntumGrid {...gridConfig} />
      </Fragment>
    );
  };
}

export default ProjectGrid;

[tasnim]

Hi,

For now, Please try using https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#config-readUrl instead

store : new AjaxStore({
	readUrl : 'data/data.json'
})

I'll discuss with the team about the problem.

Please let us know if any other questions or problem

[bharat95]

Hi Tasnim,

I tried to add

store : new AjaxStore({
	readUrl : 'data/data.json'
})

in above given code but it's not hitting controller, can you please explain more how I can write.

[tasnim]

Hi,

I've updated our react-typescript basic demo with AjaxStore code that shows how to load data from a URL

Instruction to run this project

$ npm i
$ npm start

And this is how it looks

Screenshot 2023-05-22 172435.png (35.74 KiB) Viewed 295 times

Please check the attached demo below

[tasnim]

Opened a ticket to add readUrl typing in typescript
Here is the ticket https://github.com/bryntum/support/issues/6824

[bharat95]

Hi,

The readUrl is not hitting my asp controller. I want to read json data from that controller. Please give me example in asp.

Thanks
Bharat

[alex.l]

Hi Bharat,

The readUrl is not hitting my asp controller.

What does it mean? Did you call grid.store.load() or maybe you used autoLoad: true for your store?
Do you see request in Network tab of Chrome DevTools or whatever you use for debugging JS? If request is there, the problem in your backend part that we can't help you with. If you used load() call or autoLoad config and there is nothing in Network tab, please attach your runnable application here, we will debug it and help you with this problem.

[bharat95]

Hi

I'm using below code and I'm seeing empty screen for the code. Please help me what's wrong in the code.

import React, { Fragment } from 'react';
import { AjaxStore, Grid } from '@bryntum/grid';

let bryntumGrid;
try {
  bryntumGrid = require('@bryntum/grid-react');
} catch {
  console.warn('@bryntum/grid-react is not available.');
}

let ProjectGrid = () => <Fragment>Bryntum Grid is not available.</Fragment>;

if (bryntumGrid) {
  try {
    require('../../styles/Bryntum/grid.stockholm.css');
  } catch {
    console.warn('bryntum.grid.css is not available.');
  }
  const { BryntumGrid } = bryntumGrid;
  const gridConfig = new Grid({
    columns: [{ field: 'Name', width: 250 }],
    store: new AjaxStore({
      readUrl: 'http://localhost/project/projectgrid/data',
      autoLoad: true,
    }),
  });
  ProjectGrid = () => {
    return (
      <Fragment>
        <BryntumGrid {...gridConfig} />
      </Fragment>
    );
  };
}

export default ProjectGrid;