View Full Version : [CLOSED] Converting displayed values to not show quote marks in TreePanel

Apr 16, 2020, 10:32 PM
We just had to alter our C# controller to explicitly wrap a text value to have quote marks, otherwise it was being discarded as invalid JSON and the TreePanel would be blank.

We therefore added quotes forcibly in C# Like this:
"\"" + myNode.AssyRev.Trim() + "\""

This works to make our code work OK even with values like 01 or 03 that were causing the app to break.

Unfortunately, this means the TreePanel displays the values literally *with* the quote marks "03".

Is there a way to handle this server side OR client side so that the values with leading zeroes pass to the client properly but don't actually display the quote marks?

The model on the client side defines the field as a string, and the C# builder for the node is passing a string:

newNode.CustomAttributes.Add(new ConfigItem("rev", myNode.AssyRev.Trim())); Note: AssyRev is a string.
(Old version before the adding literal quote marks.)

Thanks for your help!

Apr 17, 2020, 12:44 PM
Hello @rgraham!

You could pass values as 1 or 3 instead of the padded ones (i.e. pass them as integers if that's what they are) and then use a client-side formatter to pad the number the way you need. So, you won't need to parse the numbers as a string with quotes.

There might be something parsing the 03 zero-padded string as an int at some point; and this could also, instead of forcing quotes and re-formatting it later, just ensure it is handled as a string, but I'm not sure how exactly your scenario should be to try some things at my side and properly advise about it.

Last, you could still just keep the way you changed it and remove the quotes with a renderer, client-side, if that suits you. We have several examples using renderer in Examples Explorer, notably with grid panels, where values are posted as float/double numbers in the grid's internal stores then formatted as a monetary value or a percentile.

I will not point any samples now, but you could start by checking some tree examples, then tree grids, and then grid panels. If you still don't get how to handle the renderers, let us know; we will try to show some relevant examples. Fill us in with more details on your scenario if you feel it would help us be able to more accurately reproduce what you get there and provide useful response.

Hope this helps!

Apr 17, 2020, 4:26 PM
Thank you for your help Fabricio,

We can't throw away the leading zero on these "revision" values as there could be both a revision "3" and a revision "03"

I found Renderer examples for grids and other components but not for TreePanel.

I must restart my pc, will check back here in a few minutes. Thank you.

Apr 17, 2020, 5:51 PM
Got it Fabricio!

Add renderer to column:

DataIndex="rev" >
<Renderer Fn="renderRevision" />

Add function:

var renderRevision = function(value){
return Ext.String.format(value.replace(/'/g, ''));

Problem solved!

Thank you!

Apr 17, 2020, 7:46 PM
Hello @rgraham!

Nice, you "nailed it"! Glad the directions provided helped you figure out a way to have your page working the way you needed it. I knew a renderer would be the way to go but it depended on how your page was structured. Seems you are using something similar to a what we call a Tree Grid after all.

Thanks for sharing the outcome!