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

NestedViewTemplate RadGrid not firing ItemCommand

11 Answers 507 Views

Grid

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

Kate asked on 19 Mar 2010, 12:57 AM

Hi Telerik,

I am using a RadGrid with a NestedViewTemplate. Within that NestedViewTemplate is another RadGrid.
All data is binding correctly using Advanced DataBinding techniques. My problem is the nested grid just will not fire the "ItemCommand" event.

If I say add a button within the template this will fire correctly. It's just any commands sent from the inner grid that wont fire.

I've tried adding an ItemCommand eventhandler directly to the inner grid but still nothing. So in the code below the "AddPayment" command fires as it's a button seperate from the grid. But no matter what I've tried (GridButtonCol, Button within a Template Col etc)
no ItemCommand is fired for RadGrid: Payments.

<telerik:RadGrid ID="InvoiceGrid" runat="server" >
    <MasterTableView Name="Master" AutoGenerateColumns="false" EditMode="EditForms" AllowPaging="true" ShowHeader="true" PageSize="10" DataKeyNames="InvoiceId">
        <NestedViewSettings>
            <ParentTableRelation><telerik:GridRelationFields DetailKeyField="InvoiceId" MasterKeyField="InvoiceId" /></ParentTableRelation>
        </NestedViewSettings>
        <NestedViewTemplate>
           <fieldset style="padding:10px;">
                <legend style="padding:5px;"><b><asp:Label runat="server" ID="InvoiceHeadings" Text="Invoice Payments"></asp:Label></b></legend>
                <div id="InvoicePaymentsGrid" runat="server">
                <asp:Button runat="server" ID="AddNewPayment" Text="Add Payment" CommandName="AddPayment" />
                 <telerik:RadGrid runat="server" ID="Payments">
                     <MasterTableView Name="PaymentsMaster" AutoGenerateColumns="false" AllowPaging="true" ShowHeader="true" PageSize="10" DataKeyNames="PaymentId">
                        <Columns>
                            <telerik:GridBoundColumn DataField="PaymentMethod" HeaderText="Payment Method">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Payment Date" DataField="DateCreated" DataFormatString="{0:dd/MM/yyyy HH:mm}" UniqueName="DateCreated" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" DataFormatString="{0:C}" UniqueName="Amount" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn UniqueName="test">
                                <ItemTemplate>
                                    <asp:Button runat="server" ID="Test" CommandName="Test" Text="Test" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridButtonColumn ButtonType="ImageButton" Text="Edit" UniqueName="EditOverride" CommandName="EditPayment">
                                <HeaderStyle Width="20px" />
                            </telerik:GridButtonColumn>
                            <telerik:GridButtonColumn ButtonType="ImageButton" ConfirmText="Are you sure you want to delete this Invoice?" CommandName="DeletePayment" Text="Delete" UniqueName="Delete">
                                <HeaderStyle Width="20px"></HeaderStyle>
                            </telerik:GridButtonColumn>
                        </Columns>
                    </MasterTableView>
                 </telerik:RadGrid>
                 </div>
            </fieldset>
        </NestedViewTemplate>
        <Columns>
            <telerik:GridBoundColumn DataField="InvoiceNumber" HeaderText="Invoice Number" UniqueName="InvoiceNumber"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" DataFormatString="{0:C}" UniqueName="Amount" ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Amount Paid" UniqueName="AmountPaid">
                <ItemTemplate><asp:Label runat="server" ID="AmountPaidLabel" ></asp:Label></ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Subscription" UniqueName="Subscription">
                <ItemTemplate><asp:Label runat="server" ID="SubscriptionLabel" ></asp:Label></ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="Description" UniqueName="Description" DataField="Description">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Date Created" DataField="DateCreated" DataFormatString="{0:dd/MM/yyyy HH:mm}" UniqueName="DateCreated" ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Date Updated" DataField="DateUpdated" DataFormatString="{0:dd/MM/yyyy HH:mm}" UniqueName="DateUpdated" ReadOnly="true">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn HeaderText="" ItemStyle-HorizontalAlign="Center" ButtonType="ImageButton" Text="View Invoice" UniqueName="ShowPdf" CommandName="ShowPdf"
                HeaderStyle-Width="20px" ItemStyle-Width="20px" FooterStyle-Width="20px">
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn HeaderText="" ItemStyle-HorizontalAlign="Center" ButtonType="ImageButton" Text="Email Invoice" UniqueName="Email" CommandName="Email"
                HeaderStyle-Width="20px" ItemStyle-Width="20px" FooterStyle-Width="20px">
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" Text="Edit" UniqueName="EditOverride" CommandName="Edit">
                <HeaderStyle Width="20px" />
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" ConfirmText="Are you sure you want to delete this Invoice?" CommandName="Delete" Text="Delete" UniqueName="Delete">
                <HeaderStyle Width="20px"></HeaderStyle>
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

