queryselector method issue ( Custom column Validation )

[Venkatesh Babu S N]

this is my sample column obj :

allowGrouping: true

allowReordering: true

allowResizing: true

allowSearching: true

allowSorting: true

autoFit: false

disableHtmlEncode: true

edit: e {parent: t}

enableGroupByFormat: false

field: "1a7279ec-97d4-4f07-b1fb-3f8131b98bbc"

filter: {}

foreignKeyField: "1a7279ec-97d4-4f07-b1fb-3f8131b98bbc"

getEditTemplate: ƒ ()

getFilterTemplate: ƒ ()

headerText: "dcname"

index: 1

parent: t {isRendered: false, isComplexArraySetter: false, isServerRendered: false, allowServerDataBinding: false, isProtectedOnChange: false, …}

showColumnMenu: true

showInColumnChooser: true

sortDirection: "Descending"

toJSON: ƒ ()

type: "string"

uid: "grid-column1"

valueAccessor: ƒ p(e,t,i)

visible: true

width: "auto"

and this is my sample data :

1a7279ec-97d4-4f07-b1fb-3f8131b98bbc: "customer"

1a7279ec-97d4-4f07-b1fb-3f8131b98bbc_OLD: "customer"

5c260c55-f333-49a8-bf5c-cabb5e4a9b6b: "customerdesc"

5c260c55-f333-49a8-bf5c-cabb5e4a9b6b_OLD: "customerdesc"

1517b5d9-30d5-4d5c-9f97-805eca6526a6: "customerbkey"

1517b5d9-30d5-4d5c-9f97-805eca6526a6_OLD: "customerbkey"

b6065e6c-2829-4e52-a7e8-424ba03859cc: "1"

b6065e6c-2829-4e52-a7e8-424ba03859cc_OLD: "1"

Since here few field names are starting with digits and internally grid allocates these field names as dom element ID and also internally grid uses queryselector method to get these elements I am getting below exception :

edit.js:980 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#1517b5d9-30d5-4d5c-9f97-805eca6526a6_Error' is not a valid selector

AsquerySelectormethod uses CSS3 selectors for querying the DOM and CSS3 doesn't support ID selectors that start with a digit can you guys provide a solution for this in grid.

[Rajapandiyan Settu]

Hi Venkatesh, 

Thanks for contacting Syncfusion support. 

We have validated your query at our end. By default, in our EJ2 Grid component the field name must be a valid JavaScript identifier, the first character must be an alphabet and should not contain spaces, special characters and numbers etc., So please use appropriate field names in the Grid column. Find the below API link for your reference. 

 

API Link: https://ej2.syncfusion.com/react/documentation/api/grid/column/#field  

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S