Laravel And Vue.js

[Denislav Kostov]

Hello. First I want to apologize for my bad EN.

So, I’m using ejs2 vue componets in my Laravel 5.7 project. I successfully managed to integrate the data grid in to my project and the data is binded with the WebAPI adaptor. Now I have a few problems and I can not find a solution in your manuals(documentations).I will try to explain as much as possible in details!

Problem 1.

I would like to use the grid as normal data grid with these options: (Add,Edit, Delete, Update, Sorting and Filtring).

So i did some API routes in Laravel with (GET, POST and DELETE). These method request work fine because they calling one static address... let’s say for example http://example.tld/api/stock 

But when i want to update a record i have to use PUT request method and the problem comes there because now i have to call dynamic url address like so: http://example.tld/api/stock/{id}

So i’m using Dialog mode for editing and when i press save button gives error where it says “Method PUT is not allowed for this page” and the page is http://example.tld/api/stock instead of http://example.tld/api/stock/{id} .

Problem 2

Sorting and Filtring doesnt work. As i can see it make an request but nothing change!

Off topic:

Is there a possibility to make a custom button in the grid where i can dublicate the record but in other db table ? 

I would be very grateful if you help me with examples because I am a beginner! Thanks in advance.

[Pavithra Subramaniyam]

Hi Denislav, 

 

Thanks for contacting Syncfusion support. 

 

Query #1: where it says “Method PUT is not allowed for this page” and the page is http://example.tld/api/stock instead of http://example.tld/api/stock/{id}. 

 

While update the edited records we have send the request to the server like as following screenshot, 

 

 

After complete the update action server will returns response like as following screenshot, 

 

 

 

So please ensure this request and response format in your project. Also, you need to send the request and response in above format to perform update action in Grid. 

 

Query #2: Sorting and Filtring doesnt work. As i can see it make an request but nothing change! 

 

Before working on this query, please share the following details to us. This will help us to provide the solution as early as possible, 

 

1. Share the sort and filter query. You can find this query details in network tab.
2. Share the network tab response to know about how the sorted records returns from the server.
3. Bind the actionFailure event to the Grid and ensure whether it will trigger or not while perform sort, filter and crud action in Grid. This event only trigger when some action getting failed in Grid. If it trigger, then share argument details of this event. Because, we can find the issue details in the argument of this event.

 

Refer the below link to know about actionFailure event of the Grid, 

 

https://ej2.syncfusion.com/documentation/api/grid/#actionfailure 

 

Query #4: Is there a possibility to make a custom button in the grid where i can dublicate the record but in other db table ? 

 

From this query, we found that you want to find the duplicate records in Grid. If yes, then please share the details about in when you want to find this duplicate records (i.e while perform any Grid action or any other case ) or else share your exact requirement for further assistance. 

 

Regards, 

Pavithra S. 

[Denislav Kostov]

So those pictures are for GET method on index page:

1

2

3

4

5

And those pictures are for DELETE method:

1

2

Here is the pictures of PUT method and here is the problem:

1

2

3

Here you can see my api routes :

My Api Routes

I will also attach some files...

And here is the page filtring

1

Query #4: Is there a possibility to make a custom button in the grid where i can dublicate the record but in other db table ? 

 

So i will give an example... I want to load my stock of paint in the data grid and with this custom button i want to make something like "Add to basket" or add to be ordered...and the point is when i press this button the selected item to go in other db table where i can list this table in other page with other grid and then i will have a page where i can see what paint i have to reorder!

Attachment: syncf_3ced88e6.zip

[Thavasianand Sankaranarayanan]

Hi Denislav, 

Thanks for the update. 

Query #1: Here is the pictures of PUT method and here is the problem: 

 

From the attached files, we found that you have tried to send the parameter in PUT method request. This caused the issue. By default, Grid will send only the edited row details to the controller while performing update action. This edited row detail has primaryKey value also. So, if you want to get the primaryKey value in the controller, then you can get it from the default edited record row values.  So, please change the update URL to Route::put('stock', 'StockController@update') instead of using Route::put('stock/{id}', 'StockController@update') this. 

 

By default, you can get the below highlighted id value in controller. So you do not need to send this value as an extra parameter.  

 

 

 

Query #2:  Is there a possibility to make a custom button in the grid where i can duplicate the record but in other db table ? 

From this query, we found that you want to send and store the Grid selected records in another DB through the button click. You can get the Grid selected records detail by using getSelectedRecords method of the Grid. After getting the selected records, you can use your API service to send and store the selected records in another DB. You can access the selected records detail within the button click like as following code snippet, 

<template> 

    <div id="app"> 

        <ejs-button isPrimary="true" v-on:click.native="btnClick">Primary</ejs-button> 

        <ejs-grid ref='Grid' id='Grid' dataSource="data"> 

            

        </ejs-grid> 

    </div> 

</template> 

 

 

<script> 

import { GridPlugin } from '@syncfusion/ej2-vue-grids'; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

Vue.use(GridPlugin); 

Vue.use(ButtonPlugin); 

    export default { 

        data () { 

            return { 

                

            } 

        }, 

        methods: { 

            btnClick: function(args){ 

                console.log(this.$refs.Grid.getSelectedRecords()); 

            } 

        } 

    } 

</script> 

Refer the below link to know about getSelectedRecords method of the Grid, 

https://ej2.syncfusion.com/documentation/api/grid/#getselectedrecords 

Regards, 

Thavasianand S.