private void InvoiceGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridNestedViewItem)
            {
                RadGrid paymentsGrid = (RadGrid)e.Item.FindControl("Payments");
                paymentsGrid.NeedDataSource += new GridNeedDataSourceEventHandler(PaymentsGrid_NeedDataSource);
            }
            else if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                FormatGridEditForm(e);
            }
            else if (ControlHelper.IsItem(e.Item) && e.Item.OwnerTableView.Name == "Master")
            {
                FormatInvoiceGridRow(e.Item);
            }
        }

        private void PaymentsGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            RadGrid paymentsGrid = source as RadGrid;
            GridNestedViewItem nestedItem = paymentsGrid.NamingContainer as GridNestedViewItem;
            int invoiceId = Utilities.ToInt(nestedItem.ParentItem.GetDataKeyValue("InvoiceId"));
            List<Payment> payments = MembershipDataMethods.SelectPayments(invoiceId, true);
            paymentsGrid.DataSource = from p in payments orderby p.DateCreated descending select p;
        }

11 Answers, 1 is accepted

answered on 19 Mar 2010, 10:39 AM

Hi,

Please try attaching the ItemCommand eent to the Payments grid from the InvoiceGrid ItemCreated event as shoen below:

    
             protected void InvoiceGrid_ItemCreated(object sender, GridItemEventArgs e) 
        
                { 
        
                    if (e.Item is GridNestedViewItem) 
        
                    { 
        
                       GridNestedViewItem nestedViewItem = (GridNestedViewItem)e.Item; 
        
                       RadGrid paymentsGrid=(RadGrid) nestedViewItem.FindControl("PaymentsGrid"); 
        
                       paymentsGrid.ItemCommand += new GridCommandEventHandler(paymentsGrid_ItemCommand); 
        
                    } 
        
                } 
        
                void paymentsGrid_ItemCommand(object source, GridCommandEventArgs e) 
        
                { 
        
                    if (e.CommandName == "Edit") 
        
                    { 
        
                    } 
        
                }

Do let me know if this was useful.

Princy

answered on 08 Apr 2010, 05:27 PM

Hello guys,

The RadGrid hierarchy with templates demo demonstrates the exact same approach of firing commands from the grid inside the NestedViewTemplate of the parent grid. If you notice, you can sort the columns of the nested grid, which is effectively the same as firing a custom command from RadGrid.

To attach an OnCommand handler to the nested grid, you can use:

<telerik:RadGrid runat="server" ID="Payments"

OnItemCommand="Payments_ItemCommand">

</telerik:RadGrid>

protected void Payments_ItemCommand(object sender, GridCommandEventArgs e)

{

if(e.CommandName == "Test")

{

//Test command is fired. Handle here.

}

Check this out and let me know how it works for you.

Regards,
Veli
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.

answered on 14 Jul 2010, 05:24 PM

Hi,

I have the some problem... i have done what you suggest and no difference. The ItemCommand event is still not being fired when i click on the GridNestedViewItem. When i click on the GridNestedViewItem, the ItemCommand is fired, but on the parent grid.

What i wanna do is -> select the parent item, when gridnesteditem has been selected.

Any suggestion? Thanks.

Urbano

Here is my code:

protected void RgEventoItems_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridNestedViewItem)

