Messages

1

Help for ParamQuery Pro / custom summation?

« on: August 24, 2024, 01:29:31 am »

I am going to try and explain this as best I can and provide an image that I hope will help explain it as well.  In each cell of my grid I have some custom html that actually has two different values in it.  If you look at the image you will see 10 /10% in row 5.  The second value is always static; it is set when the grid is loaded and cannot be changed by the user.  However, the first value can be changed. Using the example above a user could type in 37 and you would see 37/10%.  What I need help with is to sum all of those first values and display that total in another cell.  In the image example, if I have two values on the same row 10/10% and 17/20%, in one column I would sum the first values (27) and in another column I would have the second value sum (30).

2

Help for ParamQuery Pro / Text rotation in row header

« on: August 07, 2024, 05:45:10 pm »

I am having difficulty getting text rotation to work properly. I will try to explain this as best as I can and show some results of what I am seeing.

First, if I rotate the text 90 degrees, it looks like it works, but upon closer inspection, it is not quite right. Here is the CSS I am using:

.rotate .pq-title-span {
    display: inline-flex;
    height: 100px;
    width: 100%;
    text-align: left;
    transform-origin: 50% 20%;
    transform: rotate(90deg);
    font-size: 11px;
    font-family: '3M Circular TT', sans-serif;
    border: 1px solid red; /* Added border for visibility */
    background-color: lightyellow; /* Added background color for visibility */
}


It appears to work as a side effect and not properly. For the header, I am making the area yellow with a red border to show where it is. I don't have a place to put public images to display what I am seeing, so I will attempt to describe it. The header cell is tall and narrow; when it is rotated 90 degrees, the area becomes wide and short. The text then bleeds out of the rotated area. Visually, this looks fine, but if you truncate the text, it typically cuts off the longer header. However, with the current settings, if we leave the background the same color as the container, it visually looks fine.

Now, if we rotate it 270 degrees, we get a similar result, but the text gets truncated because there is no more room in the container that the header is stored in. I am using the exact same CSS, just changing the rotation to 270 degrees. I have also played with the transform-origin, and while it gets somewhat better, I can never get it to use the entire area of the object containing it.

If I do a simple example in a static HTML page with the following CSS:

        .rotate {
            position: relative; /* To contain the absolutely positioned span */
            display: flex;
            align-items: center; /* Center content vertically */
            justify-content: center; /* Center content horizontally */
            width: 50px; /* Example width */
            height: 100px; /* Example height */
            border: 1px solid #ddd; /* Just for visual aid */
        }

            .rotate .pq-title-span {
                display: inline-block;
                white-space: nowrap; /* Prevents text wrapping */
                overflow: hidden; /* Hide overflowing text */
                text-overflow: ellipsis; /* Add ellipsis to truncated text */
                transform-origin: center; /* Pivot point at the center */
                transform: rotate(270deg); /* Rotate text 270 degrees counterclockwise */
                text-align: center; /* Center text horizontally */
                font-size: 10px;
                font-family: '3M Circular TT', sans-serif;
                position: absolute;
                left: 50%; /* Center horizontally */
                top: 50%; /* Center vertically */
                transform: translate(-50%, -50%) rotate(270deg); /* Adjust position after rotation */
            }

It displays as I would expect. However, if I put that same (or similar) CSS in for the grid, I don't get the same behavior.

What can be done to make the 270-degree rotation behave better?

I can provide images or other information if you tell me how to get it to you. I did not see a way to upload a file, just to add links to items on the Internet.

3

Help for ParamQuery Pro / Custom formatting in column header

« on: July 25, 2024, 04:25:10 am »

Is there a way to do custom html/css in a column header in the grid.

                                var row = {
                                    title: studentname ,
                                    align: "center",
                                    colModel: colDT
                                }

This would put the student name in for the colum header.  I would like to put more information in the header.  Put in something like name and then underneath email and so on.

Something like:

Name
email
phone number

and add some custom css to the various values.

I hope that makes sense.