How to implement multiple Datagrid in Bagisto?

Updated 4 August 2022

Here we are going to discuss how to implement multiple Datagrid in Bagisto.  I am assuming that you are already familiar with the default Datagrid creation. If not then you can check it from here,

Here we are going to discuss implementing multiple Datagrid in Bagisto.

Now, let’s get started,

As the default datagrid will handle only a single request at a time which means filtration, sorting and many other operations will get conflicted when you try to implement the multiple datagrids. To overcome this we have provided a trait ProvideDataGridPlus in the namespace Webkul\Ui\DataGrid\Traits.

When you add this trait to your database, then you have access to the toJson() method which provides the JSON format data from the collection. The whole idea behind this is to add the component in the view file and provide the data source which will hit the controller via. ajax and in the controller, this will hit the toJson() method which will provide the JSON in response.

Let’s take an example of the product datagrid,

  1. Below is the ProductDatagrid class present in the Webkul\Admin\DataGrids,
  2. Import the ProvideDataGridPlus trait in the mentioned class,
  3. After that toJson() method will be available in the datagrid instance which will provide data to the component.
  4. Now you need to create one route and method from which the response will come. Let us take an example of the product listing page. Now go to ProductController in the namespace Webkul\Product\Http\Controllers, there is an index method, just use the toJson().
  5. Now, in the view portion use this component i.e. datagrid-plus` and add the URL from where it will load the JSON data,
  6. Similarly, you can add multiple datagrid as per your need.
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home