{

GridNestedViewItem nestedViewItem = (GridNestedViewItem)e.Item;

RadGrid EIO = (RadGrid)nestedViewItem.FindControl("RgItemsObjectos");

EIO.ItemCommand += new GridCommandEventHandler(EIO_ItemCommand);

}

protected void EIO_ItemCommand(object sender, GridCommandEventArgs e)

{

RadAjaxManager1.ResponseScripts.Add(@"alert('" + "EIO_ItemCommand" + "', 330, 210);");
// I never get this message

}

<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">

<telerik:RadGrid ID="RgEventoItems" runat="server" OnItemDataBound="RgEventoItems_ItemDataBound"

OnPageIndexChanged="RgEventoItems_PageIndexChanged" OnItemCreated="RgEventoItems_ItemCreated"

AutoGenerateColumns="False" GridLines="None" AllowPaging="true" AllowSorting="True"

Width="100%" OnPreRender="RgEventoItems_PreRender" AllowMultiRowSelection="true">

<MasterTableView DataKeyNames="CodigoItem,CodigoPreco,Preco,ControlarPreco,Vagas,ControlarVagas,DescricaoPt" EditMode="EditForms"

AllowPaging="true" GroupLoadMode="Server" AllowMultiRowSelection="true">

<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap">

<asp:Label ID="LblCodigoItem" runat="server" Visible="false"></asp:Label>

<telerik:RadGrid runat="server" ID="RgItemsObjectos" AutoGenerateColumns="false"

OnItemDataBound="RgItemsObjectos_ItemDataBound" OnItemCommand="RgItemsObjectos_ItemCommand"

OnPageIndexChanged="RgItemsObjectos_PageIndexChanged" AllowMultiRowSelection="true">

<MasterTableView DataKeyNames="Codigo, CodigoEvItem, CodigoPreco,Preco, TipoInscricao,ControlarPreco,Vagas,ControlarVagas,DescricaoPt" EditMode="EditForms"

AllowPaging="true" AllowMultiRowSelection="true">

<telerik:GridBoundColumn DataField="Obrigatorio" HeaderText="Obrigatorio" ReadOnly="True"

Visible="False" UniqueName="Obrigatorio">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SelectEnabled" HeaderText="SelectEnabled" ReadOnly="True"

Visible="False" UniqueName="SelectEnabled">

</telerik:GridBoundColumn>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" >

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="Codigo" Visible="false" HeaderText="Cod"

UniqueName="Codigo">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="DescricaoPt" HeaderText="Descrição"

UniqueName="DescricaoPt">

<asp:TextBox ID="TxtDescricaoPt" runat="server" Text='<%# Bind("DescricaoPt") %>'

Width="90%"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TxtDescricaoPt"

ErrorMessage="(*)"></asp:RequiredFieldValidator>

</EditItemTemplate>

<asp:Label ID="LblDescricao" runat="server" Text='<%# Eval("DescricaoPt") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Datas" UniqueName="Datas">

<asp:Label Visible='<%# Eval("MostrarDataInicioFim") %>' ID="LblDatasInicioFim" runat="server"

Text="Datas de Início e de Fim: " Width="200px"></asp:Label>

<telerik:RadDatePicker Width="90px" Visible='<%# Eval("MostrarDataInicioFim") %>' ID="RDateInicio"

Enabled='<%# Eval("ObterResposta") %>' AutoPostBack="true" runat="server" DbSelectedDate='<%# Eval("DataHoraInicio") %>'>

</telerik:RadDatePicker>

<telerik:RadDatePicker Width="90px" Visible='<%# Eval("MostrarDataInicioFim") %>' ID="RDateFim"

Enabled='<%# Eval("ObterResposta") %>' AutoPostBack="true" runat="server" DbSelectedDate='<%# Eval("DataHoraFim") %>'>

</telerik:RadDatePicker>

<asp:Label ID="LblDataLimite" Visible='<%# Eval("MostrarDataLimite") %>' runat="server"

Text="Data Limite: " Width="200px"></asp:Label>

<telerik:RadDatePicker Width="90px" ID="RDateLimite" Visible='<%# Eval("MostrarDataLimite") %>'

Enabled='<%# Eval("ObterRespostaLimite") %>' runat="server" DbSelectedDate='<%# Eval("DataLimite") %>'>

