Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Centering Edit Form within Grid

4 Answers 161 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 15 Oct 2010, 05:56 PM
I'm trying to find out how to center the Edit Form (FormTemplate) within the grid. In my case, the Edit Form is a user control and then buttons for Update/Cancel. The height of the FormTemplate and all of it's controls is less than that of the grid (i.e. you can see grid rows in addition to the row containing the form when you're editing). What I'd like to happen is when the user clicks on Edit that the Edit Form would center itself vertically within the grid (to prevent the bottom portion of the form from being off-screen and requiring the user to scroll the grid manually to see the entire Edit form).

Does anyone know if it's possible to do this kind of thing?

Thanks,

Jon

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Oct 2010, 04:06 PM
Hi Jon,

Although you have not mentioned it, I suppose that you are using a popup edit form, otherwise there can't be any vertical centering within the RadGrid control. Please refer to:

http://www.telerik.com/help/aspnet-ajax/center-popup-edit-form.html

Greetings,
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
Jon
Top achievements
Rank 1
answered on 20 Oct 2010, 07:05 PM
Dimo,

Thank you for your response!

Actually, in my situation, this is not a pop up form, just an in-line form (user control) that appears below the edited item. I understand that there's no direct support for centering my edit form within the grid (to prevent the cropping that occurs at the bottom of the form that requires the user to scroll the form to get the entire form to appear within the grid), but is there a work-around? Can I scroll the edit item to the top of the grid (for example), which would ensure the entire edit form appears (even though it wouldn't be centered)?

If you have any suggestions on alternative approaches (other than using a pop-up form), please let me know.

Thanks,

Jon
0
Dimo
Telerik team
answered on 21 Oct 2010, 06:42 AM
Hello Jon,

I didn't understand what you are trying to do the first time. Here is how to scroll to the edit form, so that it comes into view:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 4;
    int rowsNum = 30;
    string colName = "Column";
 
    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }
 
    for (int i = 1; i <= rowsNum; i++)
    {
        dr = dt.NewRow();
 
        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
        }
        dt.Rows.Add(dr);
    }
 
    (sender as RadGrid).DataSource = dt;
}
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <ClientEvents OnGridCreated="scrollToForm" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>
 
<script type="text/javascript">
 
function scrollToForm(sender, args)
{
    var editForm = $telerik.getElementByClassName(sender.get_element(), "rgEditForm", "div");
    if (editForm)
    {
        window.setTimeout(function(){$telerik.scrollIntoView(editForm);}, 1);
    }
}
 
</script>
 
</form>
</body>
</html>


Kind 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
Jon
Top achievements
Rank 1
answered on 21 Oct 2010, 04:22 PM

Dimo,

Thanks again for your help. Unfortunately, I couldn't get the example you provided to work with my grid. Perhaps this is because my Edit Form is deep witin the grid and not at the "rgEditForm" level. However, I did revisit this article on the Telerik site:

 


This example didn't work for me out-of-the-box, because this line returned null ("undefined"):

var row = RadGrid1.get_masterTableView().get_selectedItems()[0];

However using the information found in this article, I modified the JavaScript to scroll the edit form to the top of the grid like this:

<script type="text/javascript">
    function scrollToForm(sender, args)
    {
        var grid = $telerik.getElementByClassName(sender.get_element(), "rgDataDiv", "div")
        var editForm = $telerik.getElementByClassName(sender.get_element(), "AccountControl", "div");
        if ((grid) && (editForm))
        {
            window.setTimeout(function()
            {
                grid.scrollTop = editForm.offsetParent.offsetTop              
            }, 1);
        }
    } 
</script>

I also added the class of "AccountControl" to the div within my user control that wraps all the controls that represent the Edit Form. Lastly, I grabbed the "rgDataDiv" element instead of "rgEditForm" as my source for the grid to use. I am using a RadGrid with a FormTemplate containing a RadTabStrip and a RadMultiPage where each page is a User Control containing the editable items (logically grouped within each tab).

This script could easily be modified to center the form within the grid space, but I decided that having it at the top was more intuitive for my purposes.

Hope this helps you or someone else!

Thanks again,

Jon
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jon
Top achievements
Rank 1
Share this question
or