Question
Texas Commission On Environmental Quality
US
Last activity: 29 Aug 2018 15:07 EDT
Change Font style and size of a Categorized column in Repeating Grid Layout
Hello,
Hope everybody is doing good.
I have a requirement where I have to categorize the result by particular column in a Repeating Grid Layout. I have noticed that once a column has been categorized, it sets the font style to default and it doesn't take any value in Cell inline style.I want my categorized column value font to be bigger than the rest of the records displayed under that category.
I am attaching the screenshots here so that it clarifies my problem. Here you can see that it doesn't take any values from cell inline style. i.e., font-size: 10pt; font-weight: bold; etc.
Can you please help me resolving this issue?
Thanks in advance for your help.
Pegasystems Inc.
IN
Hello Arpan,
You can do that in two ways-
Approach 1 -
- Create a custom style in your skin with the required styles (font family,size,weight,style etc)
- Add that custom class to the cell read-write and cell read-only classes for that particular label
- You can find a sample in UI Gallery - Categorize Grid section
Approach 2 -
In the UserWorkForm/your stylesheet add code snippet as shown below:
<style>
tr.grid-categorize-header .grid-content {
font-family: Arial !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 10px !important;
}
</style>
Hope this helps.
Regards,
Mounika
Texas Commission On Environmental Quality
US
Hello,
Thanks for your response.
For Approach 1, I have looked at Category Grid in UI Gallery Sample and tried to find code for the custom classes "dark_background_label_dataLabelWrite" and "dark_background_label_dataLabelRead". I want to use this code to define custom class in my Ruleset.
For Approach 2, I have done what is mentioned here, but it doesn't seem to work. It still display text as earlier. Apart from <Style> tag, do I need to add any extra code, I have created UserWorkForm in my ruleset and pasted a code that you provided and saved it.
I would also like to mention that I want to display Cell value in the customized font and not the Label.
Awaiting your response. Thanks again.
Pegasystems Inc.
IN
Hello Arpan,
Approach 1: If you want to check the existing code for the custom classes "dark_background_label_dataLabelWrite" and "dark_background_label_dataLabelRead", you can check them in the
workform_pzdesignerstudio, workform_pyuigallery71 css text files. But in order to use them, kindly create the same in your custom stylesheet rule, so as to not override the existing OOTB functionality. Steps needed to be done-> Create a css text file in your ruleset(if you do not have any existing stylesheets), add the required css settings in to custom class, add the custom class to the cell read-write and cell read-only classes for that particular label, add that css text file to your harness under scripts & styles tab (Stylesheets section)
Approach 2: UserWorkForm rule is an available rule. Could you please save as that to your ruleset instead of creating one.
Hope this gives more clarity on the same.
Best Regards,
Mounika
Texas Commission On Environmental Quality
US
Thanks Mounika for the clarification.
I will try this approach and update if things workout. If not, then I will attach step by step screenshots for your reference.
Regards,
Arpan Parikh
Texas Commission On Environmental Quality
US
Hello Mounika,
I have tried approach 2 as suggested and placed attached code in the UserWorkForm in my ruleset. It does not work
Kindly let me know if I have to add other code as well and also if I am placing the code in a correct manner.
Meanwhile I am working on approach 1.
Regards,
Arpan Parikh
Pegasystems Inc.
IN
Could you please provide screenshots of the same? (After the changes have been added).
Also, have you tried inspecting the column (F12) ?
Texas Commission On Environmental Quality
US
Hello Mounika,
I have below code in UserWorkForm as you suggested:
<style>
tr.grid-categorize-header .grid-content {
font-family: Arial !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 10px !important;
}
</style>
The other approach I tried is to upload css file with below code in the Binary File section. I am attaching CSS file for your reference. Here I have attached .txt file due to restrictions. original file has .css extension.
I am calling classes defined in this css file into my as shown in the .jpg screenshot.
Kindly let me know if anything is missing.
Hello Mounika,
I have below code in UserWorkForm as you suggested:
<style>
tr.grid-categorize-header .grid-content {
font-family: Arial !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 10px !important;
}
</style>
The other approach I tried is to upload css file with below code in the Binary File section. I am attaching CSS file for your reference. Here I have attached .txt file due to restrictions. original file has .css extension.
I am calling classes defined in this css file into my as shown in the .jpg screenshot.
Kindly let me know if anything is missing.
Pegasystems Inc.
IN
Could you please provide screenshots of the same? (After the changes have been added). Try checking use case after adding !important to every style.
Also, have you tried inspecting the column (F12) ?
Pegasystems Inc.
US
Hi Arpan,
Can you try using Developers tools and apply the css there. Once it is working you can create the write the same in userworkform. You can also check whether the css suggested by Mounika earlier is getting applied or not.
Regards.
Rachit
Texas Commission On Environmental Quality
US
I have responded to Mounika's comments and awaiting her reply. I can try your approach and respond back.
Thanks.