locked
Custom Page with grid & formview + child grid in the formview RRS feed

  • Question

  • User1980140492 posted

    Hey guys,

    At the moment I have a main gridview with a formview below that grid in which the details of the selected record get shown, just like the default ListDetails template works. Now on top of that I'd like to add a child grid in the formview which shows a child table.

    For example the main grid will show Orders and in the child grid will show OrderDetails where the OrderID is equal to the one selected in the main grid.

    How do you set this up? Keep in mind that I'll also want delete/add/edit buttons etc.

    I'm using EF btw so my datasource of the gridview is a EntityDataSource just like in a normal Entity Framework Dynamic Data Project.

    Thanks in advance,
    - Yannick

    Wednesday, September 7, 2011 9:14 AM

Answers

  • User-330204900 posted

    Hi Yannick, I had a sample I did for Topolov a while ago I have e-mailed it to you.With a little effort you could do this generically see my old post here, these

    have some outdated code, I will try and publish my DetailsList samples soon.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2011 10:44 AM
  • User-330204900 posted

    yes you need to setup validation groups for a least each control you will be do input (e.g. GridViews and FormViews)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 7, 2011 10:17 AM
  • User1980140492 posted

    Solved:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)        {            if (e.Row.RowType == DataControlRowType.Pager)            {                GridViewPager tester = e.Row.Controls[0].Controls[1] as GridViewPager;                foreach (Control lb in tester.Controls)                {                    if (lb is Label)                    {                        //((Label)lb).ForeColor = System.Drawing.Color.Red;                        //((Label)lb).Font.Size = new FontUnit("40px");                        //get the selected pager label                    }                    else if (lb is LinkButton)                    {                        //((LinkButton)lb).BackColor = System.Drawing.Color.Yellow;                        //((LinkButton)lb).Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='yellow';");                        //((LinkButton)lb).Attributes.Add("onmouseout", "this.style.backgroundColor='';");                        //get the unselected pager LinkButton                    }                    else if (lb is ImageButton)                    {                        ((ImageButton)lb).ValidationGroup = "ValidationGroupTop1";                    }                }            }           }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2011 4:56 AM

All replies

  • User-330204900 posted

    That is not a big issue Yannick just add a second grid to the page and manually configure to the child table you can sort the relationship using a QueryExtender.

    Wednesday, September 7, 2011 9:54 AM
  • User1980140492 posted

    Know any good examples for this or got a simple small example yourself perhaps?

    First time I'm doing this and I want to do it right :)

    Regards,
    - Yannick

    Wednesday, September 7, 2011 10:27 AM
  • User-330204900 posted

    Hi Yannick, I had a sample I did for Topolov a while ago I have e-mailed it to you.With a little effort you could do this generically see my old post here, these

    have some outdated code, I will try and publish my DetailsList samples soon.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2011 10:44 AM
  • User1980140492 posted

    Stephen,

    Thanks for the sample you mailed me. It's working, but there is one realllly strange thing happening.
    Please do check your mail :) I had to attach screenshots so I had to do it by mail and not here in this topic.

    The issue is the following:
    The field templates aren't being used when I am In normal "readonly/select a record" mode. When I edit a record it does use the field templates.
    That's the weird behavior which is in the child grid on my custom page. However on the default page of the table which is represented in that child grid it uses the field templates perfectly.

    Regards,
    - Yannick

    Friday, September 9, 2011 6:04 AM
  • User1980140492 posted
    EFDS4.Include = contractsTable.ForeignKeyColumnsNames;

    O god ... apparantly you added a line to yourPage_Load aswell:

    RelationsDataSource.Include = contractsTable.ForeignKeyColumnsNames;

    That did the trick! ;O In case anybody else ever needs this:

    The datasource of my child grid:

    <asp:EntityDataSource ID="EFDS4" runat="server" EnableDelete="true" EnableUpdate="true"
            EnableInsert="true" />
    <asp:QueryExtender ID="QueryExtender4" TargetControlID="EFDS4" runat="server">
            <asp:PropertyExpression>
                <asp:ControlParameter ControlID="GridView1" Name="ArticleID" Type="Int32" />
            </asp:PropertyExpression>
    </asp:QueryExtender>
    


    The gridview of my child grid:

    <asp:GridView runat="server" ID="RelationsGridView2" AutoGenerateColumns="false"
        DataSourceID="EFDS4" CssClass="DDGridView"
        PageSize="15" RowStyle-CssClass="td" HeaderStyle-CssClass="th" CellPadding="6">
        <PagerStyle CssClass="DDFooter" />
        <SelectedRowStyle CssClass="DDSelected" />
        <EmptyDataTemplate>
            There are no contracts related to this article.
        </EmptyDataTemplate>
        <Columns>
            <asp:TemplateField ShowHeader="false">
                <itemstyle horizontalalign="Center" verticalalign="Middle" />
                <itemtemplate>
                    <table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="BtnSelect" runat="server" CausesValidation="false" CommandName="Select"
                                    ImageUrl="../../Content/Images/OpenLetter.png" ToolTip="Select" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" CommandName="Edit"
                                    ImageUrl="../../Content/Images/Edit.png" ToolTip="Edit" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton6" runat="server" CausesValidation="false" CommandName="Delete"
                                    ImageUrl="../../Content/Images/Trash.png" ToolTip="Delete" OnClientClick='return confirm("Are you sure you want to delete this item?");' />
                            </td>
                        </tr>
                    </table>
                </itemtemplate>
                <edititemtemplate>
                    <table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="BtnSelect" runat="server" CommandName="Update" ImageUrl="../../Content/Images/Accept.png"
                                    ToolTip="Update" />
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" CommandName="Cancel"
                                    ImageUrl="../../Content/Images/No.png" ToolTip="Cancel" />
                            </td>
                        </tr>
                    </table>
                </edititemtemplate>
            </asp:TemplateField>
            <asp:DynamicField DataField="AM_CONTRACT" HeaderText="Contract" UIHint="ForeignKey" />
            <asp:DynamicField DataField="Active" HeaderText="Active" />
        </Columns>
    </asp:GridView>
    


    Page global variable:
    protected MetaTable contractsTable;

    Page_Init extra stuff to add:

    contractsTable = Global.DefaultModel.GetTable("AM_ARTICLE_CONTRACT");//Effect hiervan is onbekend, maar stond in Sjnaughton zijn sample. //Commented of uncommented geen verschil.//RelationsGridView2.SetMetaTable(productsTable);//RelationsGridView.DataKeyNames = new string[] { "ID" };EFDS4.EntityTypeFilter = contractsTable.EntityType.Name;EFDS4.ContextTypeName = contractsTable.DataContextType.FullName;EFDS4.EntitySetName = contractsTable.Name;


    Page_Load extra stuff to add:

    RelationsDataSource.Include = contractsTable.ForeignKeyColumnsNames;



    Regards,
    - Yakkity

    Friday, September 9, 2011 8:00 AM
  • User-330204900 posted

    Glad that you are sorted, I had forgotten that line I just add it noe because in was added in .Net 4 and forget about it.

    Friday, September 9, 2011 8:59 AM
  • User1980140492 posted

    Would it be possible to not only select/edit/delete the lines in the childgrid, but also add a new line?
    Preferably functionality so that a line can be added right away in the grid and then they can fill in the fields right away instead of a child-detailsform.

    Any suggestions?

    Btw I've been trying some stuff already, but seeing that I can't even speak to the child grid from my code behind it'll be a bit hard :o why is that anyway? I did add tabs to the main details page and one of the tabs contains the child grid. Could that be the cause?

    Thanks again in advance,
    - Yannick


     

    Tuesday, October 18, 2011 5:06 AM
  • User-330204900 posted

    I do have a version that support Insert but I don't have it in a form I can post the above sample should work if you add the InsertParameters tot he Data Source.

    Tuesday, October 18, 2011 6:39 AM
  • User1980140492 posted

    Any samples are welcome :)

    Tuesday, October 18, 2011 8:40 AM
  • User-330204900 posted

    Hi Yannick, I've checked again and the version I have does not use GridView it uses ListView with a custom template generator I am trying t6o get the time to put together a sample for this.

    Thursday, October 20, 2011 4:21 AM
  • User1980140492 posted

    Stephen,

    One more thing:

    I now have 3 Grids. Grid 1 has manufacturers and in case 1 is selected the second grid will show all related product families. In case a product family is selected then the third grid will populate with all related product subfamilies. Now in the first 2 grids there are for each grid an extra button which gives a modal popup in which a manufacturer or a product family can be created. To create a new subfamily there's a formview next to the third grid.

    Now this all works perfectly untill I noticed the following scenario:
    Image I select a manufacturer which has 3 product families and the second one has no subfamilies. When selecting that second row the formview for the subfamilies will become an insert form. Now if I click the button to create a new product family validation on the formview will fire and my modal popup wont show up. Is there a way to "block" this validation just in this scenario? Or what else do you propose?

    Again, thanks in advance :)
    - Yannick

    Monday, November 7, 2011 9:33 AM
  • User-330204900 posted

    yes you need to setup validation groups for a least each control you will be do input (e.g. GridViews and FormViews)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 7, 2011 10:17 AM
  • User1980140492 posted

    Owkay, I'm not entirely sure if I've done exactly what you said, but after doing what I did I'm still getting validation on the formview when I change pageindex on the grids.

    What I did:
    I added the validationgroups to my dynamicvalidators:

    <asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true"
                        HeaderText="List of validation errors" CssClass="DDValidator" />
                    <asp:DynamicValidator runat="server" ID="GridViewValidator" ControlToValidate="GridView1"
                        Display="None" CssClass="DDValidator" ValidationGroup="ValidationGroupTop1" />
                    <asp:DynamicValidator runat="server" ID="GridViewValidator2" ControlToValidate="ProdFam_Gridview"
                        Display="None" CssClass="DDValidator" ValidationGroup="ValidationGroupTop2" />
                    <asp:DynamicValidator runat="server" ID="GridViewValidator3" ControlToValidate="ProdSubFam_Gridview"
                        Display="None" CssClass="DDValidator" ValidationGroup="ValidationGroupTop3" />
                    <asp:DynamicValidator runat="server" ID="FormViewValidator" ControlToValidate="FormView1"
                        Display="None" CssClass="DDValidator" ValidationGroup="ValidationGroupTop4" />

     And for example my first gridview, mind the Itemtemplate & EditItemTemplate:

    <asp:GridView ID="GridView1" runat="server" DataSourceID="GridDataSource" EnablePersistedSelection="true"
        AutoGenerateSelectButton="false" AutoGenerateEditButton="false" AutoGenerateDeleteButton="false"
        AllowPaging="True" AllowSorting="True" OnDataBound="GridView1_DataBound" OnRowEditing="GridView1_RowEditing"
        OnSelectedIndexChanging="GridView1_SelectedIndexChanging" OnRowDeleted="GridView1_RowDeleted"
        OnRowUpdated="GridView1_RowUpdated" OnRowCreated="GridView1_RowCreated" CssClass="DDGridView"
        RowStyle-CssClass="td" HeaderStyle-CssClass="th" CellPadding="6" OnPageIndexChanging="GridView1_PageIndexChanging"
        OnSorting="GridView1_Sorting" OnSorted="GridView1_Sorted" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="false"
        PagerSettings-PageButtonCount="10" PageSize="20">
        <PagerStyle CssClass="DDFooter" />
        <SelectedRowStyle CssClass="DDSelected" />
        <PagerTemplate>
            <asp:GridViewPager ID="GridViewPager1" runat="server" />
        </PagerTemplate>
        <EmptyDataTemplate>
            There are currently no items in this table.
            <asp:ImageButton ID="Manufacturer_Btn_Create2" runat="server" ImageUrl="../../Content/Images/Create.png"
                        ToolTip="New" OnClick="Manufacturer_Btn_Create_Click" CausesValidation="false" />
        </EmptyDataTemplate>
        <Columns>
            <asp:TemplateField ShowHeader="false">
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="TDtester" />
                <HeaderTemplate>
                    <asp:ImageButton ID="Manufacturer_Btn_Create" runat="server" ImageUrl="../../Content/Images/Create.png"
                        ToolTip="New" OnClick="Manufacturer_Btn_Create_Click" CausesValidation="false" />
                </HeaderTemplate>
                <ItemTemplate>
                    <table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="BtnSelect" runat="server" CausesValidation="false" CommandName="Select"
                                    ImageUrl="../../Content/Images/OpenLetter.png" ToolTip="Select" ValidationGroup="ValidationGroupTop1" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" CommandName="Edit"
                                    ImageUrl="../../Content/Images/Edit.png" ToolTip="Edit" ValidationGroup="ValidationGroupTop1" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="false" CommandName="Delete"
                                    ImageUrl="../../Content/Images/Trash.png" ToolTip="Delete" ValidationGroup="ValidationGroupTop1"
                                    OnClientClick='return confirm("Are you sure you want to delete this item?");' />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <EditItemTemplate>
                    <table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="BtnSelect" runat="server" CommandName="Update" ImageUrl="../../Content/Images/Accept.png"
                                    ToolTip="Update" ValidationGroup="ValidationGroupTop1" />
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp;
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="false" CommandName="Cancel"
                                    ImageUrl="../../Content/Images/No.png" ToolTip="Cancel" ValidationGroup="ValidationGroupTop1" />
                            </td>
                        </tr>
                    </table>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:DynamicField DataField="Title" />
            <asp:DynamicField DataField="IsIntern" HeaderText="Internal Use" />
        </Columns>
    </asp:GridView>

    And I gave each select/edit/delete button of the itemtemplates of the grids validationgroups which match and are correct to the above.
    How can I set this for the page index buttons ( I'm talking about the First, previous, next, last pageindex buttons which are generated automatically ).

    Thanks again,
    - Yannick

    Tuesday, November 8, 2011 2:55 AM
  • User1980140492 posted

    Solved:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)        {            if (e.Row.RowType == DataControlRowType.Pager)            {                GridViewPager tester = e.Row.Controls[0].Controls[1] as GridViewPager;                foreach (Control lb in tester.Controls)                {                    if (lb is Label)                    {                        //((Label)lb).ForeColor = System.Drawing.Color.Red;                        //((Label)lb).Font.Size = new FontUnit("40px");                        //get the selected pager label                    }                    else if (lb is LinkButton)                    {                        //((LinkButton)lb).BackColor = System.Drawing.Color.Yellow;                        //((LinkButton)lb).Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='yellow';");                        //((LinkButton)lb).Attributes.Add("onmouseout", "this.style.backgroundColor='';");                        //get the unselected pager LinkButton                    }                    else if (lb is ImageButton)                    {                        ((ImageButton)lb).ValidationGroup = "ValidationGroupTop1";                    }                }            }           }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2011 4:56 AM
  • User-330204900 posted

    you will need seperate validation groups for Edit and Insert if you are doing that in Grid or Form.

    Tuesday, November 8, 2011 6:54 AM