[Solved] $find RadGrid null

[stonger]

Hi,
I have a problem with

 

$find("<%= RadGrid1.ClientID %>") returning null on callback, when I want to refresh RadGrid control.

Onclick registration for ImageButton inside DetailTables (inside RadGrid)

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {

            if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "Detail")
            {
                GridDataItem item = (GridDataItem)e.Item;

                ImageButton deleteBtn = (ImageButton)item["ArrowColumn2"].Controls[1];
                string onclick = deleteBtn.Attributes["OnClick"];
                deleteBtn.Attributes.Clear();
                deleteBtn.Attributes.Add("OnClick", "ConfirmDelete(this," + item["ExamID"].Text + ", 'DeleteExam','" + item["Name"].Text.ToString() + "'); return false;");

            }

        }

 
ConfirmDelete:

function ConfirmDelete(sender, rowindex, arg, arg2) {
            postbackdugme = sender;
            CallServer(arg + '*' + rowindex);
            return false;
        }

Callback registration:

ClientScriptManager cm = Page.ClientScript;
           cbReference = cm.GetCallbackEventReference(this, "arg",
               "ReceiveServerData", "", "errorData", true);
           String callbackScript = "function CallServer(arg, context) { __theFormPostData = ''; __theFormPostCollection = new Array(); WebForm_InitCallback(); " +
               cbReference + "; }";
           cm.RegisterClientScriptBlock(this.GetType(),
               "CallServer", callbackScript, true);

Callback Receive function

function ReceiveServerData(arg, context) {

            if (arg.substr(0, 5) == 'Error') {
                radalert("<h3 style='color: #ff0000;'><strong>" + arg + " </strong> </h3>", null, null, "Result");
            }

            radalert("<h3 style='color: #ff0000;'><strong>" + arg + " </strong> </h3>", null, null, "closeRadWindow");

            var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            masterTable.rebind();

            var detailTablesArray = $find("<%= RadGrid1.ClientID %>").get_detailTables();
            detailTablesArray[0].rebind();

        }

RadGrid

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" AllowAutomaticDeletes="True"
    AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowPaging="True"
    DataSourceID="SqlDataSource1" AllowSorting="True" Skin="Office2010Blue"
    Height="100%" Width="100%" OnItemInserted="RadGrid1_ItemInserted" OnItemCommand="RadGrid1_ItemCommand"
    OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="CertificationID" DataSourceID="SqlDataSource1"
        CommandItemDisplay="TopAndBottom" EditMode="EditForms">
        <CommandItemSettings ExportToPdfText="Export to PDF" />
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="LinkButton">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="CertificationID" DataType="System.Int32" FilterControlAltText="Filter CertificationID column"
                HeaderText="CertificationID" ReadOnly="True">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CertificationNameShort" FilterControlAltText="Filter CertificationNameShort column"
                HeaderText="CertificationNameShort" SortExpression="CertificationNameShort" UniqueName="CertificationNameShort">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CertificationNameLong" FilterControlAltText="Filter CertificationNameLong column"
                HeaderText="CertificationNameLong" SortExpression="CertificationNameLong" UniqueName="CertificationNameLong">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ExamsInCertification" DataType="System.Int32"
                FilterControlAltText="Filter ExamsInCertification column" HeaderText="ExamsInCertification"
                SortExpression="ExamsInCertification" UniqueName="ExamsInCertification" ReadOnly="true">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <DetailTables>
            <telerik:GridTableView Name="Detail" DataKeyNames="ExamID" AllowSorting="false" DataSourceID="SqlDataSource2"
                Width="100%" PageSize="10" RetrieveAllDataFields="false" runat="server"
                CommandItemDisplay="Top" EditMode="PopUp" NoDetailRecordsText="No records to display."
                AutoGenerateColumns="false" AllowAutomaticUpdates="True" AllowAutomaticDeletes="false"
                AllowAutomaticInserts="true"
                CommandItemSettings-AddNewRecordText="New exam">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CertificationID" MasterKeyField="CertificationID" />
                </ParentTableRelation>
                <AlternatingItemStyle />
                <NoRecordsTemplate>
                    <asp:Label ID="Label1" runat="server" Text="No records."></asp:Label>
                </NoRecordsTemplate>
                <EditFormSettings ColumnNumber="1" CaptionDataField="Exam" InsertCaption="New exam"
                    CaptionFormatString="Edit properties of exam {0}">
                    <FormTableItemStyle Width="100%" Height="29px" />
                    <FormTableStyle GridLines="None" CellPadding="2" CellSpacing="0" />
