Open Lightbox from Radgrid with parameters

[nav100]

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();
            }


        }

[Kostadin]

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