Select row from EditCommand

[Charles]

Forgive the length of this post, but I'm attempting to give all relevant details.

I am currently selecting a single row in a grid by using the ClientSettings-ClientEvents-OnRowClick event. I have linked up a JavaScript function that executes when the row is clicked. It saves an ID from the ClientDataKeys property into a hidden field on the page and then "clicks" a hidden button to load another grid with rows matching the ID. (Basically a master-detail situation, but in two separate grids). Here is the JavaScript and C# server-side code that gets executed:

JavaScript

    // Client-side event called by Rad grid when a row is selected.
    // Gets the Id of the selected profile and saves it in hidden field.
    function RowSelected(sender, eventArgs)
    {
        var hidden = $get("<%=selectedLocationRowId.ClientID %>");
        hidden.value = eventArgs.getDataKeyValue("Id");
        // Need to "press button" on page to initiate server-side code
        var button = $get("<%=btnServerGrid.ClientID %>");
        button.click();
    }

C# - Server-side - exeucted by the "button.click()" line above.

         protected void GetServerData(object sender, EventArgs e)
         {
             ServerController sc = new ServerController();
             List<ServerModel> list = null;
             string s = selectedLocationRowId.Value;
             if(!string.IsNullOrEmpty(s))
             {
                 list = sc.ListServers(new Guid(s)).ToList();
             }
             else
             {
                 list = new List<ServerModel>();
             }
             rgrdServers.DataSource = list;
             rgrdServers.Rebind();
         }

As you can see, the server-side code retrieves the value from the hidden field and then uses that to get the list from our business layer and then populates the grid.

I also have an Edit column in the primary grid that initiates in-place editing of the row. The user can have a row selected and then choose to press the "Edit" link in the edit column in a different row. This takes the highlight off of the currently selected row and puts the editable row into edit mode, but the secondary grid is not updated with the new "child" rows.

I've been trying to somehow execute the population of the secondary grid from the EditCommand (and a number of other places - like ItemCommand) but can't seem to get the secondary grid to refresh itself with new data. The list is retrieved successfully, but the grid does not update with the new data.

I am using "advanced" databinding with the OnNeedDataSource event. The editing and paging works fine - it's just that I seem to somehow have to execute the JavaScript event for ClientSettings-ClientEvents-OnRowClick in order to get this to work. (I'm guessing here as well. I'm just assuming that executing that client-side code from the server might solve this problem.)

I should also include the definition of the grid with appropriate defined events and such. here it is:

<telerik:RadGrid ID="rgrdLocations" runat="server" AllowPaging="true"
    AllowFilteringByColumn="false" AllowMultiRowSelection="false" Height="260px"
    ShowGroupPanel="false" GroupingEnabled="false"
    ShowHeader="true" Skin="MSGridSkin" EnableEmbeddedSkins="false"
    OnItemCreated="rgrdLocations_ItemCreated" AutoGenerateColumns="false"
    Width="786px" onneeddatasource="RadNeedDataSource"
    onitemdatabound="rgrdLocations_ItemDataBound"
    AllowAutomaticUpdates="false"
    onupdatecommand="rgrdLocations_UpdateCommand"
    oncancelcommand="rgrdLocations_CancelCommand"
    oneditcommand="rgrdLocations_EditCommand"
    onitemcommand="rgrdLocations_ItemCommand"
    ClientSettings-ClientEvents-OnRowClick="RowSelected">

    <ClientSettings AllowDragToGroup="false" Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="false" />
        <Resizing AllowColumnResize="false" />
    </ClientSettings>

    <PagerStyle Position=Top Mode="NextPrev" AlwaysVisible="true"/>
    <MasterTableView AutoGenerateColumns="false" PageSize="9" GridLines="Vertical"
        TableLayout="Fixed" EditMode="InPlace" DataKeyNames="Id" ClientDataKeyNames="Id">
        <PagerTemplate>
            <table width="100%" cellpadding="0" cellspacing="0" border="0"
                style="border-top:0px; border-top-color:White;">
                <tr style="background-color:#e1e6dc; border-top:0px;">
                    <td align="left" style="height:26px; padding-left:10px;">
                        <asp:Label ID="lblLocationsHead" runat="server" Text="System Locations" style="font-family:Verdana; font-weight:bold; font-size:11px; color:#666666;">
                        </asp:Label>
                    </td>
                    <td align="right" style="height:26px; padding-right:10px;">
                        <asp:ImageButton ID="imgPrev" ImageUrl="~/Images/arr_left_cal.gif" runat="server">
                        </asp:ImageButton>
                        <asp:DropDownList ID="ddlPager" runat="server">
                        </asp:DropDownList>
                        <asp:ImageButton ID="imgNext" runat="server" ImageUrl="~/Images/arr_right_cal.gif">
                        </asp:ImageButton>
                    </td>
                </tr>
            </table>
        </PagerTemplate>

        <Columns>
            <telerik:GridTemplateColumn HeaderText="Actions" HeaderStyle-Width="13%" UniqueName="EditColumn">
                <ItemTemplate>
                    <asp:LinkButton ID="Edit" CommandName="Edit" runat="server">Edit</asp:LinkButton>
                </ItemTemplate>
                <EditItemTemplate>
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;">
                            <td style="padding:0px 0px 0px 0px;"><asp:LinkButton ID="Cancel" runat="server" CommandName="Cancel" style="font-size:11px;">Cancel</asp:LinkButton></td>
                            <td style="color:#CCCCCC; padding:0px 0px 0px 0px;">&nbsp;|&nbsp;</td>
                            <td style="padding:0px 0px 0px 0px;"><asp:LinkButton ID="Save" runat="server" CommandName="Update" style="font-size:11px;">Save</asp:LinkButton></td>
                        </tr>
                    </table>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Building Name" HeaderStyle-Width="38%">
                <ItemTemplate>
                    <asp:Label ID="BuildingName" runat="server" Font-Size="10px" Text='<%# Eval("BuildingName") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="BuildingNameEdit" runat="server" Font-Size="10px" Text='<%# Eval("BuildingName") %>'></asp:Label>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="System Location" HeaderStyle-Width="23%">
                <ItemTemplate>
                    <asp:Label ID="Location" runat="server" Font-Size="10px" Text='<%# Eval("Location") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="LocationEdit" runat="server" Font-Size="10px" Text='<%# Eval("Location") %>'></asp:Label>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Branch Office" HeaderStyle-Width="10%">
                <ItemTemplate>
                    <asp:CheckBox ID="BranchOffice" runat="server" Checked='<%# Eval("IsBranchOffice") %>' />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:CheckBox ID="BranchOfficeEdit" runat="server" Checked='<%# Eval("IsBranchOffice") %>' />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Country Code" HeaderStyle-Width="7%">
                <ItemTemplate>
                    <asp:Label ID="CountryCode" runat="server" Font-Size="10px" Text='<%# Eval("CountryCode") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="CountryCodeEdit" runat="server" Font-Size="10px" Width="15" Text='<%# Eval("CountryCode") %>'></asp:TextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Area Code" HeaderStyle-Width="9%">
                <ItemTemplate>
                    <asp:Label ID="AreaCode" runat="server" Font-Size="10px" Text='<%# Eval("AreaCode") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="AreaCodeEdit" runat="server" Width="45" Font-Size="10px" Text='<%# Eval("AreaCode") %>'></asp:TextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="Id" Visible=false ReadOnly="false"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>

</telerik:RadGrid>

Once again, sorry about the length. Anyone willing to help?

Thanks.

[Princy]

Hello Charles,

If you want to refresh your second grid on clicking the Edit button, then one possible option (related to approach that you tried) is attaching OnCommand client event to grid and check for the CommandName whether it is "Edit". Then you can try the following client code in order to get the DataKeyValue for the corresponding row.

Client Code:

function OnCommand(sender, args)
{
   var hidden = $get("<%=selectedLocationRowId.ClientID %>");
   var index = args.get_commandArgument();
   var keyValue = args.get_tableView().get_dataItems()[index].getDataKeyValue("EmployeeID");
   var button = $get("<%=btnServerGrid.ClientID %>");
   button.click();
}

Thanks,
Princy.

[Charles]

Princy

Thanks for the help, but I can't seem to get the OnCommand JavaScript code to fire. I have tried both the following in the grid definition.

ClientSettings-ClientEvents-OnCommand="OnCommand">

Also tried adding the event link to the ClientSettings block.

<ClientSettings AllowDragToGroup="false" Selecting-AllowRowSelect="true" >
    <Selecting AllowRowSelect="true" />
    <Scrolling AllowScroll="false" />
    <Resizing AllowColumnResize="false" />
    <ClientEvents OnCommand="OnCommand" />
</ClientSettings>

And here is the JavaScript OnCommand function

    function OnCommand(sender, args)
    {
        alert(args.get_commandName());

        var hidden = $get("<%=selectedLocationRowId.ClientID %>");
        var index = args.get_commandArgument();
        var command = args.get_commandName();
        if (command == "Edit")
        {
            hidden.value = args.get_tableView().get_dataItems()[index].getDataKeyValue("Id");
            // Need to "press button" on page to initiate server-side code
            var button = $get("<%=btnServerGrid.ClientID %>");
            button.click();
        }
    }

Notice the alert at the top of the function. It never shows up when I click the Edit link on the row.

What else might I be doing incorrectly?