Sveltekit component with GRID with SSR enable

[Manuel]

I'm trying to use the Grid ej2 component in a sveltekit component:

//routes/grid/+page.svelte

<script lang="ts">

    import { onMount } from "svelte";

 

   // Import required Syncfusion Grid modules

    import { Grid } from "@syncfusion/ej2-grids";

    import { Page, Sort, Filter, Group, Selection } from "@syncfusion/ej2-grids";

    import {Button} from "@syncfusion/ej2-buttons"

 

    Grid.Inject(Page, Sort, Filter, Group, Selection);

   let grid;

   let button;

   const initializeGrid = () => {

     // Define columns for the Grid

     const columns = [

       { field: "OrderID", headerText: "Order ID", width: 120 },

       { field: "CustomerName", headerText: "Customer Name", width: 120 },

       { field: "Freight", headerText: "Freight", width: 120, format: "C2" },

       { field: "ShipCountry", headerText: "Ship Country", width: 150 },

     ];

 

     // Define data for the Grid

     const data = [

       { OrderID: 10248, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10249, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

        { OrderID: 10250, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10251, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

        { OrderID: 10252, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10253, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

       { OrderID: 10254, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10255, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

        { OrderID: 10256, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10257, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

        { OrderID: 10258, CustomerName: "ALFKI", Freight: 32.38, ShipCountry: "Germany" },

       { OrderID: 10259, CustomerName: "ANATR", Freight: 11.61, ShipCountry: "Mexico" },

       // Add more data as needed

     ];

 

     // Initialize the Grid

     // @ts-ignore

     grid = new ej.grids.Grid({

       columns: columns,

       dataSource: data,

     allowPaging: true,

      pageSettings: { pageSize: 5 },

      allowSorting:true,

      allowFiltering:true,

       

     });

 

     // @ts-ignore

     button = new ej.buttons.Button({ isPrimary: true });

 

     // Render the Grid

     grid.appendTo("#grid");

     button.appendTo('#primarybtn');

   };

 

 

   onMount(() => {

     // Load Syncfusion scripts and initialize the Grid

     const script = document.createElement("script");

     script.src = "https://cdn.syncfusion.com/ej2/dist/ej2.min.js";

     script.onload = initializeGrid;

     const link = document.createElement("link");

      link.rel='nofollow' href = "https://cdn.syncfusion.com/ej2/material.css";

      link.rel = "stylesheet";

      document.head.appendChild(link);

     document.head.appendChild(script);

   });

 

   //variable Init

     let count = 0;

 

   function clickButton() {

         //incremtent

         count++

     console.log(count);

     }

   

 </script>

 

 

 <main>

   <h1>Svelte Application!</h1>

   <div id="grid"></div>

   <button id="primarybtn" on:click={clickButton}>

     Clicked  {count} {count === 1 ? 'time': 'times'}

   </button>

 

   

  </main>

 

 <style>

   main {

     text-align: center;

     padding: 1em;

     max-width: 640px;

     margin: 0 auto;

   }

 

   h1 {

     color: #ff3e00;

     text-transform: uppercase;

     font-size: 2em;

     font-weight: 100;

   }

 </style>

For it to work I have to disable SSR in:

//routes/grid/+page.ts

export const ssr = false;

​

Is there any way it can work with SSR enabled?



export const ssr = true;

[Aishwarya Rameshbabu]

Hi Manuel,

Greetings from Syncfusion support.

After reviewing your query, we have noticed that you are facing an issue with rendering the Syncfusion Grid in sveltekit component when ssr is enabled. We would like to inform you that for transpiling, Vite SSR converts the packages to CommonJS syntax, but our source supports Module JS syntax. To use the Module JS source, you need to add the following configuration in your Vite.config.js:

Vite.config.ts

 

export default defineConfig({

    plugins: [sveltekit()],

    ssr: {

        noExternal: [/@syncfusion/]

      }

});

 

By including this configuration, you will be able to import our Syncfusion modules and render the components without encountering any errors.

Regards

Aishwarya R

[Manuel]

Dear Aishwarya   R, 

Could you provide a typical example that allows you to do a CRUD with a web API, using the DataGrid component?

thank you

[Santhosh Iruthayaraj]

Hi Manuel,

We have clearly discussed the requirements for performing CRUD operations on a Grid with the WebApiAdaptor in our documentation, which you can find below:

Documentation: Bind data & perform CRUD with WebApiAdaptor in Syncfusion Grid

We have included a GitHub link containing working sample of all the adaptor at the end of the documentation. You can also find the working WebApiAdaptor with CRUD operation sample attached below for your reference.

Regards,

Santhosh I

Attachment: WebApiAdaptor_680fe0c7.zip

[Manuel]

Dear Santhosh I, 

thanks for your replay, but I think you misunderstood me. 

What I need is an example of a sveltekit project where the syncfusion DataGrid component is implemented and allows the functionality of performing CRUD with a web api (the Web Api project is not necessary, only the sveltekit project)

Thanks

[Santhosh Iruthayaraj]

Hi Manuel,

Based on your request, we have prepared a sample implementation of the Grid component using Svelte (client-side part). In this sample, we have implemented the Grid with remote data binding using the WebApiAdaptor to load the dataSource. We have also enabled editing, as requested. With these configurations, the Grid will send API requests for CRUD operations (Add, Edit, Delete), which you can observe in the developer console's network tab. By handling these requests on the server side, you can persist the changes on the server.

Please refer to the code snippet below for binding remote data using DataManager and enabling editing:

[src\routes\+page.svelte]

 

<script>

  import { onMount } from "svelte";

  const initializeGrid = () => {

    var data = new ej.data.DataManager({

      url: "https://services.syncfusion.com/react/production/api/orders", // use your API link for data binding and CRUD handling

      adaptor: new ej.data.WebApiAdaptor(),

      crossDomain: true,

    });

    var grid = new ej.grids.Grid({

      dataSource: data,

      allowPaging: true,

      editSettings: {

        allowEditing: true,

        allowAdding: true,

        allowDeleting: true,

      },

      .  .  .  .  .

    });

    grid.appendTo("#grid");

  };

  .  .  .  .  .

</script>

 

Note: The attached sample contains only the client-side (Svelte kit project) as requested. Ensure that you handle the CRUD operations properly on the server side.

For server-side CRUD handling with the WebApiAdaptor, please refer to the documentation we shared previously. You can also find it linked below:

Documentation: Bind data & perform CRUD with WebApiAdaptor in Syncfusion Grid

Regards,

Santhosh I

Attachment: sveltekitgridapp_18cff807.zip