RadGrid cannot show Edit Form

[Yefta]

Hai, i got a problem.

I am following this demo to show a Edit Form on RadGrid. But i can't display the Edit Form when i click Edit button.

This is the code i am using:

<telerik:RadGrid ID="radGridTarget" GridLines="None" runat="server" AllowAutomaticDeletes="True"
    AllowAutomaticInserts="True" PageSize="10" Width="500px"
    OnItemDeleted="radGridTarget_ItemDeleted" OnItemInserted="radGridTarget_ItemInserted"
    OnItemUpdated="radGridTarget_ItemUpdated" AllowAutomaticUpdates="True" AllowPaging="True"
    AutoGenerateColumns="False"
    onneeddatasource="radGridTarget_NeedDataSource"
    onitemcommand="radGridTarget_ItemCommand" >
    <MasterTableView CommandItemDisplay="Top" HorizontalAlign="NotSet" AutoGenerateColumns="False">
    <NoRecordsTemplate>
        <table width="100%" border="0" cellpadding="20" cellspacing="20">
            <tr>
                <td align="center">
                    <h2 style="color:Black">No Data Found.</h2>
                </td>
            </tr>
        </table>
     </NoRecordsTemplate>
    <PagerStyle Mode="NumericPages"/>
        <Columns>
            <telerik:GridEditCommandColumn HeaderStyle-Width="10%"></telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="Sales" HeaderText="NIK Sales" Display="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Target" DefaultInsertValue="Target" HeaderStyle-Width="20%" UniqueName="Target" DataField="Target">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Amount" HeaderStyle-Width="20%" HeaderText="Target Amount" SortExpression="Amount" UniqueName="Amount">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Campaign" HeaderText="Campaign" UniqueName="Campaign" HeaderStyle-Width="20%"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="StartDate" HeaderText="StartDate" UniqueName="StartDate" HeaderStyle-Width="10%"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EndDate" HeaderText="EndDate" UniqueName="EndDate" HeaderStyle-Width="10%"></telerik:GridBoundColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this target?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" HeaderText="Delete"
                HeaderStyle-Width="10%" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
            </telerik:GridButtonColumn>
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <table id="tableFormEdit" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                    style="border-collapse: collapse;">
                    <tr class="EditFormHeader">
                        <td colspan="2">
                            <b>Target Details</b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table id="Table3" width="450px" border="0" class="module">
                                <tr>
                                    <td>Target:
                                    </td>
                                    <td>
                                        <telerik:RadDropDownList ID="radDropDownTargetList" EmptyMessage="Target" runat="server" SelectedItem='<%# Bind("Target") %>'
                                            DataSource='<%# PopulateTargetList() %>' DataTextField="Desc" DataValueField="Value" Skin="MetroTouch" TabIndex="5" >
                                        </telerik:RadDropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Amount:
                                    </td>
                                    <td>
                                        <telerik:RadNumericTextBox ID="radTextAmount" runat="server" EmptyMessage="Amount" Text='<%# Bind("Amount") %>' TabIndex="6"
                                            Skin="MetroTouch" ShowButton="false" ShowSpinButtons="false">
                                            <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                        </telerik:RadNumericTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Campaign:
                                    </td>
                                    <td>
                                        <telerik:RadDropDownList ID="radDropDownCampaignList" EmptyMessage="Campaign" runat="server" SelectedItem='<%# Bind("Campaign") %>'
                                            DataTextField="Desc" DataValueField="Value" Skin="MetroTouch" TabIndex="7" >
                                        </telerik:RadDropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Start Date:
                                    </td>
                                    <td>
                                        <telerik:RadDatePicker ID="radStartDate" runat="server" Culture="en-US" TabIndex="8" Skin="MetroTouch">
                                            <Calendar ID="Calendar1" runat="server">
                                                <SpecialDays>
                                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Yellow">
                                                    </telerik:RadCalendarDay>
                                                </SpecialDays>
                                            </Calendar>
                                            <DateInput DisplayDateFormat="d/M/yyyy" DateFormat="d/M/yyyy" LabelWidth="40%" TabIndex="6">
                                            </DateInput>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                <tr>
                                    <td>End Date:
                                    </td>
                                    <td>
                                        <telerik:RadDatePicker ID="radEndDate" runat="server" Culture="en-US" TabIndex="9" Skin="MetroTouch">
                                            <Calendar ID="Calendar2" runat="server">
                                                <SpecialDays>
                                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Yellow">
                                                    </telerik:RadCalendarDay>
                                                </SpecialDays>
                                            </Calendar>
                                            <DateInput DisplayDateFormat="d/M/yyyy" DateFormat="d/M/yyyy" LabelWidth="40%" TabIndex="6">
                                            </DateInput>
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" colspan="2">
                            <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' TabIndex="10"></asp:Button>
                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" TabIndex="11"
                                CommandName="Cancel"></asp:Button>
                        </td>
                    </tr>
                </table>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
    </ClientSettings>
</telerik:RadGrid>

protected void radGridTarget_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.InitInsertCommandName) //"Add new" button clicked
    {
        GridEditCommandColumn editColumn = (GridEditCommandColumn)radGridTarget.MasterTableView.GetColumn("EditCommandColumn");
        editColumn.Visible = false;
    }
    else if (e.CommandName == RadGrid.RebindGridCommandName && e.Item.OwnerTableView.IsItemInserted)
    {
        e.Canceled = true;
    }
    else
    {
        GridEditCommandColumn editColumn = (GridEditCommandColumn)radGridTarget.MasterTableView.GetColumn("EditCommandColumn");
        if (!editColumn.Visible)
            editColumn.Visible = true;
    }
}

Where part that i gone wrong?

Please help me. Thank you

 

[Eyup]

Hello Yefta,

Could you temporarily disable any AJAX on the page(RadAjaxPanels, RadAjaxManager, UpdatePanel, etc.) and enable your script debugger (FireBug or F12) to see whether there are any script errors interfering?

Also, please comment out the code logic within the radGridTarget_ItemCommand event handler and let me know about the result.

Regards,
Eyup
Telerik