I have already written posts on how to rotate the horizontal scrollbar to look like a vertical scroll bar. But still this does not look and feel like a scrollbar. So I tried making to have a complete scrollbar. Here are my findings.
I tried modifying the jqgridrenderer.js file to have jqgrid to have virtual scrolling. But the siebel applets are designed to hold only the html number of rows records at a time. Each time we click on next recordset button, it fetches the next 10 records. If I comment the line $("#pager_" + placeHolder + "_right div").hide(); in jqgridrenderer.js, I see view 1-10 of 10 records not the full record count in the applet. This means that the applet has 10 records in the grid. I also commented $("#sp_1_pager_" + placeHolder).parent().css("
This concludes that virtual scrolling is not possible. One way we can have it is define the HTML number of rows in applet to say 500 and keep the height of applet to 10 rows only (appx 240px). You can see a scroll bar upto 500 records then you need to click on the horizontal next record set button. This is ofcourse impacting performance.
I tried to do something different. Why can't I build a scrollbar itself. It just needs to buttons and a slider bar, functioning just like a scrollbar. I have a try and finally able to crack something out. The scrollbar looks like this.
And it did work, but only just.
The idea is in PR showUI and BindEvents method, add the html to show three images (up arrow, down arrow and slider bar). On click of the up and down arrows, move the slider up and down. The problem is that how much distance should the slider move. As of now, I moved the slider to middle of the scrollbar and left it there if there are any more records in previous set or next set. If there are none, I moved the slider to either end if the scrollbar.
Here is the PR file. Note that the images are also need for this. Check the video of how this looks here.
Update: PR file for IP 2014 and above is here. Thanks to Sri for sharing the updated PR file.
Cheers!!
I tried modifying the jqgridrenderer.js file to have jqgrid to have virtual scrolling. But the siebel applets are designed to hold only the html number of rows records at a time. Each time we click on next recordset button, it fetches the next 10 records. If I comment the line $("#pager_" + placeHolder + "_right div").hide(); in jqgridrenderer.js, I see view 1-10 of 10 records not the full record count in the applet. This means that the applet has 10 records in the grid. I also commented $("#sp_1_pager_" + placeHolder).parent().css("
This concludes that virtual scrolling is not possible. One way we can have it is define the HTML number of rows in applet to say 500 and keep the height of applet to 10 rows only (appx 240px). You can see a scroll bar upto 500 records then you need to click on the horizontal next record set button. This is ofcourse impacting performance.
I tried to do something different. Why can't I build a scrollbar itself. It just needs to buttons and a slider bar, functioning just like a scrollbar. I have a try and finally able to crack something out. The scrollbar looks like this.
And it did work, but only just.
The idea is in PR showUI and BindEvents method, add the html to show three images (up arrow, down arrow and slider bar). On click of the up and down arrows, move the slider up and down. The problem is that how much distance should the slider move. As of now, I moved the slider to middle of the scrollbar and left it there if there are any more records in previous set or next set. If there are none, I moved the slider to either end if the scrollbar.
Here is the PR file. Note that the images are also need for this. Check the video of how this looks here.
Update: PR file for IP 2014 and above is here. Thanks to Sri for sharing the updated PR file.
Cheers!!
Hi Khadar,
ReplyDeleteThis article seems helpful to me. One thing that I want to ask you about the location of Files,,, You didn't mention where I have to place the "queypr.js" file,,, Also mention the path of folder where images will be placed.
Thanks in Advance.
Regards,
Rabia
Hi Khadar,
ReplyDeleteThis article seems helpful to me. One thing that I want to ask you about the location of Files,,, You didn't mention where I have to place the "queypr.js" file,,, Also mention the path of folder where images will be placed.
Thanks in Advance.
Regards,
Rabia Bashir
Hi
DeleteYou need to place the file in \Client\PUBLIC\enu\23030\SCRIPTS\siebel\custom folder if you are using 8.1.1.11. The location is mentioned in manifest administration to associate the file as PR.
Regards,
Khadar
Could you please share & explain where to edit the css to make space for the vertical scroll bar
DeleteThis is really great work!! Thanks for posting. How this will work in Application level? When I try to use this, the scroll bar coming down to list applet. Appreciate your help!!!
ReplyDeleteThis will work by adding DEFAULT LIST APPLET in Manifest file
ReplyDeleteThank you Khadar.
ReplyDeleteI tried using this same code in IP2014. But instead of scrollbar appearing on the right of the list applet, the scroll bar is showing up below the list applet.
I even added the "BindData" event in the code and copied the ShowUI contents into it but that too didn't work.
Appreciate your help. Thanks.
Hi,
DeleteIn IP 2015, resize function is getting called where it sets the size of bdiv to full.
You can override the resize function to get the scroll on the side of applet body.
One way is to go to jqgridrenderer file and in the function jqgridrenderer.prototype.resize method, check the DomUtils.Write function. After the script, write script to set bdiv to 40 px less than 100%.
Another easy way is to write CSS to set the jqgrid bdiv to 100% - 40px. This makes up room to accommodate the scroll bar.
This comment has been removed by the author.
DeleteKhadar/Sri,
DeleteI am able to get scroll bar on right by updating ui.jqgrid.css file as follows:
.ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left; width: calc(100% - 20px)!important;}
I added width calc.
However, I am not able to override default width for ui-jqgrid-bdiv in my custom css file that I want to use for a particular list applet.
In any case, thank you very much for this slick vertical scroll bar solution.
Hira
Hello Hira,
DeleteThank you for your update.
Is your list applet loading correctly the first time you load the application after doing a clear cache? This is the place I am currently stuck. First time after a clear cache, my applet shows blank but after I reload the page, everything starts working fine.
Steps I followed are:
a) Used Khadar's querypr.js file as is in IP2014 and saved in custom folder.
b) Created Manifest Files and Manifest Administration entries for the JS mapping to my applet.
c) Modified jqgridrenderer.js's prototype.resize() event to reduce the bdiv width as per Khadar's suggestion so that scrollbar comes to right.
Thanks.
Hi Hira,
DeleteIf you want this for a particular list applet using CSS, use below CSS. This will update for only one applet with particular title.
div["title=Applet title"] .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left; width: calc(100% - 20px)!important;}
Set a unique title for this applet and when the applet renders check for this title. In elements check for id like s_S_A1_div or s_S_A2_div for this applet. copy the title property of this and use the CSS. Example:
div["title=Accounts List Applet"] .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left; width: calc(100% - 20px)!important;}
Sri,
Do you see any console errors or logs when the applet loads the first time? It is working for me and I see no issues. We dont have to do the Resize code if we can use CSS as Hira suggested. This is what I am doing currently :)
Thanks
Hi Sri,
DeletePlease do not modify anything in jqgridrenderer file. It can affect your list applets application wide. You can use querypr file to override the jqgridrenderer functionality. Add below code to custom pr.
querypr.prototype.resize = function() {
copy the jqgridrenderer resize code here and add custom code.
}
Hi Khadar,
DeleteThank you for your response.
Its working for me too now. When you mentioned that its working for you, I realized that I am doing something wrong. So I revisited the steps I had performed and the issue was in the vanilla JS files I had included in the Manifest Administration under my test applet.
Actually in one of the google blogs it was mentioned that for a list applet to be rendered correctly (to avoid bodyless rendering), I should also include some additional vanilla files in the Manifest Administration of the applet such as siebel/listapplet.js, siebel/jqgridrenderer.js, 3rdParty/jqgrid-ext.js, etc. Looks like this was causing the issue. Because once I removed all the additional JS files and left only querypr.js, my applet is now showing correctly and the scrollbar too is working... Yeepeeee!!!
Apart from querypr.js, did you have to include any vanilla files in Admin - Application -> Manifest Files and Manifest Administration?
I will now try to get the scrollbar to work for all list applet across the application.
Thanks again to you and Hira.
Regards,
Sri
Thats all you need to do!! You will be extending vanilla jqridrenderer from querypr so no extra files needed for this.
DeleteGood to know that it is working. I have extended this functionality to have continuously scroll on click and hold etc. You could try writing more script in BindEvents. Good Luck!!
I really appreciate your help and thank you very much for sharing your knowledge.
DeleteRegards,
Sri
Hi Khadar,
DeleteI have enabled the custom javascript for all list applets across application and its working perfectly, barring a small issue. If a single view has multiple list applets, the number of scrollbars are increasing for each of those applets in that view. For example, if a view has 3 list applets, then first list applet shows 1 scrollbar, second list applet shows 2 scrollbars and third list applet shows 3 scrollbars and so on. Are you seeing the same behavior?
Thanks,
Sri
Hi Sri
DeleteFrom line $('.ui-jqgrid-bdiv'), when the second applet loads, it has two jqgrid divs. You need to write code such that it adds only one scroll for one applet instance.
try this.
var sAppletId = this.GetPM().Get("GetFullId"); // it should hold value like S_A1.
replace $('.ui-jqgrid-bdiv') with $( sAppletId + ' .ui-jqgrid-bdiv') in your code.
Also in BindEvents, you need to add the code to attach events to your applet id similarly.
Thanks again Khadar. I will work on that approach.
DeleteNeed to add '#' in the variable. Instead of
Deletevar sAppletId = this.GetPM().Get("GetFullId");
use
var sAppletId = '#' + this.GetPM().Get("GetFullId");
Thank you Khadar/Hira. Was able to get it to work with multiple list applets in a single view. But there is one more small issue I encountered. If the list applet has a text area field, then the row gets expanded and the height of the applet too gets expanded but the height of scrollbar does not increase. I guess this is because the resize event is not having any code to capture the applet size and set it on the scrollbar. Any thoughts or suggestions will be helpful.
DeleteSri,
DeleteCan you please share your .js file?
Thanks,
Hira
Hi Hira,
DeleteThe issue is now resolved and the scroll bar is working on all list applets. The issue I had was a text area on the list applet had HTML Display Mode as 'DontEncodeData' which caused the weird behavior of expanding the text area by default and the list applet. I found an Oracle bug on this same behavior. Once that was set to Encode Data, the list applet size does not expand and everything is good.
Thanks again to Khadar and you.
Regards,
Sri
Hi Khadar/Hira,
DeleteThe vertical scrollbar is working beautifully but there is a side effect when I use the list column's "Lock" feature. When I click on any column header (in IP2014 or higher) and select "Lock", all following columns after the selected column get hidden.
This is happening because a regular list applet (without Lock selected) has class .ui-jqgrid .ui-jqgrid-bdiv whereas a list applet with Lock selected uses class .frozen-div .ui-jqgrid .ui-jqgrid-bdiv. Please note the overlapping of the class.
And since we are setting the width of ".ui-jqgrid .ui-jqgrid-bdiv" to 100% - 20px, when we lock a column, the overlapping of the class is expanding to the same 100% - 20px thus hiding rest of the columns.
Is there a way I can set the width of class ".ui-jqgrid .ui-jqgrid-bdiv" without impacting the class "frozen-div .ui-jqgrid .ui-jqgrid-bdiv"?
Thanks in advance,
Sri
Hi Sri
DeleteYou can write your css like this.
.ui-jqgrid.ui-jqgrid-bdiv:not(.frozen-div){width:calc(100%-20px)}
Use not operator for excluding frozen div
This comment has been removed by the author.
DeleteHi Khadar,
DeleteThank you for your help.
How to access a child class under a parent class? How can I change the width of first XYZ independently of the second XYS in below example?
div class=ABC
div class = "XYZ" /div
/div
div class=DEF ABC
div class = "XYZ" /div
/div
Also any idea about the difference between .ABC.XYZ (no space) and .ABC .XYZ (with space)?
Thanks in advance,
Sri
If I have a div xyz under abc, I can use .abc .xyz to select it. With space it searches for child, without space it looks for sam3 element with both classes. If I have div with class ="abc xyz" I will use .abc.xyz to select the element.
DeleteFor your first question, you can use css psuedo :first property. Search for this
This comment has been removed by the author.
DeleteHi Sri,
DeleteFor the benefit of other users Can you share the IP15 version of the file.
Hi Khadar,
DeleteHow can I upload my PR file to this blog? Or should I just copy paste the entire code here?
Thanks,
Sri
This comment has been removed by the author.
DeleteThis comment has been removed by the author.
ReplyDeleteHi Khadar,
ReplyDeleteThis article is really good and helpful to me and am sure for everybody else as almost all Open UI projects would have the clients complaining of not seeing a verticle scrollbar once upgrade from HI.
VScrollbar works fine for me but after going through the comments in this blog, I did try to see the behavior after locking some list columns in an applet. When I first lock the list columns, the VScroll works fine but if I navigate to a different view and come back to the current view, the "locked" applet now has 2 VScrolls instead of 1.
Do you see the same behavior? Is there something I can include in the code to avoid this?
Thanks,
Shin
Hi,
DeleteI have not tried the pr on ip 2014 or 15. For your issue, you can have a if clause to check like $('.customslider').length < 0. Add class custom slider to the append html in showui function.
Hi Shin,
DeleteI too was facing the same issue in IP14. If you go through my comments (lengthy, boring and confusing) above, you will get an idea that when we lock the list columns in an applet, a new ".frozen" section gets created whose hdiv and bdiv have the same class as the regular section. After locking the columns, do an Inspect Element to get a better understanding.
In our PR, we are using hdiv and bdiv as class and since both regular and ".frozen" section have the same class, 2 scroll bars are getting created, 1 for regular section and 1 for frozen section.
You need to filter out the ".frozen" from the ui-jqgrid-bdiv in the PR so that the scroll bar does not get added to the frozen section, which should resolve the issue.
Thanks,
Sri
Thanks Khadar, Sre. That worked!!!
DeleteShin
Can you please give the actual code that you used to fix this. We tried this but it didn't seem to work so just want to make sure.
DeleteKhadar, on 12 November, you mentioned "I have extended this functionality to have continuously scroll on click and hold etc." Is that code you can share also? Thanks!
ReplyDeleteHi Dan,
DeleteThe code is already present.Below code takes care of click and hold and navigates to records every 1sec (1000milliseconds). I have mentioned this in comments also.
$("a.prevset").mousedown(function() {
int = setInterval(performWhileMouseDownPrevSet, 1000);
}).mouseup(function() {
clearInterval(int);
});
Sorry--missed that. Thanks!
DeleteHello
ReplyDeleteCan you please provide access to the google drive link?
Thanks
Sneh
Hi Khader
ReplyDeleteVery nice post. Have a question though. We are using IP2015 and I am seeing horizantal scroll bar in LIst Applets (only in IE) and those are not present in Chrome. Where I need to check that Browser dependencies. Another note, in some of the other machines, chrome has scroll bar (horizantal). Weird! Any input would really helpful.
Hi,
DeleteIf the data in the applet exceeds the width of the browser window or container, the browser adds the scrollbar. You can check the scrollbar setting in CSS overflow property. Based on the width of your browser or resolution of your screen, the scrollbar gets added automatically.
You can try setting column width to some less values in Applet > List > List Columns - HTML Width Property. This might prevent the scrollbar. Also, you can check overflow property below.
For IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx
For Chrome: -webkit-overflow is the property.
You can check the above code in working in this video. https://www.youtube.com/watch?v=rsKfxttcGQU
Thank you for your reply. I realized that other laptops are non touch screen and mine is touch screen and that decides bringing / non bringing the scroll bar between chromes (I wasn't listening to the audio initially in your video, Sorry :))
DeleteI created VertScrollPR.js and created a entry in Manifest to bring up scroll and it works like a charm. However, after initial down scroll, the bar gets vanished. I notice that the record sets are moving in 10+ fashion, but without the actual scroll bar in it. Any thoughts?
#2: When displaying more than 1 list applet, It is not scrolling as expected from the second applet on and I do not see the nextset.png image as well. just prevset.png and scroll bar.
DeleteHi Khadar
ReplyDeleteThis article is awesome and helped me a lot. I tried to write a code under 'BindEvents' in order to move the slider after each and every click but couldn't do that. Could you please tell me the way by which I can navigate the slider. Thanks in advance .
Regards
Sunny
Hi Khadar/Sri
ReplyDeleteI am trying to write the code for continuous movement of slider after each n every click but unable to figure out what's going wrong.
If possible,Kindly share the pr file which can fix this issue.
Regards
Sunny
Hi,
ReplyDeleteI tried given code, scrollbars are working functionally, but the place of scrollbar is below list applet(on left side instead of right side) not in sync with list applet.
Hi,
ReplyDeleteyou need CSS for this. Please see above comments..
Example:
div["title=Accounts List Applet"] .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left; width: calc(100% - 20px)!important;}
Thanks Khadar for the reply.
ReplyDeleteI tried same config on 8.1.1.11, it worked perfectly.
This issue was with IP15 patchset 9, due to .ui-jqgrid-bdiv width issue.
I used the given code in my custom aurora theme previously but same result.
Later when I inspected the element, it was showing width: 1253px for class: "ui-jqgrid-bdiv".
I modified width of this class in debugger mode..and hurray...it worked.
Now, thinking why it didnt accept the same styles from custom theme.css file.
Again, thanks a lot for your kind help :)
Regards,
Sailesh
One thing, I noticed is only scroll buttons are working.
ReplyDeleteWhen tried to drag slider, nothing happened.
Slider moved only on scroll button click.
Hi,
ReplyDeleteThe issue in IP15 is discussed in previous comments. Please check. also if you download the file, you can see references to resize function. The scroll code doesn't work on slider as we didnt handle it in PR. Check for JQuery UI options to run the slider functions.
In IP 2015, resize function is getting called where it sets the size of bdiv to full.
You can override the resize function to get the scroll on the side of applet body.
One way is to go to jqgridrenderer file and in the function jqgridrenderer.prototype.resize method, check the DomUtils.Write function. After the script, write script to set bdiv to 40 px less than 100%.
Hi,
ReplyDeleteThanks, it is fixed now.
I can see scroll bars on List Applets, but on home page, it still showing scrollbar buttons and slider below list applet, and on debugger, width: calc(100% - 20px) !important is striked out.
can you check what overrides that CSS?
DeleteHello Khadar.
ReplyDeleteI did everything according this linq: https://www.youtube.com/watch?v=rsKfxttcGQU
But is not work on IP2015.
If you can explain more clear like steps.
Thank you, best regards!
Hi Khadar,
ReplyDeleteThank you so much..This post was very useful for me.
However could you please let me know how to configure the code for moving to next record or previous record? I tried using the following code:
if(pm.ExecuteMethod("CanInvokeMethod", "GoToNextRecord"))
and
if(pm.ExecuteMethod("InvokeMethod", "GoToNextRecord"))
but it is not working as expected. what method can be used to navigate to the next record?
Best Regards.
Hi,
ReplyDeleteThanks for sharing this post.
I nee to know what is the best possible way to apply this throughout the application for each Applet.
I can currently think of only custom PostLoad.js.
Can you let me know if we can leverage any other manifest option ?
Hi,
ReplyDeleteIts working as expected throughout the application on almost all the list applets but not MVG list.
None of the PR method is being invoked for MVG.
Can you please let me know if MVG requires a different manifest entry ?
What is the version you are on? While the Popup is open, enter the below line in console to get the PR used for MVG.
DeleteSiebelApp.S_App.GetActiveView().GetActiveApplet().GetPModel().GetRenderer()
Creating space for the vertical scrolls results in distorted applet headers when you scroll to extreme right, any suggestions ?
ReplyDeleteAre you providing any training? If yes please send the response to my mail sivasaichandolu1998@gmail.com
ReplyDeleteThank you for providing good information from Kexlin
ReplyDeleteYou are in the right place for a perfect solution for any app development company in hyderabad. We are well known for delivering the best quality Mobile Application Development Solutions to our clients.
Could you please share & explain where to edit the css to make space for the vertical scroll bar.
ReplyDelete