在 RadLightBox 的 RadLightBoxItem 标记内查找 RadGrid 的客户端 ID答案

【问题标题】：Finding the Client ID for a RadGrid inside a RadLightBoxItem tag in a RadLightBox在 RadLightBox 的 RadLightBoxItem 标记内查找 RadGrid 的客户端 ID
【发布时间】：2016-07-20 12:22:55
【问题描述】：

我正在尝试使用 JavaScript 从客户端获取 RadGrid 控件的 ClientID，以便能够从客户端将数据绑定到该控件。

RadGrid 存在于 RadLightBox 中，需要在按钮单击事件中填充。 LightBox 的标记看起来像这样。

<telerik:RadLightBox ID="RadLightBox1" runat="server">
    <Items>
        <telerik:RadLightBoxItem runat="server">
            <ItemTemplate>
                <telerik:RadGrid runat="server" ID="lightbox_radgrid" AutoGenerateColumns="false">
                    <MasterTableView>
                        <Columns>
                            <%-- Columns not shown here --%>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnCommand="window_radgrid_OnCommand" />
                    </ClientSettings>
                    <GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" />
                </telerik:RadGrid>
            </ItemTemplate>
        </telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

这是我编写的部分 Javascript 代码。我能够找到 RadLIghtBoxItem 元素，但无法获取 RadGrid 和它的 clientID。此方法将在成功调用 Web 服务以返回数据时执行。

function onSucessCallThis(result, userContext, methodName) {
            var radWindow = $find('<%= lightbox.ClientID %>');
            var LightBoxItems = radWindow.get_items();
            console.log(LightBoxItems);
            console.log(LightBoxItems.get_count());
            var item = LightBoxItems.getItem(0);
            console.log(item); //Able to fetch LightBoxItem
            var radGrid = item.FindControl("lightbox_radgrid"); //Doesn't work
        }

我不确定这是否是在 radLightBox 中放置 radGrid 的正确方法。网上这样的例子不多。

【问题讨论】：

标签： javascript asp.net telerik radgrid

【解决方案1】：

我认为您使用RadWindow's ContentTemplate 会更容易。比如：

        <telerik:RadWindow ID="RadWindow1" runat="server" Modal="true">
            <ContentTemplate>
                <telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
            </ContentTemplate>
        </telerik:RadWindow>
        <script>
            function onSucessCallThis(result, userContext, methodName) {
                var wnd = $find("<%=RadWindow1.ClientID%>");
                if (!wnd.isVisible()) {
                    wnd.show();
                }
                var grid = $find("<%=RadGrid1.ClientID%>");
                var mtv = grid.get_masterTableView();
                mtv.set_dataSource(result);
                mtv.dataBind();
            }
        </script>

如果您想继续使用灯箱，请查看Get Client-side Reference to a Control Object 文章。要点是您可以轻松地循环遍历 DOM，例如：

        <telerik:RadLightBox ID="RadLightBox1" runat="server">
            <Items>
                <telerik:RadLightBoxItem runat="server">
                    <ItemTemplate>
                        <telerik:RadGrid CssClass="gridInLightbox" runat="server" ID="lightbox_radgrid" AutoGenerateColumns="false">

                        </telerik:RadGrid>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <script>
            function onSucessCallThis(result, userContext, methodName) {
                var lightbox = $find('<%= RadLightBox1.ClientID %>');

                //item objects do not refer the DOM so we can use the lightbox as a parent for the traversal
                var radGrid = $telerik.$(".gridInLightbox", lightbox.get_element())[0].control;//of course, add defensive checks
                alert(radGrid);
                var mtv = radGrid.get_masterTableView();
                mtv.set_dataSource(result);
                mtv.dataBind();
            }
        </script>

【讨论】：