Use edit inline in foreignkey column with Autocomplete

[Manuel]

I'm having trouble using Use Inline Edit on Foreign Key Column with Autocomplete.

Data for the Grid  JuntaMiembros  : 

 

export interface JuntaMiembros {

    id: string;

    estado: Estado;

    roljunta: RolJunta;

    createdat: Date;

    updateat: Date;    

    implicacion: number;

    propietarioid: string;

    portafolioid: string;

    programaid: string;

    proyectoid: string;

    usuarioid: string; // ForeignKey

    tenantid: string;

  }

Data UsuarioTenant with related column to JuntaMiembros (  (JuntaMiembros) usuarioid --> (UsuarioTenant) id ) : 

  export interface UsuarioTenant {

    id: string; // UUid

    nombre: string; // varchar(255)

    createdat?: Date; // timestamp

    updateat?: Date; // timestamp

    email?: string; // varchar(255)

    userauthid?: string; // UUid  

    defecto: boolean; // boolean

    rol: UsuarioRol; // public.UsuarioRol

    tenantid?: string; // UUid

  }

I have something like this : 

letUsuarios:UsuarioTenant [];
..
....

   {

    field: 'usuarioid', headerText: 'UsuarioS', width: 150, foreignKeyField: 'usuarioid', foreignKeyValue: 'nombre', dataSource: Usuarios,

    edit: {

      create: function () {

        // to create input element

        console.log("Usuarios", Usuarios);

        return ej.base.createElement('input');

      },

      read: function () {

        // return edited value to update data source

        var value = new ej.data.DataManager(Usuarios).executeLocal(

          new ej.data.Query().where('nombre', 'equal', autoCompleteObj.value)

        );

        return value.length && value[0]['usuarioid']; // to convert foreign key value to local value.

      },

      destroy: function () {

        // to destroy the custom component.

        autoCompleteObj.destroy();

      },

      write: function (args) {

        autoCompleteObj = new ej.dropdowns.AutoComplete({

          dataSource: Usuarios,

          fields: { value: args.column.foreignKeyValue },

          value: args.foreignKeyData[0][args.column.foreignKeyValue],

        });

        autoCompleteObj.appendTo(args.element);

      }

    },

  },

​
​



 

My problem is that when the Grid is created, the column with Foreign Key, shows the value of the local column.. instead of the text of the foreign data

Can you give me an example of how to do it?

Thank you

[Aishwarya Rameshbabu]

Hi Manuel,

Greetings from Syncfusion support.

After reviewing your query, we observed that you are using foreign key columns in Syncfusion Grid and rendering an AutoComplete component as the edit template for that column. You are encountering an issue where the foreign key data is not mapped correctly. We suspect that the foreignKey properties are not defined properly. We recommend using the following definition for your foreign key column. Please refer to the code example below and the documentation link for more detailed information.

    {

        field: 'usuarioid',  // The field in JuntaMiembros that contains the foreign key

        headerText: 'UsuarioS',

        width: 150,

        foreignKeyField: 'id',  // The field in Usuarios that corresponds to usuarioid in JuntaMiembros

        foreignKeyValue: 'nombre',  // The field in Usuarios that you want to display

        dataSource: Usuarios  // The data source containing the foreign key values

      },

 

Documentation Links:

Foreign-key-column

Using-Edit-template-in-Foreignkey-column

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[Manuel]

Dear Aishwarya R,

The problem I have is that the array Users is typed with TypeScript with the type UserTenant

The foreignKeyData property is null.

Could you take a look at this example (it's incomplete)?

https://stackblitz.com/edit/z7wnx5

[Manuel]

There is the error : 

[Manuel]

Here I bring you another example with the problem using a DropDownList column

https://stackblitz.com/edit/phfkvs-1nbxwq 

[Aishwarya Rameshbabu]

Hi Manuel,

In your first update, you indicated that the foreignKeyData property is null within the write function of the cell edit template used in Syncfusion Grid. Upon reviewing the provided sample, we were unable to run it due to type definitions specified in the JavaScript file. However, when these type definitions are removed, the issue does not occur, and the foreignKeyData property returns data correctly. Please refer to the sample and screenshot below. Therefore, we request that you to clarify your specific requirement and explain the necessity of defining data with TypeScript while rendering the Grid with JavaScript.

Sample: https://stackblitz.com/edit/z7wnx5-h8bgwg?file=es5-datasource.js,index.js

Screenshot:

In your second update, you indicated an issue concerning the column that utilizes a DropdownList as the edit template. We have revised the sample to ensure the DropdownList functions correctly within the cell edit template for the 'usuario' column. For further details, please refer to the sample, code example, and documentation link provided below.

Index.ts

let grid: Grid = new Grid({

……..,

  columns: [

                 …………..,

    {

      field: 'usuarioid',

      headerText: 'usuario',

      width: 160,

      edit: {

        create: () => {

          itemElem = document.createElement('input');

          return itemElem;

        },

        read: function() {

          return itemObj.value;

      },

        write: (e) => {

          // Getting data of the editable cell

          var data = e.rowData.usuarioid;

          console.log(data);

          itemObj = new DropDownList({

            dataSource: usuariosTenantData as any,

            // Mapping the field value.

            fields: { value: 'id' },

            // setting the value of dropdown

            value: data,

            floatLabelType: 'Never',

          });

          itemObj.appendTo(itemElem);

        },

      },

    },

  ],

});

grid.appendTo('#Grid');

 

Sample: https://stackblitz.com/edit/phfkvs-vr1pnm?file=data-source.ts,index.ts,package.json

Documentation Link: Render-DropDownList-control-in-Edit-form

Regards

Aishwarya R

[Manuel]

I already knew that, but I need to use TypeScript, that's why I asked you to please tell me how to implement it using TypeScript and the UsuarioTenant and JuntaMiembros  types.

I've tried but without success here --> https://stackblitz.com/edit/phfkvs-1nbxwq?file=index.ts

Can you provide me with an example implementation using TypeScript?"

Thanks

[Pavithra Subramaniyam]

Hi Manuel ,

We have modified the sample with TypeScript in which we have used a foreign key column and edit template. Please refer to the below sample and screenshot for more information.

Sample: https://stackblitz.com/edit/nnaani?file=data-source.ts,index.ts

[Manuel]

Hola  Pavithra, 

i found some error on this example, because it not import ForeignKey module ... 

however i get fix it, on the following example.

https://stackblitz.com/edit/nnaani?file=index.ts

Edit: 

I have checked the example you provided again, but it doesn't work.

For example, the ForeignKey module is missing, as is the read method... Could you provide me with a correct example?

Many thanks for your help!

[Aishwarya Rameshbabu]

Hi Manuel,

Sorry for the inconvenience caused.

We have updated the sample to include the missing module.

Based on the information provided and the sample shared, we observed that you are attempting to render a DropDownList in the edit form of a foreign key column using the cell edit template feature of the Grid. In Syncfusion Grid, the edit form for a foreign key column is rendered with a DropDownList component by default to ensure the correct mapping of foreign key data. Therefore, it is not necessary to define it using the cell edit template feature; you can utilize the default edit options directly.

Additionally, you may need to render the AutoComplete component for the foreign key column. If your requirement for rendering the AutoComplete column is only for fetching data upon searching, this can also be accomplished using the default DropDownList by enabling the allowFiltering property within the edit params, which will optimize the code. Please refer to the below sample, code example and video demonstration for more detailed information.

Sample : Bvvxbm (forked) - StackBlitz

If you face any difficulties or need any other customizations with this, please get back to us.

Regards,

Aishwarya R