No Scrolling on Insert with EditMode="EditForms"

[Shafees]

My Problem is, In Add New Record mode no Scrolling come to grid. But in Edit mode scrolling appear and ok. I want scrolling too in insert mode also.

<telerik:RadPane ID="radPane4" runat="server" Width="65%" Scrolling="None">
    <telerik:RadGrid ID="radGridItems" runat="server" OnNeedDataSource="radGridItems_NeedDataSource"
        OnDeleteCommand="radGridItems_DeleteCommand" Skin="Windows7" GridLines="None"
        ShowStatusBar="True" OnInsertCommand="radGridItems_InsertCommand" OnUpdateCommand="radGridItems_UpdateCommand"
        AutoGenerateColumns="False" OnItemCreated="radGridItems_ItemCreated" OnItemDataBound="radGridItems_ItemDataBound"
        Width="100%" Height="100%">
        <MasterTableView DataKeyNames="autoIdItems" CommandItemDisplay="TOP"  EditMode="EditForms"
            ShowFooter="true" Name="ContractActivityItems" NoMasterRecordsText="Select Contract Activity To View And Add Activity Items">
            <Columns>
                <telerik:.
                         .
                          dBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Scrolling UseStaticHeaders="True" AllowScroll="true"/>
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadPane>

[Dimo]

Hi Shafees,

Generally, the RadGrid edit form has no scrollbars, unless you add them explicitly, e.g. when using a FormTemplate. Can you please explan what exactly are you trying to achieve?

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx

In case your RadGrid height is too small, when the insert form appears, there is no room for the data items. If this is the case, then please use ScrollHeight instead of Height.

http://www.telerik.com/help/aspnet-ajax/height-vs-scrollheight.html

All the best,
Dimo
the Telerik team

[Shafees]

I want to use UseStaticHeaders="True" AllowScroll="true" EditMode="EditForms". If i was in insert mode and there was not enouf space in my browser for the insertForm i want to use scrolling to the insert form. How can i achive it. I notted that if UseStaticHeaders="True" scrolling not come to command items. How can i put scrolling to insert form (InitInsert).

[Dimo]

Hello Shafees,

You can specify an explicit height to the Insert edit form and enable scrolling with CSS code:

.rgMasterTable  thead  .rgEditForm
{
    height:100px;
    overflow:auto;
}


Regards,
Dimo
the Telerik team

[Steele]

Hi,
Just wanting confirmation on this as I am in the same boat as Shafees.
From the final comment, it seems that the ADD form cannot be made to act like the EDIT form. Is this correct?
Thanks,
Steele.

[Tsvetina]

Hello Steele,

Have you tried the approach offered by my colleague? From what I see, the CSS selector in his post addresses exactly the insert form. Both edit form and insert form use the rgEditForm CSS class and since the insert form is part of the thead of the RadGrid table, this CSS is applied only to it.

The result is getting a static height for your insert form and a scroll in case the controls inside it do not fit in this space. Is this your requirement?

Best wishes,
Tsvetina
the Telerik team

[Steele]

Yes mate, I did try the solution, but it did not actually fit my needs. I was setting up a page layout, so was unsure of the form heights of specific instances at design-time.
The Edit form sizes to it's contents, and with scroll and static headers, will be able to be scrolled when too tall to fit to the page.
Without assigning an exact pixel height, the Insert form will not do this.
I had to write some DOM traversing javascript to calculate the available space on the browser page resize to allow for this. It was in a Splitter, but looked a little like :

var theGrid = $find("<%= rgTheGrid.ClientID %>");
if (theGrid.MasterTableViewHeader.get_isItemInserted() == true) {
    var theDiv = theGrid.MasterTableViewHeader.get_element().childNodes[1].childNodes[1].childNodes[0].childNodes[0];
    var theGridHeader = theGrid.MasterTableViewHeader.get_element().childNodes[1].childNodes[0];
    var theGridCommand = theGrid.TopPagerControl;
    if (theDiv.offsetHeight > (theGrid.get_element().offsetHeight - theGridHeader.offsetHeight - theGridCommand.offsetHeight)) {
        var theGridData = theGrid.GridDataDiv;
        if (theGrid.GridDataDiv.childNodes[0].childNodes[1].childNodes.length == 0)
            theGridData = theGrid.GridDataDiv.childNodes[0].childNodes[1];
        theDiv.style.height = sender.get_height() - (theGridHeader.offsetHeight + theGridCommand.offsetHeight - theGridData.offsetHeight);
        theDiv.style.overflowY = 'auto';
        theDiv.style.overflowX = 'hidden';
    } else {
        theDiv.style.height = '';
        theDiv.style.overflowY = '';
        theDiv.style.overflowX = '';
    }
}

It's not exactly perfect, but much better than the user not being able to get to the Insert/Cancel buttons at the bottom of the form.