dataGrid cell template with horizontal scrolling

[Pegazus Soft]

Hi,

when I want to use custom template for dropdown cell(I want to show the label instead of value)
<div>
<div>template: (formatObject) => {</div>
<div>if (!formatObject.template) {</div>
<div>if (formatObject.row.id!==-1000) {//</div>
<div>console.log(‘true ag’);</div>
<div>letbom=BomLines.filter(line=>line.id===formatObject.row.id);</div>
<div>letuom=typesInitial.filter(element=>element.id===bom[0].type);</div>
<div>if (uom.length!==0) {</div>
<div>formatObject.template=`</div>
<div><div></div>
<div><span style=”margin-right: 5px;”>${uom[0].value}</span></div>
<div><span style=”text-align: right; float:right;”>⌄</span></div>
<div></div>`;</div>
<div>}</div>
<div>} else {</div>
<div>formatObject.template=;</div>
<div>}</div>
<div>}</div>
<div>}</div>
</div>
it is working well, but I get this error on scrolling:

s.firstElementChild is null
_setTemplate@http://localhost:3000/static/js/bundle.js:68554:85
_render@http://localhost:3000/static/js/bundle.js:68998:23
render@http://localhost:3000/static/js/bundle.js:67231:44
_renderCell@http://localhost:3000/static/js/bundle.js:88750:461
_render@http://localhost:3000/static/js/bundle.js:88999:259
render@http://localhost:3000/static/js/bundle.js:88532:42
_recycle@http://localhost:3000/static/js/bundle.js:77032:21
./node_modules/smart-webcomponents-react/source/modules/smart.grid.js/5306/_horizontalScrollbarHandler/<@http://localhost:3000/static/js/bundle.js:76186:119

[Markov]

Hi,

Could you send this sample as a codesandbox or stackblitz link because it is unreadable unfortunately?

Thank you in advance!

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Pegazus Soft]

yep, here it is:

https://codesandbox.io/p/sandbox/sad-sound-tq458w

the scrollbar problem exists since I made the code between line 184-204 in App.js (template)

 

Best Regards,

Csaba

[Markov]

Hi Csaba,

The idea of the formatObject.template is to set the template once and update it afterwards with the values from the data source coming to the template function. In the provided code, the template is always set to an empty string i.e there is no reuse in the current situation. I would suggest you check this sample: https://www.htmlelements.com/react/demos/grid/column-dynamic-template-with-components/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Pegazus Soft]

hi,

no, the template is empty string depending on the row_id
<div>
<div>if (formatObject.row.id !== -1000)</div>
<div>otherwise it is set to the value
<div>
<div>${uom[0].value}</div>
<div>please check the code.</div>
</div>
<div></div>
<div>Csaba</div>
</div>
</div>
 

[Markov]

Hi Csaba,

It is missing the update functionality. Pls, check the sample I sent you.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Pegazus Soft]

Sorry, I don’t understand what is missing.

I made this based on your sample and it is working well if the screen is big enough to work without  horizontal scroll.

I just made a screencast: https://drive.google.com/file/d/1EaBBHHCJKZfkJ_vvBOpZg6VOiiLg-EYQ/view?usp=drive_link

The “Type” column is a select and I want to show the label instead of the select value.

The scrollbar is working well without the template, the template is working well without the scrollbar, but together not

 

best regards,

Csaba

[Markov]

Hi Csaba,

I create a sample with horizontal scrolling and 2 Template columns using the approach from our sample – https://codepen.io/jqwidgets/pen/JjgWQMM. Please, check it out.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts