Custom attribute in diferent cells

[Tomas De arco]

Hi frieds, is it possible to send custom attributes on different cells, and later receive those attributes in a post or use them in a formula on the client side? For example 

var spreadsheet = new ej.spreadsheet.Spreadsheet({
    sheets: sheets,
    created: function () {
        spreadsheet.cellCustomFormat({ data-id: '1', data-category: 100 }, 'B3');
        spreadsheet.cellCustomFormat({ data-id: '1', data-category:101 }, 'B4');
        spreadsheet.cellCustomFormat({ data-id: '2', data-category:100 }, 'C3');
    },
    // Removed the unwanted support for this samples
    showRibbon: false, showFormulaBar: false, showSheetTabs: false
});

[Janakiraman Sakthivel]

Hi Tomas De arco,

We have validated your reported requirement and would like to let you know that we can add custom attributes to cells using our updateCell() method. For your convenience, we have added the attributes "id" and "category" to the cells A2, B2, and C2 using the updateCell method in the shared sample below.

Sample: https://stackblitz.com/edit/bpre6v-4cr3bv?file=index.js

CODE SNIPPET:

created: function () {

            // Added the custom attributes "id" and "category"

            spreadsheet.updateCell({ id: '1', category: 100 }, 'A2');

            spreadsheet.updateCell({ id: '2', category: 200 }, 'B2');

            spreadsheet.updateCell({ id: '3', category: 200 }, 'C2');

    }

We couldn't exactly understand your reported requirement, "later receive those attributes in a post or use them in a formula on the client side". Therefore, before we proceed further, please share the following details:

1. Please share the details of where you expect to receive the added custom attributes from the cell for later use and for what purpose you are trying to receive them.

2. Please explain your requirement step by step with details and some examples for our better understanding.

3. Please confirm whether you are trying to use the added custom attributes inside the formulas in the client-side sample or if you expect to send the added custom attributes to the server side while trying to save the spreadsheet as an MS Excel file.

Could you get back to us with the requested details above? These will help us proceed further and provide a better solution quickly.

[Tomas De arco]

Thank you very much for the answer, the issue is that we require the cells to have some attributes to be able to associate the cells with other cells, for particular calculations, but I would like to be able to add that attribute when the cell is being created, for example:

rows: [{ index: 30, cells: [ { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } , atrributte: {id:1, category:100}}, ] }],

[Janakiraman Sakthivel]

Hi Tomas De arco,

We have validated your reported requirement, and we would like to let you know that you can add attributes to individual cells in a sheet. If you would like to add attributes such as 'id' and 'category' directly to a cell, you can achieve this by assigning the required attributes directly to the cell, as shown in the code snippet below.

CODE SNIPPET:

rows: [

                {

                    cells: [

                        { value: 'Category', style: { fontWeight: 'bold', textAlign: 'center' }, id: 1, category: 100 }

                    ]

                }

          ]

Alternatively, if you prefer to add attributes such as 'id' and 'category' within an object named 'attribute' in the cell, you can achieve this by assigning the required attributes to the object. Then, you can assign that object as an attribute to the cell, as demonstrated in the code snippet below.

CODE SNIPPET:

rows: [

                {

                    cells: [

                         { value: 'Planned cost', style: { fontWeight: 'bold', textAlign: 'center' }, attribute: { id: 2, category: 200 } }

                    ]

                }

          ]

For your convenience, we have shared the sample below to meet your requirements.

Sample: https://stackblitz.com/edit/gqrp33-3yh9j3?file=index.js

Kindly check the details shared above. If we have misunderstood your requirement, kindly explain in more detail regarding your requirement for our understanding. Based on that, we will check and provide you with a better solution quickly.

[Tomas De arco]

Perfect, that is exactly what I need.

However, I have another question:

What happens to the attributes of cell A1 if I paste the value from B1 into A1?

Can I retain the attributes even if I copy or use autofill?

[Babu Periyasamy]

Hi Tomas De arco,

Thanks for your update.

We have checked your reported query and we have checked them by copy/pasting and autofilling the cells with attributes and below mentioned the details,

Copy/pasting:

When copying and pasting cells with custom attributes, the custom attributes of the copied cell are properly retained and updated after pasting. For your convenience, we have prepared the video demonstration to show the copy/pasting the cells with the custom attributes with the previously shared sample and attached below for your reference,

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Copy-paste_with_custom_attributes111272493

Autofilling:

When autofilling cells with custom attributes, the custom attributes are properly updated in the autofilled cells. For your convenience, we have prepared the video demonstration to show the autofilling the cells with the custom attributes with the previously shared sample and attached below for your reference,

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Autofill_with_custom_attributes-1916136505

And attached the checked sample link below for your reference,

Sample link: https://stackblitz.com/edit/gqrp33-vqpcqd?file=index.js

