How to add dollar sign for attribute which is present in data grid table

Hey, I have one data grid which contains limits in dollar currency , when  I click on add button then which shows popup and where I will add limit name and limit value and limits value are in dollar currency. which shows dollar in correct way I added custom css  for showing dollar. but when I submit the form then its not showing dollars in a table. limits value are shown in dollar and which is correctly. but when I save it then its not showing dollar infront of limits value. when I add custom class for limits value like these is my data grid    and when I run my  app then its not showing dollar in right way it look like  dollar appends above the limit value header so how can I add dollar infront of limit value like ($1222222.00). and one more issue when I off the show lable then its not showing dollar in input boxes.
2 answers

What you need to do is get a better idea of what the widget’s DOM looks like, so that you can properly target the necessary elements to achieve what you want to do. Use your browser’s inspector to do so (F12 in Chrome).

What you need to keep in mind is that the structure of a datagrid differs from any other input field. So simply reusing the class you created for the input field will not work.

In your situation you already applied the class to the column correctly. Which means you should be able to target it in your SCSS with something like 

.mx-datagrid tbody td.currencyTextbox .mx-datagrid-data-wrapper:before {
  content: "$";

The :before pseudo enables you to alter stuff at the beginning of the element



Use Bootstrap Input Addons widget from app store, without doing an work around on custom stylings. 

Else, If you want to achieve this by adding custom stylings , then check the following:

Update scss file and compile it, {

content: "$ ";


and then map the gridDollarCurreny class name in the respected grid column.

Hope this helps.