Interacting with the server

Now that we've reviewed the general concepts of working with data in Bryntum components, let's explore server interactions in more detail. There are multiple ways to interact with the server.

For Bryntum Grid, the only way to interact with the server is to use AjaxStore, which is extended from Store class:

const grid = new Grid({
  // other config
  store : {
    createUrl : 'backend/create.js',
    readUrl   : 'backend/read.js',
    updateUrl : 'backend/update.js',
    deleteUrl : 'backend/delete.js'
  }
});

The AjaxStore then uses the URLs for AJAX requests for the different CRUD operations.

You can pass autoLoad : true, if you want the data to be loaded automatically after a store has been initialized.

const grid = new Grid({
  // other config
  store : {
    autoLoad  : true, 
    createUrl : 'backend/create.php',
    readUrl   : 'backend/read.php',
    updateUrl : 'backend/update.php',
    deleteUrl : 'backend/delete.php'
  }
})

The following example uses the readUrl to load the Grid data with a fake API call.

//<code-header>
fiddle.title = 'CRUD operations';
//</code-header>
const store = new AjaxStore({
    modelClass    : GridRowModel,
    readUrl       : '/mockUrl',
    pageParamName : 'page',
    autoLoad      : true
});

const grid = new Grid({
    appendTo : targetElement,
    height   : 400,
    store,

    features : {
        filter : true
    },

    columns : [
        { text : '#', type : 'number', width : 80, field : 'id' },
        { text : 'First name', field : 'firstName', flex : 1 },
        { text : 'Surname', field : 'surName', flex : 1 },
        { text : 'Score', field : 'score', flex : 1, type : 'number' },
        { text : 'Rank', field : 'rank', flex : 1, type : 'number' },
        { text : 'Percent', field : 'percent', width : 150, type : 'percent' }
    ]
});

// AJAX URL Mocking
AjaxHelper.mockUrl('/mockUrl', (url, params) => {
    return {
        responseText : JSON.stringify({
            success : true,
            total   : 10,
            data    : DataGenerator.generateData(10)
        })
    };
});

Using Fetch

You can use the JavaScript Fetch API to fetch the data and feed it into the Bryntum Grid:

const response = await fetch('backend/load.php');
const data = await response.json();

// feed it to Grid like this:
const grid = new Grid({
    store : {
        data : data
    }
})

// or this:
grid.store.data = data;

Headers

You can use the headers config to configure requests and send custom HTTP headers to the server:

// Configuring headers for each request
const store = new AjaxStore({
  readUrl : "backend/read.php",
  headers : {
    "Content-Type"   : "text/xml",
    "Accept-Charset" : "utf-8",
  },
});

Next, let's learn how data is structured for different requests.

Continue reading: Understanding structure.