MVC Grid Height adjustment on partial render

[Mark Treveil]

Guys,
I am trying to get my MVC 3 grid to adjust its height to fit the screen nicely. I can resize it OK on page load and page resize events, using a dodgy function like;

function gridResize() {
var mainH = document.body.clientHeight;
var oGrid = $('.GridContent.ScrollOn.ui-droppable')

if (jQuery.isEmptyObject(oGrid) || jQuery.isEmptyObject(oGrid.offset())) return;
var gridT = oGrid.offset().top;
var gridH = mainH - gridT - 20; //20 random fudge

oGrid.height(gridH);
}

but I have a problem on an Ajax partial render. In this case the windows load or resize events do not fire (as you would expect), and if I use the grid's clientevents.OnLoad event then none of the grid's DOM objects appear to have been created when the event script runs.

Is there a way round this, or better still a much simpler CSS-driven approach to get the grid height to auto-adjust to fit a panel?

Cheers
Mark

[Yogeshwaran]

Hi Mark,

Thanks for using Syncfusion products.

After analysis of your code snippet. we suggest you to use selector like this “$('#Grid1 .GridContent')”. This will get same result.

function gridResize() {
var mainH = document.body.clientHeight;
var oGrid = $('#Grid1 .GridContent');

if (jQuery.isEmptyObject(oGrid) || jQuery.isEmptyObject(oGrid.offset())) return;
var gridT = oGrid.offset().top;
var gridH = mainH - gridT - 20; //20 random fudge

oGrid.height(gridH);
}

For your convenience , we have created the sample and the same can be downladed from below link.

http://www.syncfusion.com/downloads/Support/DirectTrac/90220/AjaxApplication1086063661.zip

Please let us know if you have any concerns.

Regards,
Yogesh R.

[Mark Treveil]

Thanks, but my problem is not simepl partial renderingon the display of the whole page, but an Ajax partial render via a form submit of just the grid section.

I have taken your sample and extended it to show my problem. I have hard-coded the grid resize to 500px, and this works OK when the page is displayed, or refreshed via a CTL-F5. The grid ends up a lot longer than necessary.

If you press the submit button marked "Partial Render Grid", an Ajax partial refresh is triggered, and the customer names will ultimately display with "-onrefresh" appended. The alert box for the OnLoad event function is displayed, as for the full page loads, but even thought the grid height is set in the script, the grid does not resize.

Any ideas who I can fix this? I am so close to getting all my grid resizing the way I need it, but stuck on this last one issue.

Thanks
Mark






GridResizev2_67dee362.zip

[Ranjithkumar R G]

Hi Mark,

Thanks for your update.

We are unable to run your attached sample. We have prepared a simple sample regarding your requirement and code which you provided. Can you please reproduce the issue in this attached sample, so that we can be able to resolve your issue as soon as possible.

www.syncfusion.com/downloads/Support/DirectTrac/91188/MvcApplication4-567695631.zip


Please let us know if you have any concern.

Regards,
Ranjithkumar.

[Mark Treveil]

Thanks. I fear we are going round in circles - your sample ran out of the box, but when I changed a line, it subsequently "can't find resource ...". Notably you have a reference to something to called syncfusion.tools.base for which I don't have an assembly.

The sample also seems to be doing some sort of low level Ajax handling, which is not the actual scenario I have or will be acceptable. I am doing the conventional way with an Ajax form and trying to create a working framework for a large system, so my solution needs to be clean. Hence does it prove anything if it works this way.

Can we tell me the problem with the sample I sent - maybe I can fix that and resubmit?

Thanks
Mark

[Mark Treveil]

Hi, I have your sample going better now - I don't really understand but I haven't much time to investigate right now.

Anyhow, your sample doesn't seem to set the grid height correctly in any instance - is that what you expected? See the attached screen shot, where the left hand app is the sample app I sent you, with the initial rendering of the grid at 500px. The right hand side is your new one, with default height.

If you press the Partial Render grid button on mine, then the grid resets to the same height as yours.


Thanks
Mark

[Mark Treveil]

Sorry, here is the file. Having problems with your site giving 404 errors



gridh_c5f439cf.zip

[Ranjithkumar R G]

Hi Mark,

Thanks for your update.

To set the Grid height in partial view can be achieved by setting the Grid height after the Script Manager in Layout page. Please refer to the code snippet below.

[Script]
Sys.Application.add_load(function () {
var mainH = document.body.clientHeight;
var oGrid = $('#GridSrc .GridContent');
$('#GridSrc .GridContent').css('height', '500');

});


To set the Grid height in Ajax post back which can be achieved in the Ajax success event of the button. Please refer to the code snippet below.

[Script]

$('#btnDefaultList').ajaxSuccess(function () {
$('#GridSrc .GridContent').css('height', '500');
});


Please refer to the below link to download the sample application.

https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/general/MvcApplication41719024111.zip

Please let me know if you have any concern.

Regards,
Ranjithkumar.

[Mark Treveil]

Ranjithkumar,

Crikey, you're right!

I'm using the built-in Ajax forms so in my instance I just need to change my BeginForm line to include the OnSuccess event pointing to my resize function:


@Using (Ajax.BeginFormExt("UpdateMeetings", Nothing, New AjaxOptions With {.OnSuccess = "gridResize", .UpdateTargetId = "divMeetingsList"}, New With {.id = "mgForm"}))

I haven't used those event before.

I actually found a work around for the grid Resize by passing the size back to the controller, but I still have problems enabling/disabling button on refresh. This fixes them.

Cheers!
Mark

[Ranjithkumar R G]

Hi Mark,

Thanks for your update.

Sorry for the inconvenience caused. We are unable to understand your requirement exactly. Could you please provide us more information regarding your query, so that we will be able to resolve it as soon as possible.

Please let me know if you have any concern.

Regards,
Ranjithkumar.