Show popup while click on a link in Grid

[Sikhesh]

Hi,

I am new to telerik. Now i am using telerik trial version.
I have once scenario.
> Grid contains 10 rows
> One column is template column, which contain a link button
> While click on the link, i need to open a popup, like model window. The model window should show some details about the clicked records.
> Data displayed in the model window based on the arguments received from the link button

Kindly suggest how can i implement this. Which control can i use for getting this feature.

All my bindings are dynamic and i cannot set any datasource in the design.

I need the feature almost similar to hierarchical data grid. Where can get the more details about the real implementation. In the "step-by-step" tutorial it is not much explenatory and datasource is set in the markup itself.

[Princy]

Hi Sikhesh,

Please take a look at the sample code snippet. You can try something similar.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" . .>
    <MasterTableView DataKeyNames="OrderID" ClientDataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            <telerik:GridTemplateColumn HeaderText="PopUp">
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="returnGetSelectedRow(this)">Open Detail</asp:LinkButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadWindowManager ID="radwinmgr" runat="server">
    <Windows>
        <telerik:RadWindow ID="win1" runat="server">
            <ContentTemplate>
                ID:
                <asp:Label ID="Label1" runat="server"></asp:Label><br />
                City:
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

JS:

<script type="text/javascript">
    function GetSelectedRow(lnk) {
        var row = lnk.parentNode.parentNode;
        var rowIndex = row.rowIndex - 1;
        var grid = $find("<%= RadGrid1.ClientID %>");
        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var data = MasterTable.get_dataItems();
            var rows = data[rowIndex - 1];
            var customerId = rows.getDataKeyValue("OrderID"); //Access OrderID using DataKeyValue
            var city = row.cells[1].innerHTML
            var win1 = $find("<%=win1.ClientID%>");
            var Label1 = document.getElementById("win1_C_Label1"); // accessing controls inside radwindow
            Label1.innerHTML = customerId; // assigning the column value to the control inside radwindow
            var Label2 = document.getElementById("win1_C_Label2");
            Label2.innerHTML = city;
            win1.show();
        }
        return false;
    }
</script>

Please take a look into the following links to know more about telerik:
Telerik UI for ASP.NET AJAX Documentation
Online Demo

Thanks,
Princy

[Sikhesh]

Dear Princy,

I need to do the same activity from the server side(code behind) not using client side script, as the pop-up should should load with some values, which i will get based on the link of each row clicked (arguments passed in the click event) , from the database. I won't be able to pre-populate those values.

Also let me know any control available in Telerik, which will do the same functionality like "WebDialogWinow" in infragistic control package.

[Princy]

Hi Sikhesh,

Please take a look at the following code snippet for opening popup from server side.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            <telerik:GridTemplateColumn HeaderText="PopUp">
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Open Detail</asp:LinkButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadWindowManager ID="radwinmgr" runat="server">
    <Windows>
        <telerik:RadWindow ID="win1" runat="server" Modal="true">
            <ContentTemplate>
                ID:
                <asp:Label ID="Label1" runat="server"></asp:Label><br />
                City:
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

C#:

protected void LinkButton1_Click(object sender, EventArgs e)
{
  LinkButton lnk = (LinkButton)sender;
  GridDataItem item = (GridDataItem)lnk.NamingContainer;
  string id = item.GetDataKeyValue("OrderID").ToString();
  string city = item["ShipCity"].Text;
  win1.VisibleOnPageLoad = true;
  Label1.Text = id;
  Label2.Text = city;
}

You can take a look at the following links to know more about Windows of Telerik.
RadWindow - Telerik's ASP.NET Window
RadWindow

Thanks,
Princy

[Sikhesh]

Dear Princy,

Thanks for the update.
This is working as i expected. But there is an issue i am facing. On each post back, the window is appearing.
In my case, in my grid i have multiple dropdowns in a row, if i click on the link and open the model popup and on click of close, it is closing. Popup is hiding i think. After this action if any post back happen in the page, the popup window will open.
Kindly let me know how this can be avoided. I tried by setting the visibility property also. It is not working as expected.

[Sikhesh]

Dear Princy,

Now i am able to achieve the functionality as per my expectation. Kindly confirm my approach is correct or not.
I am making the RadWindow "rWIN.VisibleOnPageLoad" property to "false" on page load and making this property to "true" on link button click event.

Thanks for the support.

Regards
Sikhesh S

[Princy]

Hi Sikhesh,

This is an expected behavior. Your approach is can be implemented but a better approach is that you open the window from clientside as shown below:

C#:

//The LinkButton Onclick event
protected void LinkButton1_Click(object sender, EventArgs e)
{
 LinkButton lnk = (LinkButton)sender;
 GridDataItem item = (GridDataItem)lnk.NamingContainer;
 string id = item.GetDataKeyValue("OrderID").ToString();
 string city = item["ShipCity"].Text;
 string script = "function f(){showWindow('" + id + "','" + city + "'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
 ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true); // calls the clientside function
}

JS:

<script type="text/javascript">
 function showWindow(id,city) {
   var win1 = $find("<%=win1.ClientID%>");
   var Label1 = document.getElementById("win1_C_Label1");
   Label1.innerHTML = id;
   var Label2 = document.getElementById("win1_C_Label2");
   Label2.innerHTML = city;
   win1.show();
 }
</script>

Thanks,
Princy

[Sikhesh]

Dear Princy,

I need to fill more than 10 fields in the run time, so passing as a parameter to javascript function is not a good approach i feel.
Now another issue i found is "pop-up" appearing in case of full page refresh, if it is opened and closed once.
My scenario as follows,
1. Page loaded with a grid, having 10 rows, 5 columns
2. One bounded field, two dropdown, one link
3. On click on the link button, model pop-up will open (based on the parmeter passed, filling the contents of the pop-up
4. While changing any of the drop down, the model pop-up was appearing. This issue i resolved by setting the "rWIN.VisibleOnPageLoad" property to "false" on page load
5. Now, if i refresh the page completely, at that time the hiden pop-up appearing. How this can be avoided. Pop-up should display only on click of link, this is the expected functionality.

[Princy]

Hi Sikhesh,

Please take a look at the following article which describes about Opening RadWindow from the server. You can try the approaches mentioned in this article.

Thanks,
Princy