Open Lightbox from Radgrid with parameters

2 posts, 0 answers
  1. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 01 Dec 2013 Link to this post

    Hi,

    How can I pass parameters to Lightbox from Radgrid Item_DataBound? I am trying to bind RadHtmlChart based on RadGrid DataKey value. Here is my code. Could you please let me know? I am not sure how to do this. I just upgraded our projects to new controls. Thanks for any help.


      <telerik:RadLightBox ID="RadLightBox1" runat="server" width="400px" height="350px">
        <Items>
            <telerik:RadLightBoxItem>
                <ItemTemplate>
                        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Transitions="true" Skin="Metro"
                                        OnClientSeriesClicked="OnClientChartClicked">
                                        <PlotArea>
                                            <Series>
                                                <telerik:PieSeries DataFieldY="total" NameField="office" ColorField="PartyColor"
                                                    ExplodeField="IsExploded">
                                                    <LabelsAppearance DataFormatString="{0}" >
                                                    </LabelsAppearance>
                                                </telerik:PieSeries>
                                            </Series>
                                        </PlotArea>
                                    </telerik:RadHtmlChart>
                </ItemTemplate>
                </telerik:RadLightBoxItem>
                </Items>
        </telerik:RadLightBox>



     <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" GridLines="None"
                                    Skin="Office2007" Width="600px" Style="height: auto;" OnItemDataBound="RadGrid1_ItemDataBound">
                                    <MasterTableView ShowHeadersWhenNoRecords="true" DataKeyNames="type_id">
                                        <Columns>
                                            <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False" DataField="Name"
                                                HeaderText="Name" ReadOnly="True" UniqueName="Name">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="count" HeaderText="Total" UniqueName="count">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridHyperLinkColumn Text="View Details" UniqueName="viewDeatils" />
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
    Code behind
    -----------------------------------------------
           protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
            {
                if (e.Item is GridDataItem)
                {
                    GridDataItem item = (GridDataItem)e.Item;
                    HyperLink link = (HyperLink)item["viewDeatils"].Controls[0];
                    int index = item.ItemIndex;
                   link.Attributes.Add("onclick", String.Format("ShowGraph('{0}');", item.GetDataKeyValue("type_id").ToString()));
                }

    Javascript:
    ----------------------

         function ShowGraph() {
                    var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
                    lightBox1.show();
                }


            }

  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 03 Dec 2013 Link to this post

    Hello Nara,

    Since you are using an ItemTemplate, the template will be render after the LightBox is opened. A possible solution to pass a parameters to RadHtmlChar is to save the ID into a HiddenField and after you get the char client object to use the id to bind it. Please check out the following code snippet.
    JavaScript:
    <script type="text/javascript">
        function OpenLightBox(index) {
            $get('<%= HiddenField1.ClientID %>').value = index;
            var lightBox = $find('<%= RadLightBox1.ClientID  %>')
            lightBox.show();
        }
     
        function LightBoxShowed(sender, args) {
            var ID = $get('<%= HiddenField1.ClientID %>').value;
            var htmlChar = $telerik.findControl(sender.get_element(), "RadHtmlChart1");
            //after you find the char you could bind it by using the ID
        }
    </script>
    ASPX:
    <asp:HiddenField runat="server"  ID="HiddenField1" />

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top