on RadGrid's row double click event how to Redirect a usercontrol with parameter

[nelson]

Hi All,

I have one RadGird control on my SharePoint WebPart. On the row double click I want to load one user control which have to display employee details. For this i want to pass parameter "EmployeeID" to that User control.

Thanks in advance

[Iana Tsolova]

Hi nelson,

In order to achieve your goal, you can handle the OnRowDblClick client-side event. There you can first get the employee id using the get_dataKeyValue() method on the client. Then fire a custom command for the item passing the desired parameters. Handle the custom command on ItemCommand server-side event of the RadGrid where you can execute your procedures for loading the mentioned user control.

Find more information on how to implement the above solution using the grid API in the below articles;

http://www.telerik.com/help/aspnet-ajax/grid_onrowdblclick.html
http://www.telerik.com/help/aspnet-ajax/grid_getdatakeyvalue().html
http://www.telerik.com/help/aspnet-ajax/grdextractkeyvaluesclientside.html
http://www.telerik.com/help/aspnet-ajax/grid_firecommand.html
http://www.telerik.com/help/aspnet-ajax/telerik.web.ui-telerik.web.ui.radgrid-itemcommand_ev.html

Kind regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[D]

These links are broken.  Here are the updated links:  
http://www.telerik.com/help/aspnet-ajax/grid-onrowdblclick.html
http://www.telerik.com/help/aspnet/grid/radgrid-telerik.webcontrols.grideditableitem-getdatakeyvalue.html
http://www.telerik.com/help/aspnet-ajax/grid-extract-key-values-client-side.html
http://www.telerik.com/help/aspnet-ajax/grid-fire-command-event-from-code.html
http://www.telerik.com/help/aspnet/grid/radgrid-telerik.webcontrols.radgrid-itemcommand_ev.html

I'm surprised this isn't a more common issue.  I need to be able to double-click a row in a RadGrid, get the DataKeyValue, and open a new page passing the DataKeyValue as a query string parameter.  There has got to be a way to do this...

Here is what I have to this point based on finding the new locations of the pages referenced above (it doesn't seem to be hitting the OnRowDblClick function):

   

<script type="text/javascript">
        function OnRowDblClick(sender, eventArgs) {
            var dataItem = $get(eventArgs.get_id());
            var grid = sender;
            var MasterTable = grid.get_masterTableView();
            var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
            var cell = MasterTable.getCellByColumnUniqueName(row, "Id");
            var value = cell.innerHTML
            window.location.href = '../Detail.aspx?id=' + value; // Redirect the page          
            return;
        }   
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnRequestStart="onRequestStart" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowSorting="True"
        AllowFilteringByColumn="true" AllowAutomaticDeletes="true" AllowPaging="True"
        PageSize="20" runat="server" GridLines="None" Width="95%" AllowAutomaticUpdates="true"
        AllowMultiRowEdit="true" AllowAutomaticInserts="true" OnItemCommand="RadGrid1_ItemCommand"
        OnItemUpdate="RadGrid1_ItemUpdated" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted">
        <ExportSettings HideStructureColumns="true" />
        <ClientSettings>
            <ClientEvents OnRowDblClick="OnRowDblClick" />
        </ClientSettings>

...........
//code-behind
public virtual object GetDataKeyValue(string keyName)

[Iana Tsolova]

Hello D,

You javascript and grid setup are indeed proper. I can confirm that this is the right approach for achieving your goal. Can you confirm that you do not see any javascript errors on the page? And if you try debugging the client code and all values are properly returned?

Regards,
Iana
the Telerik team

[D]

Thank you for the response, Iana.  No javascript errors.  It appears as everything is configured as defined in the links above.  These links are all trying to accomplish different outcomes.  I was trying to combine the information in them to get this functionality working (double-clicking a radgrid row, passing the Id to a new page as a querystring parameter).  Perhaps it would be helpful if we just had a single source example of how to accomplish this outcome.  Does such an example exist?  If not, it would be greatly appreciated!

[Iana Tsolova]

Hello D,

Please find the attached sample and let me know if it works as expected on your end if I missed something out.

Kind regards,
Iana Tsolova
the Telerik team

[D]

EDIT:  I was able to resolve this issue...not in the preferable way, but nonetheless:  The value that you are getting the innerHTML of has to be displayed on the page.  I was using an Id value that wasn't visible in the RadGrid.  Once I made this value visible, this method works.  Thank you for your assistance!

Thank you, Iana.  I'm now using this structure, and I'm getting an error on this line:

var data = eventArgs.get_tableView().getCellByColumnUniqueName(row, "Id").innerHTML;

The error is:

Microsoft JScript runtime error: Unable to get value of the property 'innerHTML': object is null or undefined.  

If I choose to ignore the error, it proceeds to the other page with an empty querystring parameter, so I'm assuming the issue is with getting "Id" (I'm using "Id" as opposed to "Item") from the RadGrid (the value I'm attempting to pass into the parameter.  I am building my RadGrid at design time, and I have a column with a UniqueName of "Id".   Note, I also changed the column name to "ContactId" throughout (to make sure this wasn't the result of a conflict with any other controls), and received the same error.  Here is my modified relevant code block:

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventArgs) {
                var row = eventArgs.get_tableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()];
                var columns = eventArgs.get_tableView().get_columns();
                var data = eventArgs.get_tableView().getCellByColumnUniqueName(row, "Id").innerHTML;
                window.location = "/Authenticated/ProspectDetail.aspx?Id=" + data;
            }
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnRequestStart="onRequestStart" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowSorting="True"
        AllowFilteringByColumn="true" AllowAutomaticDeletes="true" AllowPaging="True"
        PageSize="20" runat="server" GridLines="None" Width="95%" AllowAutomaticUpdates="true"
        AllowMultiRowEdit="true" AllowAutomaticInserts="true" OnItemCommand="RadGrid1_ItemCommand"
        OnItemUpdate="RadGrid1_ItemUpdated" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted">
        <ExportSettings HideStructureColumns="true" />
        <ClientSettings>
            <ClientEvents OnRowDblClick="RowDblClick" />
        </ClientSettings>
        <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="Id" DataSourceID="SessionDataSource1"
            HorizontalAlign="NotSet" AutoGenerateColumns="false" ClientDataKeyNames="Id">
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <ItemStyle CssClass="MyImageButton" />
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ConfirmText="Delete this contact?" ConfirmDialogType="RadWindow"
                    ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                    UniqueName="DeleteColumn">
                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                </telerik:GridButtonColumn>
                <telerik:GridBoundColumn DataField="Id" HeaderText="Id" SortExpression="Id" UniqueName="Id"
                    Visible="false">
                </telerik:GridBoundColumn>

[Iana Tsolova]

Hi D,

You receive this error because the column with UniqueName is invisible, thus not rendered and accessible on the client. If you want to be able to access its text via client code, them use the Display property to alter its visibility instead.

Greetings,
Iana Tsolova
the Telerik team