1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. few questionon treeGrid

few questionon treeGrid

scripts sample like this

Image_4151_1765439004580

  1. when I click edit there is nothing happen
  2. how to let column readonly, no matter click Add or Edit don't want a column can input, that will be input on controller
  3. when I click Upload it will open multiple file, when choosed it need auto create child on which row I selected

      4. when I add a row, then use delete but delete is not work


5 Replies
SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team December 15, 2025 08:16 AM UTC

Hi Harry,
Greetings from Syncfusion support!
We reviewed your questions and the shared code snippet:
1. Edit button not working
The Edit action works only when a row is selected. Please select a row first, then click Edit.
Also, ensure you have a column marked as IsPrimaryKey="true" (required for CRUD operations).
2. Make a column read-only in Add or Edit
To prevent user input for a column in both Add and Edit modes, set:
<TreeGridColumn Field="ExternalCode" AllowEditing="false" AllowAdding="false" />
This keeps the column visible but non-editable. You can still assign its value in your controller/service logic.
3. Upload button click
Please confirm the exact functionality you expect for the upload button—specifically, adding a child for the selected parent row. Kindly share more details so we can assist further.
4. Delete working fine for newly added record
For reference, please check this sample:
StackBlitz Example
If you still face any issues, please get back to us.share the details on update button further.
Regards,
Sreedhar

HA harry December 17, 2025 01:03 AM UTC

I want make a view like this

Image_9797_1765932222331


  1. I already selected a row but can't edit this row, but I set PrimaryKey column is unvisible, is that effect?

      2. that's work thank you

      3. when I  selected folder can use upload button to upload files, then files will show under the folder

      4.for  StackBlitz Example this example, if I add a new row ,I type nothing or only type [Task Name], this row can't delete


SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team December 22, 2025 01:37 PM UTC

Hi Harry,

Query 1:Edit functionality
We have checked the editing behavior using a primary key, and selecting a row before clicking Edit works fine in Row Editing mode.
Could you please confirm if you are using Cell Editing mode? This scenario is not supported for cell editing.

For reference, please check this sample: E9swq2jq (duplicated) - StackBlitz

If you are still facing the issue, please share an issue reproducible sample which will be helpful for us to provide a better solution as early as possible.

Query 2:Upload functionality
We have prepared a sample according to your requirement when select a folder and click upload -file name gets added as child.

 

Code snippet:

//upload component

const uploadObj = new ej.inputs.Uploader({

  autoUpload: false,          // we only list files; uploading to server is optional

  multiple: true,             // <-- allow multiple file selection

  // OPTIONAL: wire to your backend if needed

  asyncSettings: {

    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',

    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'

  },

  // When files are chosen, create child rows under the selected folder

  selected: function (e) {

    const folder = __currentUploadFolder || treeGridObj.getSelectedRecords()[0];

    if (!folder) return;

 

    // Add each selected file as a child row

    (e.filesData || []).forEach(function (fd) {

      const child = {

        taskID: newId(),           // REQUIRED for CRUD

        taskName: fd.name,

        size: formatSize(fd.size),

        modified: new Date()

      };

 

      // Insert explicitly as CHILD of the selected row

      treeGridObj.addRecord(child, undefined, 'Child');

    });

 

    // Auto-expand the selected folder so user sees new children

    const selectedIndex = treeGridObj.getSelectedRowIndexes()[0];

    if (typeof selectedIndex === 'number') {

      const rowEl = treeGridObj.getRows()[selectedIndex];

      if (rowEl) {

        treeGridObj.expandRow(rowEl);

      }

    }

 

    // Clear the pointer so we always use fresh selection next time

    __currentUploadFolder = null;

  },

  failure: function (args) {

    console.error('Upload failed:', args);

  }

});

 

 

uploadObj.appendTo('#fileupload');

 

 

// toolbarclick function

 toolbarClick: function (args) {

    if (args.item.id === 'Upload') {

      const parent = treeGridObj.getSelectedRecords()[0];

      if (!parent) return;

      if (parent.level !== 0) return; // safety (already disabled otherwise)

 

      // Remember which row to attach children to

      __currentUploadFolder = parent;

 

      // Open the native file chooser (multi-file)

      if (uploadObj && uploadObj.element) {

        uploadObj.element.click();

      } else {

        // Fallback: native input in case element isn’t available

        document.getElementById('fileupload').click();

      }

    }

  }

 

Sample:Ig24whcw (duplicated) - StackBlitz

 

Refer Upload component documentation:Es5 getting started with EJ2 JavaScript Uploader control | Syncfusion

 

Query 3:Delete action issue

The delete action is not working in the shared sample because CRUD operations rely on the primary key value. In your case, the TaskID (primary key field) is missing when deleting.

 

To resolve this, you need to provide a value for the primary key column either in the UI or programmatically while saving. Once the primary key is set, the delete action will work as expected.

 

If you still have any issues get back to us.

Regards,

Sreedhar


HA harry January 5, 2026 04:28 AM UTC

HI 

When I use the example  Ig24whcw (duplicated) - StackBlitz , if I upload two files, I encounter the following error when retrieving the dataSource. It seems the level is incorrect.

Image_2959_1767587091343


SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team January 5, 2026 10:54 AM UTC

Hi Harry,

We have checked the issue of child record not updating correctly when uploading more than one selected file. We have handled this by passing an array of objects in the addRecord method and also used a customized method "fingerprint" for skip re-processing if the same selection fires twice to prevent duplication when uploading.

Please find the code snippet below:

Code Snippet:

//selected event 

selected: function (e) {

const folder = __currentUploadFolder || treeGridObj.getSelectedRecords()[0];

if (!folder) return;

// --- Guard: prevent double handling of the same selection ---

const fp = fingerprint(e.filesData);

if (fp && fp === lastSelectionHash) {

__currentUploadFolder = null;

return;

}

lastSelectionHash = fp;

if (isProcessingSelection) return; // re-entrancy guard

isProcessingSelection = true;

try {

const parentKey = folder.taskID;

// Build children array from selected files (dedupe by name)

const seenNames = new Set();

const children = (e.filesData || [])

.filter(fd => {

if (seenNames.has(fd.name)) return false;

seenNames.add(fd.name);

return true;

})

.map(fd => ({

taskID: newId(), // unique PK

taskName: fd.name,

size: formatSize(fd.size),

modified: new Date()

}));

if (!children.length) {

__currentUploadFolder = null;

return;

}

// Find current parent row index and add ALL children in one call

const parentIndex = treeGridObj.grid.getRowIndexByPrimaryKey(parentKey);

treeGridObj.addRecord(children, parentIndex, 'Child'); // array insert

} finally {

isProcessingSelection = false;

__currentUploadFolder = null;

}

},

 

//fingerprint function to skip re-processing if the same selection fires twice

function fingerprint(filesData) {

  return (filesData || [])

    .map((fd) => `${fd.name}:${fd.size}`)

    .sort()

    .join('|');

}

 

 

Passing an array to addRecord ensures all selected files are inserted as child rows in a single operation, preserving hierarchy and preventing incorrect levels when multiple files are uploaded.

Regards,

Sreedhar.

 


Loader.
Up arrow icon