Search code examples
javascriptasp.netcheckboxteleriktelerik-grid

Open dialog window on checkbox click in Telerik RadGrid


I have a Telerik RadGrid with a GridTemplate column that has an asp:CheckBox inside of it. I chose to use a GridTemplate column rather than a GridCheckBoxColumn or ClientSelectColumn because I want the user to have the ability to check the box and on checkbox clicked if it is checked open a dialog window for them to upload attachments to the record. I am not sure how I will go about opening a RadWindow on checkbox click from within a grid.

The overall goal that I am trying to accomplish is the following:
I have a grid that looks like a checklist. If the user checks the checkbox in a row then that means they will have to upload a document for it so a dialog window will open with a small upload form. Once they hit save the window will close and the grid will rebind with a link to view the attachment in the next column over. If anyone has a better workflow I am open to suggestions, otherwise any advice on how to do something like this would be greatly appreciated.


Solution

  • As far as concerning the command to open the RadWindow I would also go in a similar way as proposed by Mark. There is no reason to use a checkbox as a button since this is the function of such control and you do not need to use its status rather then for a command.

    Add a button column and set its CommandName="something"

    Create the event itemCommand in the grid and in code behind add something like this in it:

    if (e.CommandName == "something")
        {
    
            if (e.Item is RadGridDataItem)
            {  
                RadGridDataItem item = e.Item as RadGridDataItem;
                string script = "function f(){openRadWindow(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);  
            }
        }
    

    Add your JS:

    function openRadWindow() {
            var radwindow = $find('<%=RadWindow1.ClientID %>');
            radwindow.show();
        }
    

    Add your radWindow:

    <telerik:RadWindow ID="RadWindow1" VisibleOnPageLoad="false" OnClientClose="//here you can generate the event to rebind your grid and show the update" runat="server" Width="450px" Height="650px" NavigateUrl="Window1.aspx" >
                        </telerik:RadWindow>
    

    Create the page Window1.aspx and elaborate in there your logic to load the file.

    Another way, easier, could be to use use an edit template form instead of the radWindow and add an asyncUploader in there together with the other controls you may need to be filled in so avoiding to have to get all the references to associate the input to the record.