ItemCommand from JavaScript RowClick

[Anthony]

I'm trying to use a client-site row click to fire a custom item command and I'm not sure how to go about it. I have a GridButtonColumn that allows the user to run the command however we need to have the entire row clickable. I can have the row go into edit mode when clicked but that isn't what we are looking for. Here is the code I have so far:

<telerik:RadCodeBlock ID="rcbCode" runat="server">
    <script type="text/javascript">
        function RowClick(sender, eventArgs) {
            var editedRow = eventArgs.get_itemIndexHierarchical();
            $find("<%=rgStudents.MasterTableView.ClientID %>").editItem(editedRow);
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0"
    GridLines="None" OnDeleteCommand="RadGrid1_DeleteCommand" OnInsertCommand="RadGrid1_InsertCommand"
    OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowClick="RowClick" />
    </ClientSettings>
    <MasterTableView CommandItemDisplay="Bottom" InsertItemDisplay="Bottom">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" DataType="System.Guid" FilterControlAltText="Filter ID column"
                HeaderText="ID" UniqueName="ID" Display="False" ReadOnly="True" ForceExtractValue="Always"
                Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="name" Display="False" FilterControlAltText="Filter name column"
                HeaderText="Name" UniqueName="name">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn CommandName="StartProcess"
                ButtonType="LinkButton" FilterControlAltText="Filter StartProcess column"
                Text="Start Process" UniqueName="StartProcess">
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

This opens the row in edit mode but what I'm really looking for is to call the "StartProcess" item command the same way the last GridButtonColumn does.

[Shinu]

Hello Anthony,

You can attach the client event OnCommand and check for the CommandName as shown below.
JS:

<script type="text/javascript">
function OnCommand(sender, args)
{
 alert(args.get_commandName());
}
</script>

-Shinu.

[Anthony]

Hi Shinu, thanks for the reply but that's not really what I'm looking for. I want to call the "StartProcess" server side item command from Javascript for the item that is highlighted on a mouse click.

Currently the javascript portion calls the .editItem(editedRow) for the item highlighted. What I am hoping for is something like .fireCommand("StartProcess",editedRow). But so far I haven't found a way of doing that.

[Marin]

Hello Anthony,

 The grid has such client-side function fireCommand that takes the name of the command and a second argument to be passed to the server-side ItemCommand event. Here is more detailed info:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html

Best wishes,
Marin
the Telerik team

[Anthony]

Thanks Marin, I had found the fireCommand on the master table view however from there I wouldn't know which row to fire the command on.

Tsvetina from the support team suggested that I use ClientSettings-EnablePostBackOnRowClick="true" and change the command name from "StartProcess" to "RowClick" in the itemCommand handler. Using that I was able to get it working smoothly.

Thanks,
Anthony

[Marin]

Hi Anthony,

 Yes, the other approach that was suggested by our support team is also viable in this case. As for the case with using the fireCommand method you can pass as a second argument the index of the edited row and then retrieve the corresponding item on the server:

function RowClick(sender, eventArgs) {
            var editedRow = eventArgs.get_itemIndexHierarchical();
            sender.get_masterTableView().fireCommand("StartProcess", editedRow);
        }

protected void RadGrid1_ItemCommand(object sender, Web.UI.GridCommandEventArgs e)
        {
            if (e.CommandName=="StartProcess")
            {
                var idx = int.Parse(e.CommandArgument.ToString());
                var row = RadGrid1.Items[idx];
                //process row
            }
        }

Regards,
Marin
the Telerik team