Tuesday, October 9, 2012

SharePoint 2010: Easy Dynamic Resize of Dialogs

Some situations require asynchronously loaded data. When this data is within a SP dialog, the dialog will have ugly scrollbars. You could try to guess at the size of the dialog ahead of time when you open it, but that would be what people call ‘lame’. What you need is to dynamically resize the dialog once the async load is complete.

Holy Crap: When I searched for this I found some long, half-baked solutions that had more holes than a Toyota pickup truck in the Middle East. Some examples: An MSDN forum post and Some Dude’s Blog – both long, and (sorry fellas) – kind of crappy.

Solution turned out to be kind of easy – here is the pattern:

JavaScript:

function AutosizeDialog(){
//resize dialog if we are in one
var dlg = SP.UI.ModalDialog.get_childDialog();
if (dlg != null) {
dlg.autoSize();
}
}


function LoadPageData(){
//PSEUDOCODE jquery ajax
$.ajax({
url: < web service providing the data >,
/* other ajax options */
async: true,
cache: false,
success: function (data) {
/* load data into element(s) */
AutosizeDialog();
},
error: function (err) {
/* be good and handle errors */
}
});
}



Explanation: The function “LoadPageData” is your function that loads data into your page dynamically. Maybe it loads it from a web service using SPServices, or jQuery ajax (exampled above). Maybe it is just via a client function generating HTML dynamically. Or maybe it’s something really cool I don’t even know about. Whatever the case may be, the important part is that after the HTML has been set, a call to the “AutosizeDialog” function is made.  That is where the easy magic happens – all within SharePoint native client methods.



Important note: This is all WITHIN the dialog content. Some examples you see out there try to do resizing from the place where the dialog is created. Usually using some kind of whacked-out timer delay. Avoid this.



Pretty simple after all – no need for any extra junk.



Update #1

So it quickly became obvious that something else is needed after the dialog is resized: The window then should be repositioned so the dialog is nice and centered. Again – no need for any JavaScript craziness, and especially no need for long winded explanation – here is the updated version of AutoSizeDialog:







function AutosizeDialog() {
//resize dialog if we are in one
var dlg = typeof(SP.UI.ModalDialog.get_childDialog) == "function" ? SP.UI.ModalDialog.get_childDialog() : null;
if (dlg != null) {
dlg.autoSize();
var dlgWin = $(".ms-dlgContent", window.parent.document);
dlgWin.css({ top: ($(window.top).height() / 2 - dlgWin.height() / 2) + "px", left: $(window.top).width() / 2 - dlgWin.width() / 2 });
}
}




Just two lines to cover resizing – probably could even be reduced to one. Also added an extra check to for the SP.UI.ModalDialog load state.

61 comments:

  1. Hi Chad,

    Like yourself I couldn't find any good examples when I initially looked into re-sizing SP2010 modal dialogs.

    I've finally got off my butt and wrote a post about it as well:
    http://blog.collabware.com/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs/

    I'm using pretty much the same code that SP.UI.Dialog.js uses when a modal initially sizes itself on page load. No dependencies on jQuery and this also takes into account sizing down the modal if its content is larger than the browser viewport.

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

      Delete
  2. You are a better man than me - these days I don't even look for a non-jQuery way to do things - although I can get why one may need to go that route.

    I will be sure to try out your code at some point in the future. Looks like you put a lot of time into it. The jQuery-dependent code I posted above was part of a larger project to make a Lightbox-like SharePoint dialog. But due to the release of 2013 and the fact that the SharePoint 2010 dialog was scripted by the insane, I might give up on it and move on.

    Thanks for sharing your great work!

    ReplyDelete
  3. Thank you for sharing, it works like charm!
    Cheers

    ReplyDelete
  4. Nice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision. 
    Best Devops online Training
    Online DevOps Certification Course - Gangboard
    Best Devops Training institute in Chennai

    ReplyDelete
  5. I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
    I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!



    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  6. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Attend The Python training in bangalore From ExcelR. Practical Python training in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python training in bangalore.
    python training in bangalore

    ReplyDelete
  9. I like viewing web sites which comprehend the price of delivering the excellent useful resource Python classes in pune free of charge. I truly adored reading your posting. Thank you!

    ReplyDelete
  10. For Python training in Bangalore, Visit:- Python training in Bangalore

    ReplyDelete
  11. Your articles really impressed for me,because of all information so nice.informatica training in bangalore

    ReplyDelete
  12. These provided information was really so nice,thanks for giving that post and the more skills to develop after refer that post.dotnet training in bangalore

    ReplyDelete
  13. I gathered a lot of information through this article.Every example is easy to undestandable and explaining the logic easily.hadoop training in bangalore

    ReplyDelete
  14. Very useful and information content has been shared out here, Thanks for sharing it.Microsoft azure training in bangalore

    ReplyDelete
  15. This is really an awesome post, thanks for it. Keep adding more information to this.tableau training in bangalore

    ReplyDelete
  16. Really it was an awesome article,very interesting to read.You have provided an nice article,Thanks for sharing.angular 7 training in bangalore

    ReplyDelete
  17. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving.sap s4 hana simple finance training in bangalore

    ReplyDelete
  18. Linking is very useful thing.you have really helped lots of people who visit blog and provide them use full information.javascript training in bangalore

    ReplyDelete
  19. Very useful and information content has been shared out here, Thanks for sharing it.sap hr training in bangalore

    ReplyDelete
  20. This is really an awesome post, thanks for it. Keep adding more information to this.html training in bangalore

    ReplyDelete
  21. thank you so much for this nice information Article, Digitahanks for sharing your post with us.Real Time Experts training center bangalore

    ReplyDelete
  22. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful . student review for Realtime Experts marathahalli bangalore

    ReplyDelete
  23. I am satisfyed to visit your site with efective and useful data and the blog provided us with worthy information. keep up the awesome work and well done!!!
    devops training in chennai | devops training in anna nagar | devops training in omr | devops training in porur | devops training in tambaram | devops training in velachery

    ReplyDelete
  24. It's so great to know you are a writer that cares about the information you provide. This is smartly done and well-written in my opinion.
    Best Data Science training in Mumbai

    Data Science training in Mumbai

    ReplyDelete
  25. Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging.After seeing your article I want to say that also a well-written article with some very good information which is very useful for the readers....thanks for sharing it and do share more posts likethis. https://www.3ritechnologies.com/course/data-science-online-training/

    ReplyDelete
  26. Thanks for posting the best information and the blog is very helpful.python course in Bangalore

    ReplyDelete
  27. Kim Ravida is a lifestyle and business coach who helps women in business take powerful money actions and make solid, productiveIamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder IamLinkfeeder

    ReplyDelete
  28. Evion 400 tablet usein multi vitamin see details

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete

 
© I caught you a delicious bass.
Back to top