Search also foreign key value in grid

[Marvin]

I have a grid with 5 columns. One column is displayed via foreign key. In grid serach box I can only search the "normal" column values. 

Let say I have in foreign column follow database value:

TypeId = 100

Name = Oring

If I try to search "Oring" the grid show me not found. If I search "100" I get O-Ring.

My code is: 

var dataManager = ej.DataManager({

                url: "/api/Product",

                adaptor: new ej.WebApiAdaptor(),

                offline: true

            });

            dataManager.ready.done(function (e) {

                $("#Grid").ejGrid({

                    dataSource: ej.DataManager({

                        json: e.result,

                        adaptor: new ej.remoteSaveAdaptor(),

                        insertUrl: "/api/Product/Insert",

                        updateUrl: "/api/Product/Update",

                        removeUrl: "/api/Product/Remove",

                    }),

                    toolbarSettings: {

                        showToolbar: true,

                        toolbarItems: ["add", "edit", "printGrid", "search"]

                    },

                    editSettings: {

                        allowEditing: true,

                        allowAdding: true,

                        allowDeleting: false,

                        showDeleteConfirmDialog: true,

                        editMode: "dialogtemplate",

                        dialogEditorTemplateID: "#templateForm",

                    },

                    isResponsive: true,

                    enableResponsiveRow: true,

                    allowSorting: true,

                    allowSearching: true,

                    allowFiltering: true,

                    filterSettings: {

                        filterType: "excel",

                        maxFilterChoices: 100,

                        enableCaseSensitivity: false

                    },

                    allowPaging: true,

                    pageSettings: { pageSize: 10, printMode: ej.Grid.PrintMode.CurrentPage },

                    columns: [

                        { field: "ProductId", type: 'number', headerText: 'OD-No.', defaultValue: 0, isPrimaryKey: true, isIdentity: true, visible: false },

                        { field: "Barcode", type: 'string', headerText: 'P/N', validationRules: { required: true } },

                        { field: "ISO", type: 'string', headerText: 'ISO', validationRules: { required: true } },

                        { field: "TypeList", headerText: 'Type', foreignKeyField: "TypeId", foreignKeyValue: "Name", dataSource: dataManagerType, validationRules: { required: true } },

                        { field: "SupplierPN", type: 'string', headerText: 'SupplierPN', visible: false },                      

                    ],

                    actionComplete: "complete",

                });

            });

        });

[Padmavathy Kamalanathan]

Hi Marvin,

Thanks for contacting Syncfusion Forums.

QUERY: Search foreign key value in grid

From your query we understand that you are unable to search the foreign key value using Grid's search. For performing searching functionality of the foreign key column, you need to extend the adaptor in the grid's load event.

Please check the below help documentation,

https://help.syncfusion.com/aspnet-core/grid/data-adaptors#foreign-key-adaptor

In the above documentation, we have extended the JSON adaptor to ForeignKey Adaptor. Similarly, you can extend your adaptor to ForeignKey Adaptor in order to achieve your requirement.

If you have further queries, please get back to us.

Regards,

Padmavathy Kamalanathan

[Marvin]

Thanks for fast reply.

It dosen't work. The grid shows only a loading symbol.

My code:

//In grid

load:  function(args) {

                        this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor([{ field: "TypeList", foreignKeyField: "TypeId", foreignKeyValue: "Name", dataSource: dataManagerType }], "WebApiAdaptor");

                    },

 dataManagerType = ej.DataManager({

                url: "/api/ProductType1",

                adaptor: new ej.WebApiAdaptor()

            });

[Padmavathy Kamalanathan]

Hi Marvin,

Thanks for your update.

From your code, we can understand that you have extended the WebApi Adaptor and not the RemoteSave Adaptor which you have used for performing CRUD operations in Grid. We suggest you to extend the RemoteSaveAdaptor.

Still facing the issue, please get back to us.

Regards,

Padmavathy Kamalanathan

[Marvin]

I try it. I dosen't work.

Code:

dataManager.ready.done(function (e) {

                $("#Grid").ejGrid({

                    dataSource: ej.DataManager({

                        json: e.result,

                        adaptor: new ej.remoteSaveAdaptor(),

                        insertUrl: "/api/Product/Insert",

                        updateUrl: "/api/Product/Update",

                        removeUrl: "/api/Product/Remove",

                    }),

                    toolbarSettings: {

                        showToolbar: true,

                        toolbarItems: ["add", "edit", "printGrid", "search"]

                    },

                    editSettings: {

                        allowEditing: true,

                        allowAdding: true,

                        allowDeleting: false,

                        showDeleteConfirmDialog: true,

                        editMode: "dialogtemplate",

                        dialogEditorTemplateID: "#templateForm",

                    },

                    isResponsive: true,

                    enableResponsiveRow: true,

                    allowSorting: true,

                    allowSearching: true,

                    allowFiltering: true,

                    filterSettings: {

                        filterType: "excel",

                        maxFilterChoices: 100,

                        enableCaseSensitivity: false                

                    },

                    allowPaging: true,

                    pageSettings: { pageSize: 100, printMode: ej.Grid.PrintMode.CurrentPage },

                   

                    columns: [

                        { field: "ProductId", type: 'number', headerText: 'OD-No.', defaultValue: 0, isPrimaryKey: true, isIdentity: true, visible: false },

                        { field: "Barcode", type: 'string', headerText: 'P/N', validationRules: { required: true } },

                        { field: "ISO", type: 'string', headerText: 'ISO', validationRules: { required: true } },

                        { field: "TypeList", headerText: 'Type1', foreignKeyField: "TypeId", foreignKeyValue: "Name", dataSource: dataManagerType, validationRules: { required: true } },

                        { field: "SupplierPN", type: 'string', headerText: 'SupplierPN', visible: false },

                        { headerText: "Type2", template: "<span>{{:TypeList}}</span > " },

                      

                    ],

                    actionComplete: "complete",

                    load: "gridLoad",

                });

            });

        });

        function gridLoad(args) {

            this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor([{ field: "TypeList", foreignKeyField: "TypeId", foreignKeyValue: "Name", dataSource: dataManagerType }], "remoteSaveAdaptor");

        }

[Padmavathy Kamalanathan]

Hi Marvin,

Thanks for your update.

We have created sample for your convenience. In the sample, we have binded JSON Data to ForeignKey Column and extended it as ForeignKey Adaptor. Please check whether you are binding data to foreign key column from json/remote save adptor and extend that to foreign key adaptor.

Please check the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASPNETCoreApplication-F1488611851439944.zip

If you have further queries, please get back to us.

Regards,

Padmavathy Kamalanathan