Using the DataFormatString on a BoundDataField for a String

I would like to format a BoundDataField to show a number with dashes in the middle, much like a Social Security Number.  I have tried multiple Format Strings and none work.

I am able to do this in the Initialize Row Method, but it seems like a bad idea.  In this case, I am not saving the field to the database on Edit, so it won’t affect my process, but if I were I would need to strip out the dashes before saving.

Dim sUnformattedNDC As String
Dim sFormattedNDC As String
sUnformattedNDC = e.Row.Items.FindItemByKey(“NDC”).Text
sFormattedNDC = sUnformattedNDC.Substring(0, 5) & “-” & sUnformattedNDC.Substring(5, 4) & “-” & sUnformattedNDC.Substring(9, 2)
e.Row.Items.FindItemByKey(“NDC”).Text = sFormattedNDC

Can anyone tell me how I could use the DataFormatString of the BoundDataField to accomplish this?

Thank you,

John

Hello John,

Setting the DataFormatString to “{0:###-##-####}”) or “{0:000-00-0000}”), should apply the correct formatting, however I found an issue with updating the value not being reflected on the format, which I would have to investigate further.

The approach that you have mentioned with using the InitializeRow and setting the Text property of the cell is actually the recommended one, because the Text value would change the way the cell test is displayed, however the Value property of the cell would not be changed, so there is no need to change the value after placing the “-” between the numbers. This could be checked by either entering edit mode on the cell or if you place a breakpoint while debugging. For example, if the value is 123456789 the text will be displayed as 123-45-6789, however the value is still being persisted as 123456789.

The code for the InitializeRow should be similar to the one below:

 

protected void WebDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
        {
            e.Row.Items.FindItemByKey("SSN").Text = e.Row.Items.FindItemByKey("SSN").Value.ToString().Insert(5, "-").Insert(3, "-");           
        }

In addition to this the CellValueChanged client-side event could be used to apply the formatting, when the user changes the value of a cell, its text property could be set to a similar formatting with a help of a function that applies the format. This is demonstrated with the JavaScript code below:

 

function formatSocialSecurity(val) {
            val = val.toString();
            val = val.replace(/\D/g, '');
            val = val.replace(/^(\d{3})/, '$1-');
            val = val.replace(/-(\d{2})/, '-$1-');
            val = val.replace(/(\d)-(\d{4}).*/, '$1-$2');
            return val;
        }  

 function CellValueChanged(sender, e) {
            var cell = e.get_cell();
            var value = cell.get_value();
            if (cell.get_column().get_key() === "SSN") {               
                cell.set_text(formatSocialSecurity(value));
            }

  }

I am also attaching a small sample that demonstrates what I have explained above.

Please test it on your side and let me know if you have any questions.

Regards,Ivan Kitanov

 

Attachments:

1. ColumnFormatStringSSN.zip