We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Template (dialog) editing of grid data shows empty text fields as undefined

When I edit a grid row (using a dialog template), any text fields that are initially blank in the local data JSON are changed to undefined upon clicking save in the edit dialog, even when no edits are made.  If the record is edited a second time, the field text is displayed as "undefined" AND the JSON is changed to the TEXT string of "undefined" (not the null privative) upon save.

So my local data object goes through these iterations upon two edit cycles.

{id: 1, zip: ""}  ->  {id:1, zip: undefined}  ->  {id:1, zip: "undefined"}

I believe that the issue is in the template engine code that sets the inputs initial value.  I use something like the following in my editing template:

<input id="HallZip" name="zip" type="text" value="${if(isAdd)}''${else}${zip}${/if}" />

Why does ${zip} evaluate to "undefined"?  Now, for this example, the value attribute is wrapped in double quotes.  I did this because the field value may contain an embedded space, e.g. "ABC 123".  If I leave off the quotes, the value is set to "ABC" instead of "ABC 123".  

What is the best way to deal with empty fields and fields with embedded spaces?

3 Replies

JO John November 20, 2022 06:32 PM

I think I figured out the issue..  Adding a test condition for undefined resolved my issue.

<input id="HallZip" name="zip" type="text" value="${if(isAdd || zip===undefined)}''${else}${zip}${/if}" />

JO John November 20, 2022 06:40 PM

Or actually, this worked better:

<input id="HallZip" name="zip" type="text" value="${if(!isAdd && zip!=undefined)}${zip}${/if}" />

RS Rajapandiyan Settu Syncfusion Team November 22, 2022 04:57 AM

Hi John,

We glad to hear that you have resolved the reported problem.

Please get back to us if you need further assistance.


Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon