How to implement multiple Datagrid in Bagisto?

Devansh Bawari

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,
https://devdocs.bagisto.com/1.x/advanced/datagrid.html#datagrid

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,

Below is the ProductDatagrid class present in the Webkul\Admin\DataGrids,

namespace Webkul\Admin\DataGrids; class ProductDataGrid extends DataGrid { ... }

1
2
3
4
5
6
7
8

namespace Webkul\Admin\DataGrids;

class ProductDataGrid extends DataGrid
{

...

}

Import the ProvideDataGridPlus trait in the mentioned class,

namespace Webkul\Admin\DataGrids;

use Webkul\Ui\DataGrid\Traits\ProvideDataGridPlus;

class ProductDataGrid extends DataGrid
{

    use ProvideDataGridPlus;

    ...

}

namespace Webkul\Admin\DataGrids;

use Webkul\Ui\DataGrid\Traits\ProvideDataGridPlus;

class ProductDataGrid extends DataGrid

{

use ProvideDataGridPlus;

...

}

After that toJson() method will be available in the datagrid instance which will provide data to the component.

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()

.



		
		
			
			

			
			use Webkul\Admin\DataGrids\ProductDataGrid;

class ProductController extends Controller
{

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        if (request()-&gt;ajax()) {
            return app(ProductDataGrid::class)-&gt;toJson();
        }

        return view($this-&gt;_config['view']);
    }

    ...
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
				
						use Webkul\Admin\DataGrids\ProductDataGrid;
 
class ProductController extends Controller
{
 
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        if (request()-&gt;ajax()) {
            return app(ProductDataGrid::class)-&gt;toJson();
        }
 
        return view($this-&gt;_config['view']);
    }
 
    ...
}

Now, in the view portion use this component i.e. datagrid-plus` and add the URL from where it will load the JSON data,

&lt;div class="page-content"&gt;
    ...
    
    &lt;datagrid-plus src="{{ route('admin.catalog.products.index') }}"&gt;&lt;/datagrid-plus&gt;
    
    ...
&lt;/div&gt;

...

<datagrid-plus src="{{ route('admin.catalog.products.index') }}"></datagrid-plus>

...

</div>

Similarly, you can add multiple datagrid as per your need.