This is a migrated thread and some comments may be shown as answers.

No Scrolling on Insert with EditMode="EditForms"

6 Answers 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shafees
Top achievements
Rank 2
Shafees asked on 09 Nov 2010, 11:53 AM
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>

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Nov 2010, 02:07 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Shafees
Top achievements
Rank 2
answered on 13 Nov 2010, 07:04 AM
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).
0
Dimo
Telerik team
answered on 15 Nov 2010, 08:46 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steele
Top achievements
Rank 1
answered on 10 Mar 2011, 01:12 AM
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.
0
Tsvetina
Telerik team
answered on 15 Mar 2011, 10:34 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Steele
Top achievements
Rank 1
answered on 16 Mar 2011, 12:21 AM
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.
Tags
Grid
Asked by
Shafees
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Shafees
Top achievements
Rank 2
Steele
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or