</telerik:RadDatePicker>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Vagas" HeaderText="Vagas" SortExpression="Vagas"

UniqueName="Vagas">

 <asp:Label ID="LblVagas" runat="server" Visible='<%# Eval("MostrarVagas") %>'

Text='<%# Eval("VagasFalsas") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Preco" HeaderText="Preço" SortExpression="Preco"

UniqueName="Preco">

<asp:Label ID="LblPreco" runat="server" Text='<%# String.Format(CultureInfo.GetCultureInfo("pt-PT"), "{0:C}",Eval("Preco"))%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Obs.">

<asp:ImageButton ID="ImageButton1" CommandName="Obs" Visible='<%# Eval("MostrarObservacoes") %>' CommandArgument = '<%# Eval("ObservacoesPt") %>' runat="server" ImageUrl="~/Images/Botoes/BotaoInformacao_21.png" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</ClientSettings>

</FilterMenu>

</telerik:RadGrid>

</asp:Panel>

</NestedViewTemplate>

<telerik:GridBoundColumn DataField="Obrigatorio" HeaderText="Obrigatorio" ReadOnly="True"

Visible="False" UniqueName="Obrigatorio">

</telerik:GridBoundColumn>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="CodigoItem" Visible="false" HeaderText="Cod" ReadOnly="True" UniqueName="CodigoItem">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="DescricaoPt" HeaderText="Descrição" UniqueName="DescricaoPt">

<asp:TextBox ID="TxtDescricaoPt" runat="server" Text='<%# Bind("DescricaoPt") %>'

Width="90%"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TxtDescricaoPt"

ErrorMessage="(*)"></asp:RequiredFieldValidator>

</EditItemTemplate>

<asp:Label ID="LblDescricao" runat="server" Text='<%# Eval("DescricaoPt") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Datas" UniqueName="Datas">

<asp:Label Visible='<%# Eval("DatasVisiveis") %>' ID="LblDatasInicioFim" runat="server"

Text="Datas de Início e de Fim: "></asp:Label>

</div>

<telerik:RadDatePicker Width="90px" Visible='<%# Eval("DatasVisiveis") %>' ID="RDateInicio" Enabled='<%# Eval("ObterResposta") %>'

runat="server" AutoPostBack="true" DbSelectedDate='<%# Eval("DataInicial") %>'>

</telerik:RadDatePicker>

<telerik:RadDatePicker Width="90px" Visible='<%# Eval("DatasVisiveis") %>' ID="RDateFim" Enabled='<%# Eval("ObterResposta") %>'

runat="server" AutoPostBack="true" DbSelectedDate='<%# Eval("DataFinal") %>'>

</telerik:RadDatePicker>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Vagas" HeaderText="Vagas" SortExpression="Vagas"

UniqueName="Vagas">

 <asp:Label ID="LblVagas" runat="server" Visible='<%# Eval("MostrarVagas") %>' Text='<%# Eval("VagasFalsas") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Preco" HeaderText="Preço" UniqueName="Preco">

<asp:Label ID="LblPreco" runat="server" Text='<%# String.Format(CultureInfo.GetCultureInfo("pt-PT"), "{0:C}",Eval("Preco")) %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Obs.">

<asp:ImageButton ID="ImageButton1" CommandName="Obs" Visible='<%# Eval("MostrarObservacoes") %>' CommandArgument = '<%# Eval("Observacoes") %>' runat="server" ImageUrl="~/Images/Botoes/BotaoInformacao_21.png" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridCheckBoxColumn DataType="System.Boolean" DataField="ControlarPreco" HeaderText="ControlarPreco"

SortExpression="ControlarPreco" UniqueName="ControlarPreco" Visible="false">

</telerik:GridCheckBoxColumn>

<telerik:GridCheckBoxColumn DataType="System.Boolean" DataField="DatasVisiveis" HeaderText="DatasVisiveis"

SortExpression="DatasVisiveis" UniqueName="DatasVisiveis" Visible="false">

</telerik:GridCheckBoxColumn>

</Columns>

</MasterTableView>

