Siebel Open UI – Revival Of The Record Selector (The Sequel)

An initial attempt to bring back the record selector, worked out pretty well. As initial attempt :-). But it did have some deficits.

  • Impossible to distinguish the last selected record. This is especially useful while using the out-of-the-box merge functionality. The last record selected will become the survivor record;
  • The picklist, mvg or calculator icon disappears for the first list column;
  • Cosmetic: vertical alignment of the selector once a list control gets entered.

The screenshot below shows the more appropriate appearance of the drop-down glyph. In the initial attempt, it got pushed out as the list control grew too large. I had to tweak a bit, and resolved it using a calculated width value. The 20px equals the amount of space I added as text-indent too.

width: calc(100% – 20px) !important;

I changed the appearance for the last (or only…) record selected. Choose one you like. It also aligns now vertically. Obviously the vertical spacing might need to be changed per case, depending on the row-height for the list applets. For practical reasons in most cases the row-height should be reduced from the out-of-the-box look and feel. To fix the issue with the pushed out picklist, mvg or any other type of icon, I adjusted the margin by again the same fixed number of pixels I added as text-ident. It requires a bit of fiddling with CSS is you are not fully comfortable in this area like me.

tr.ui-row-ltr > td[role=’gridcell’]:nth-child(2) > span { /* Record selector */ margin: 0 0 0 -49px; /* from -29px to -49px */ }


The following screenshot shows once multiple records have been selected.


So, complete CSS snippet required has grown a bit to accommodate the behavior.

 You can grab the complete snippet of CSS here. Enjoy! – Jeroen


3 thoughts on “Siebel Open UI – Revival Of The Record Selector (The Sequel)

  1. Hi Jeroen,

    great news!!

    It seems like you solved an “enhancement request” which was opened in December 2013 🙂

    Thanks lot for sharing your work with the Siebel public.
    I guess you spent a couple of hours to get this done.

    I had a quick test – it works really well and looks pretty good!

    I just noticed one more thing (sorry 😉

    In case the first column is a checkbox, the checkbox flag disappears (even when the flag actually has a value of “Y”). it seems to happen because the “checked” icon is assigned a margin of -49 and is moved to the left, outside of the applet.
    I fiddled around and tried to add a rule especially for checkboxes:

    tr.ui-row-ltr > td[role=’gridcell’]:nth-child(2) > span.siebui-icon-checkbox-checked { /* Record selector */
    margin: auto;

    seems better then, but, when you click into a checkbox, the icon is still not at the same position like if you click outside of the cell. That seems to be caused by the original span.siebui-icon-checkbox-checked becoming a span without any class …. argh!!

    Maybe that is something to think about … ???
    Anyway, near perfect and thanks a lot for sharing 🙂


  2. Hi Jeroen,

    it’s me again 🙂

    I really like your solution, but fiddling around with it, another idea came to my mind.

    Instead of taking care of all possible control types and their various issues, why not just change the color of the “last selected” row to some darker blue, while keeping the rest in light blue (or whichever color you prefer).

    Suggestion for custom-theme.css:

    /* change color of row with mouse-over to some darker blue */
    .no-touch .ui-jqgrid .ui-jqgrid-btable tr:hover td {
    background-color: #BFDAE8!important;
    /* change color of last selected row to some darker blue */
    .no-touch .ui-jqgrid .ui-jqgrid-btable tr.selected-row td {
    background-color: #BFDAE8!important;

    Assuming the vanilla Aurora theme is used, those 2 rules would makes the last selected record slightly darker than all the rest, which are kept in light blue, and therefore easily distinguishable in all kind of list / mvg / popup list applets.

    In the end it’s really a matter of taste if you prefer an icon, or a color separation.

    Thank’s for everything.


  3. Hi Jeroen
    I have done the same config as suggested , thanks for the solution. I noticed one thing that when the list view loads by default , its list applet shall have the selector on the first record which is not happening. I tried to fiddle around but it works in Chrome , Firefox but not in IE11. Any idea how to achieve this ?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s