Foreign Key Column: Set datasource as datamanager with query

[Mehdi Nabhani]

I would like to use one collection for Status updates for several other parent collections. In those I want to show only the status items related to them. I am unable to solve this one in an easy way, without making it too complicated. Below setpu does not work, the column always ignores the query given either in the datamanger or as query={query} option and shows all status items instead of only the ones related to the current parent.

Column:

<ColumnDirective field='dataStatusID' headerText='Status' width='150' foreignKeyValue='name' foreignKeyField='_id' dataSource={dmDataStatus} />

Mongoose Schema:

const dmDataStatus = new DataManager({

url: SERVICE_URI_DATASTATUS,

adaptor: new ODataV4Adaptor(),

query: new Query().where('type', 'equal', "Project")

});

Mongoose Schema:

import mongoose from "mongoose";

import { dataModels } from './enums/data.model.enums.js';

const dataStatusSchema = new mongoose.Schema({

name: { type: String, required: true, },

description: { type: String },

tags: [String],

type: {

type: String,

enum: dataModels

},

}, { timestamps: true });

const DataStatus = mongoose.model("DataStatus", dataStatusSchema);

export default DataStatus;

[Harini Kannan]

Hi Mehdi,

Query : Foreign Key Column: Set datasource as datamanager with query

Based on your query, we would like to inform that you have used a data manager with a mongoose schema, and Syncfusion  Datamanager used with data adapter was examined. Each adapter must following the formatting of unique adaptor concept. ODatav4adapter with properties like Items and Count to maintain the data structure.  Returning data in the properties like Items and Count grid will be regarded as a datamanager adapter that is used in the data adapter, since you handled your own logic code in the Mongoose schema it is not feasible to meet your needs with Syncfusion datamanager.

For achieving your requirement

If possible, to provide a data in json format you can achieve this requirement by binding the data in grid using the foreignkey column. If you use adapter to bind data, it's not feasible to rendering the data in foreign key column because the adapter contains specific structure for grid. 

Please get back to us if you have any concern.

Regards,

Harini

[Mehdi Nabhani]

Thank you for your detailed response.

I am afraid I did not specify my question good enough. I have managed the datamanager and mongoose database connection via a server/parser. The data server provides the data in Odata V4 format and it works fine.

The actual question is for Synfusion components. Most of them do have a query property. But when I use it, and apply a datamanager to it, it overwrites the query and uses the datamanager with simple skip/top query (for paging).

Is there a way to preset a query either on datamanager or on the component?

Currently I can apply datamanager as datasource only, if I dont use any query. If I want to use a query, I have to prepoluate a dataset and apply this dataset to the component and datasource.

[Harini Kannan]

Hi Mehdi,

Query: Foreign Key Column: Set datasource as datamanager with query

As per your query we provided grid code for datamanager using OdataV4adapter with foreign key column. We've added a new DataManager for the Customers endpoint and used it to populate the foreign key column for the CustomerID field. We've also added a new DataManager for the Orders endpoint and used it to populate the foreignKey column for the EmployeeID field.

We have attached a screenshot and code snippet for your reference.

Sample code:

 

import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

import {Grid, Sort,Page,Filter,Edit, Toolbar, ForeignKey,} from '@syncfusion/ej2-grids';

import { orderDetails, customerData } from './data';

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

Grid.Inject(Page, Sort, Filter, Edit, Toolbar, ForeignKey);

const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';

const dm = new DataManager({

  url: SERVICE_URI,

  adaptor: new ODataV4Adaptor(),

  headers: [{ syncfusion: 'true' }],

});

let grid = new Grid({

  dataSource: orderDetails,

  allowPaging: true,

  allowSorting: true,

  allowFiltering: true,

  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

  filterSettings: { type: 'Menu' },

  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

  columns: [

    {

      field: 'OrderID',

      width: 120,

      headerText: 'Order ID',

      isPrimaryKey: true,

      textAlign: 'Right',

      validationRules: { required: true, number: true },

    },

    {

      field: 'EmployeeID',

      foreignKeyField: 'EmployeeID',

      foreignKeyValue: 'CustomerID',

      dataSource: dm,

      width: 150,

      headerText: 'Customer Name',

    },

    {

      field: 'Freight',

      textAlign: 'Right',

      width: 100,

      editType: 'numericedit',

      format: 'C2',

    },

    { field: 'ShipName', headerText: 'Ship Name', width: 170 },

    {

      field: 'ShipCountry',

      headerText: 'Ship Country',

      editType: 'dropdownedit',

      width: 150,},],});

grid.appendTo('#Grid');

Screenshot:

We already have cross-origin property support. The cross-origin setting can be made true. We suggest you enable cross-origin request in the startup.cs file in order to enable CORS configuration in your application.

Cross configuration for ASP.NET Core: https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

Please let us know if you need any further assistance.

Regards,

Harini