</ClientSettings>

</FilterMenu>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

answered on 15 Jul 2010, 12:59 PM

Hi João,

Expanding an item from the parent grid would, naturally, fire the parent grid's ItemCommand event, as it is a command that is initiated by the parent grid item. It is not related to the nested item.

If you need to select the item that is expanding to show its child item, you need to handle the parent grid's ItemCommand event:

protected void RgEventoItems_ItemCommand(object sender, GridCommandEventArgs e)

{

if(e.CommandName == RadGrid.ExpandCollapseCommandName)

{

e.Item.Selected = !e.Item.Expanded;

}

The above command handler will select the parent grid item that is expanded. You can note I am using the parent grid's ItemCommand event.

Greetings,
Veli
the Telerik team

answered on 19 Jul 2010, 11:38 AM

sample.zip

Hello João,

When commands are initiated from the inner RadGrid, only the inner RadGrid's ItemCommand event should be fired. I cannot reproduce the scenario you are describing, i.e. parent RadGrid's ItemCommand event fired on child grid's command. Can you give me exact steps how to reproduce this?

On the other hand, if you want a selected row on the child grid to automatically select a parent item, you can implement this logic both on the client and the server.

For the client-side approach, you can use the nested RadGrid's OnRowSelected client event:

<ClientEvents OnRowSelected="childGridRowSelected" />

In the event handler, we find the parent data row element and select it:

function childGridRowSelected(sender, args)

{

var parentNestedRow = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender.get_element(), "tr")

var parentTable = $find(Telerik.Web.UI.Grid.GetFirstParentByTagName(parentNestedRow, "table").id);

var parentDataRow = parentNestedRow.previousSibling;

parentTable.selectItem(parentDataRow)

}

The server side approach is similar, only we use the SelectedIndexChanged server event of the nested grid:

protected void RadGrid2_SelectedIndexChanged(object sender, EventArgs e)

{

RadGrid RadGrid2 = (RadGrid)sender;

if (RadGrid2.SelectedItems.Count > 0)

{

GridNestedViewItem nestedItem = (GridNestedViewItem)RadGrid2.NamingContainer;

nestedItem.ParentItem.Selected = true;

}

Attached is a sample page demonstrating this approach. You can also note the 2 grid's ItemCommand events do not mix.

Greetings,
Veli
the Telerik team

answered on 03 Nov 2010, 01:39 PM

Veli,

You wrote that "When commands are initiated from the inner RadGrid, only the inner RadGrid's ItemCommand event should be fired. I cannot reproduce the scenario you are describing, i.e. parent RadGrid's ItemCommand event fired on child grid's command"

If that is the case, then why have I been told (via a support ticket) that it's by design for RadGrid events to bubble up?

I have a similar situation where I have a RadGrid with a NestedViewTemplate and in there are various ASP controls and some nested RadGrids. The user clicks the outer RadGrid to expand that row to reveal the template. If they click it again, it collapses that row. Fine, that works ok. But, once the outer grid is clicked and expanded, clicking on a particular RadGrid that offers functionality to the user then the outer RadGrid collapses afterward as its ItemCommand event has been fired.

The nested RadGrid works ok...I have a client-side event to fire to ensure the row is selected (or else I'm losing the SelectedValues on postback) and the ItemCommand event fires for the nested grid in order to Delete a row if a user clicks the Delete button but, after that, the outer RadGrid's ItemCommand even then fires as if I'd clicked on the outer grid, which I didn't!

This must be corrected.

Jerry

answered on 04 Nov 2010, 02:42 PM

Hi Jerry T.,

This behavior is most probably due to the fact that the nested view of the parent grid is rendered in a grid item itself. So, if you handled the client-side OnRowClick event of the parent grid, it will be fired for the nested view item too. This means that any click inside the nested item on any control that you may have will fire the parent item's click event. If you fire an item command from this event immediately, this may explain why you get the parent grid's ItemCommand fire on the server too. Effectively, you will have to prevent postbacks from clicks that originate inside the nested items of the parent grid.

Veli
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

NestedViewTemplate RadGrid not firing ItemCommand

11 Answers, 1 is accepted