Kindly, check the above details and get back to us for further clarifications.

[Tomas De arco]

Thanks you for your help.

I ask you if is possible to retain A1 attributes, I only need to paste values, as an special paste, retaining A1 attributes.

[Dinakar Manickam]

Hi Tomas De arco,

We have checked your reported query and would like to inform you that you can retain the A1 attributes and paste only values, as a special paste by retaining A1 attributes.

The requirement can be achieved by using the actionBegin event of our spreadsheet component. This event triggers for every action in the spreadsheet. When pasting a copied cell containing custom attributes, we can restrict the paste action to paste only the values while retaining the custom attributes in the actionBegin event.

For your convenience, we have prepared a sample and attached along with the code snippet below for your reference.

Code Snippet:

actionBegin (args) {

        //Check whether action is a paste action.

        if (args.action === 'clipboard' && args.args.eventArgs.requestType === 'paste') {

            //Set the type to 'Values' to paste only the values.

            args.args.eventArgs.type = 'Values';

        }

    }

Sample Link: https://stackblitz.com/edit/gqrp33-5bzme2

In the above, we check if the action is clipboard and if the request type is paste. Then, we restrict the paste action to paste only values in the actionBegin event of our spreadsheet.

For your convenience, we have prepared a video demonstration on the above case and attached below for your reference.

Video Link: Please refer to the below attachement.

Kindly, check the above requirement and get back to us for further clarifications.

Regards,

Dinakar M

Attachment: VideoF18865_38508018.zip

[Tomas De arco]

Thanks very much. I really appreciate your help and your forum.

[Babu Periyasamy]

Hi Tomas De arco,

We are happy to hear that your problem has been resolved. Kindly get back to us if you need any further assistance.

[Tomas De arco]

Hi friends, let me ask you a question, what should I do if I want to retain the attributes also with the autofill?

actionBegin (args) {

        //Check whether action is a paste action.

        if ((args.action === 'clipboard' && args.args.eventArgs.requestType === 'paste') || args.action === 'autofill') {

            //Set the type to 'Values' to paste only the values.

            args.args.eventArgs.type = 'Values';

        }

    }

When I do this the attributes changes.

[Janakiraman Sakthivel]

Hi Tomas De arco,

We have validated your reported requirement, and you can achieve it by handling the attributes within our beforeCellUpdate event, as shown in the code snippet below. Please note that this event will trigger before any cell properties are changed in our spreadsheet.

For your reference, we have shared the sample below to achieve your requirement.

Sample: https://stackblitz.com/edit/gqrp33-utnfqs?file=index.js

CODE SNIPPET:

var isAutofill = false;

actionBegin(args) {

        // To confirm whether action is an autofill action

        if (args.action === 'autofill') {

            isAutofill = true;

        }

    },

beforeCellUpdate(args) {

        if (isAutofill) {

            var targetCell = new ej.spreadsheet.getCell(args.rowIndex, args.colIndex, spreadsheet.getActiveSheet());

            const attributes = ['attribute', 'id', 'category'];

            attributes.forEach(attr => {

                // To remove your mentioned attributes from the selected cell.

                delete args.cell[attr];

                if (targetCell[attr]) {

                    // Here, we assigned the attributes you mentioned from adjacent cells to the selected cell to maintain attribute as you expected.

                    args.cell[attr] = targetCell[attr];

                }

            });

        }

    },

    actionComplete(args) {

        if (args.action === 'autofill') {

            isAutofill = false;

        }

    }

Kindly check the suggested solution above on your end and get back to us for further validation.

[Tomas De arco]

Thank you very much for your help. It is exactly what I needed.

I suggest you to check this url that is broken in your documentation.

https://helpej2.syncfusion.com/error/?aspxerrorpath=/javascript/documentation/api/spreadsheet/beforecellupdateargs.html

The explanation of

beforecellupdateargs

[Janakiraman Sakthivel]

Hi Tomas De arco,

Thank you for your update.

We have already noted this broken link on our end. We will resolve the issue and refresh the documentation on or before June 27, 2024. As promised, we will update you once the documentation has been refreshed.

For your reference, we have shared the BeforeCellUpdateArgs details below.

Arguments	Details
cell: CellModel;	You will get the details of cell like value, style that is going to be updated on the target cell.
rowIndex: number;	You will receive the row index of the cell that is going to be updated.
colIndex: number;	You will receive the column index of the cell that is going to be updated.
sheet: string;	You will get the name of the active sheet.
cancel: boolean;	By assigning the value true to this cancel option, you can skip the current cell update action. The default value of this cancel option is false.

[Tomas De arco]

Thanks you ver much

[Babu Periyasamy]

Hi Tomas De arco,

We are glad that your query has been resolved. As per our previous update, we will inform you once we refresh the UG documentation.