Articles

Binding JSON Data and Service URLs to the Vue Grid


Hi everyone, welcome back, I hope my last video helped you to learn about how to get started with the  Syncfusion vue grid with its basic features. Now in this video let’s see how to bind data to the vue grid. You can either bind the local Json data or data from the remote service URL. And you can also bind the data to the vue grid through the AJAX post. First I’ll start with binding local JSON data to the Vue Grid, which you must be already familiar with if you have watched my previous video. You can find
that video link from the description section below or the card shown above if you have not seen it yet. So I will open my
existing project and begin with a small intro about binding Json data to the grid. You can also download this
existing project from the link shared in the below
description part. To bind the local Json data, I need a JSON collection. So, I have defined the order related
details over here in this JSON collection which is assigned to a local data variable and simply by assigning it to the
data source property in the grid code will populate my vue grid with appropriate records. Now I will run this sample and show you the output in the browser. You can see here data in the
JSON Collection is populated as records in the vue grid. Also, you can notice only the selective columns are displayed on the grid with the columns i have mentioned in the e-column directive. Apart from this local Json data in real time applications. You may need to bind the data from a remote data source. So I will
show you how to bind the remote data to the vue grid with help of the data manager. Here, the data manager is another Library of SyncFusion, which act as a gateway to interact with both the local and remote data by
using the queries. For better clarity, I will
remove the code snippets in the data method of script section. To start using Syncfusion data manager first I need to import it from Syncfusion EJ2 data package. Under the data method of the script section i will declare the data variable and then create an instance of data manager. Here, I need to define 2
mandatory options, namely URL, and adapter in data manager. First I will define the URL property. Here, I can assign
any remote service URL like Odata Service, WEBAPI or any other restful service links to this URL property. In this sample, I’m going to
define the existing web service URL that returns the data objects with 11 fields like order ID customer ID, etc. To display only limited number of columns on my vue grid. I have defined only 4 columns, namely order ID, customer ID Order Date and ship country through the Ecolumns directive. Here, I have specified a
query to fetch the Top 7 records from the data Source. Now the next step is to set the appropriate type of adaptor for the data manager to identify the
type of request response. So to retrieve the data from
the web service URL. I need to specify the adaptor type as Web API adaptor, which should be imported from the Syncfusion EJ2 data package. And then I will assign this data variable to the data source property inside the grid
code under the template section. Let me save this sample and show you the output in the browser. Now you can see here. The remote
data is populated in the Vue grid with the columns I have mentioned inside the e-column directive. Now let me tell you
how to pass additional parameters to the server side. There are some cases where you
may need to pass some additional data along with your data request made to the server. In this case you can use the
instance of the query class to send those additional parameters. To start using this
query class, I need to import it from the Syncfusion EJ2 data package. Now I will show you the code part. Inside, the data method of the script section. I will declare a variable Param and then initialize the query class and use the add params method of it. And inside the add params method, I will pass the key, as status and set its value as closed. And then i will assign this Param variable to the query property of the grid. Now I will run this sample
and show you the output in the browser. Now the grid has been rendered, so I’ll open the network tab. Here you can see the additional query parameter, which is being sent along with the HTTP request header In case if you want to send
multiple custom parameters. Here you need to use the addparams method multiple times, separating them by a dot. Apart from these built in adaptor types, you can also define your custom adaptor by extending the built-in adaptors. Now I will show you how to auto
generate the serial numbers for each record of a grid by
overriding the built in process response method of Web API adaptor and then add that column to the vue data grid. First, I will define the custom class serial number adaptor, extending from the Web API  adaptor. And then inside the process
response method, I will define the code logic to auto
generate serial numbers for each grid record. Here, I have used the for each statement to increment the serial number for each record in the result. And then from this process response method, I will return the updated
result with serial number. Now I will assign this custom class name serial number adaptor to the adaptor property inside the data manager. Finally, I will add the serial
number column field using additional ecolumns directive in the grid code to show this column in the grid output. Now I will run this sample
and show you the output in the browser window. You can see the serial number column is auto populated for each record of the grid. Now let’s see how to bind the data to the vue grid using the ajax post. In some scenario, you may want to load the data dynamically too a grid. Say for example, you may want your grid to load the records after some successive actions such as button click. In such cases, you can prefer to use the Ajax Post instead of the data manager to send the dynamic
post back to the server. Now I will show you an example to load the Vue grid data on a button click using the Ajax Post. For better clarity, I will be removing few of the code  snippets of the data manager serial number column field and grid’s datasource property to continue with the Ajax usage. Before i start to use the Ajax. I need to import it from Syncfusion EJ2 base package. First I will create a button
with the click event and label it as load data. Now, under the script section
inside the button click event handler method, I will start to define the Ajax code Here in the Ajax method, I will
pass the existing remote service URL and make a call to the ajax dot send method to send a request to the server. And now with the on success event of AJAX, I’ll be getting the resultant data from the server, which I need to assign to the grid’s data source property. To access the data source
property of the grid dynamically. Let me first add a ref property in the grid tag and set its value as data grid. Now, using this ref, I will access the grid instance and assign the resultant data to the data source property of the grid. I will also need to parse the server response into JSON format using the JSON dot parse method while assigning it to the grid data source. Now I will show you the output in the browser. You can see here the Vue grid rendered with empty data at its initial loading. And now when I click the button, You can see the data getting loaded on the vue grid. Now let me make a quick summary
of what we have seen so far. I have shown you how to bind data to the vue grid using both the local and remote data and to load data dynamically in the grid using Ajax Request. You can get this working downloadable example from the link shared in the description part. You can also check our documentation link provided in the below description part to
know more about various data binding options available in the syncfusion vue grid. Post your comments below if you
need some additional information about any grid topics. Thank you for watching this
video, please like and subscribe to our channel to watch more
videos, thank you.

Comment here