<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>

                    <FormStyle Width="100%" BackColor="#eef2ea" />
                    <FormTemplate>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# Bind("Exam") %>' Font-Names="Verdana"
                            Font-Size="Small" Width="100%">
                        </telerik:RadTextBox>
                        <asp:Button runat="server" Text="test" />
                        <telerik:RadTextBox ID="radTxtCssValue" runat="server" Text='<%# Bind("Name") %>'
                            Font-Names="Verdana" Font-Size="Small" Width="100%">
                        </telerik:RadTextBox>
                        <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                            runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                    </FormTemplate>
                </EditFormSettings>
                <CommandItemSettings AddNewRecordText="New exam" ExportToPdfText="Export to PDF" />
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                </RowIndicatorColumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="LinkButton" ItemStyle-Width="50px" UniqueName="EditCommandColumn">
                        <ItemStyle Width="50px" />
                    </telerik:GridEditCommandColumn>
                    <%-- <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" Text="Delete2"
                            UniqueName="DeleteColumn">
                        </telerik:GridButtonColumn>--%>
                    <telerik:GridBoundColumn DataField="CertificationID" FilterControlAltText="Filter exam number column"
                        HeaderText="Certification ID" UniqueName="CertificationID" ReadOnly="true" Visible="false" />
                    <telerik:GridBoundColumn DataField="ExamID" FilterControlAltText="Filter exam number column"
                        HeaderText="Exam ID" UniqueName="ExamID" ReadOnly="true" Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Exam" DataType="System.String" FilterControlAltText="Filter exam number column"
                        HeaderText="Exam number" UniqueName="Exam">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter Name column"
                        HeaderText="Exam name" UniqueName="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="ArrowColumn">
                        <ItemTemplate>
                            <asp:ImageButton BorderStyle="Solid" ID="ImageButton1" AlternateText="Delete4" runat="server"
                                CommandName="Delete4" ImageUrl="~/_layouts/Images/Delete.GIF" OnClientClick="showmodal(this);" />
                        </ItemTemplate>
                        <HeaderStyle Width="30px" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="ArrowColumn2">
                        <ItemTemplate>
                            <asp:ImageButton BorderStyle="Solid" ID="ImageButton2" AlternateText="Delete4" runat="server"
                                CommandName="Delete4" ImageUrl="~/_layouts/Images/Delete.GIF" />
                        </ItemTemplate>
                        <HeaderStyle Width="30px" />
                    </telerik:GridTemplateColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
    <SelectedItemStyle BackColor="#66CCFF" />
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
    </HeaderContextMenu>
</telerik:RadGrid>

Callback works fine: in code behind record are deleted and

ReceiveServerData is executed but it breaks on var mastertable = $find(%= RadGrid1.ClientID %>").get_masterTableView(); - cannot find RadGrid1 control, it is null

Help?

 

 

 

 

 

 

 

 

 

[Iana Tsolova]

Hi Stonger,

When the page is ajax-enabled, you need to register your scripts through the ScriptManager corresponding static methods, not through the Page.ClientScripts property.

Best wishes,
Iana Tsolova
the Telerik team

[Tim]

I have the same issue, the client-side Grid object is never found.  If I do a $("#grid1") I do get the element, however, doing a $find("#grid1") returns null.  I am NOT doing any registering of scripts on any postbacks.  However, my Grid is inside a FormView's Insert/Edit template.  The FormView is placed into InsertMode on the initial load, so it's not any PostBack causing the issue.  What would be causing the grid not to register it's client-side API?

[Viktor Tachev]

Hello,

If I understand correctly you have a RadGrid inside a FormView control. In this case to access the RadGrid you need to get reference to the FormView control first. You need that reference to access the grid. Take a look at the example below. It illustrates how you could get reference of the RadGrid and the MasterTableView client-side.

function getMasterTable() {
                    var radGrid = $find("<%= FormView1.FindControl("RadGrid1").ClientID %>");
                    var masterTableView = radGrid.get_masterTableView();
                    // additional code goes here
}

The markup for the example looks like shown below:

<asp:FormView ID="FormView1" runat="server" DefaultMode="Insert">
            <InsertItemTemplate>
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Age" HeaderText="Age"></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </InsertItemTemplate>
</asp:FormView>

If you need more information for the client-side API of the RadGrid you would find this article interesting.

I hope this is helpful.

Regards,

Victor Tachev

Telerik