CommandItemTemplate doesn't fire client event

[Regula]

Hi,

I have a grid with a CommandItemTemplate. When I press the LinkButton "btCommand" I want first to treat the event on client side.
The behavior I'm getting is when I press the LinkButton the page immediatly does the PostBack without calling first the "gridCommand" function, thus I never get the alert('test') calle.

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">

        function gridCommand(sender, args) {
            alert('test');
             if (args.get_commandName().startsWith("DoSomething")) {
                  ....
                }
            }

    </script>
</telerik:RadScriptBlock>

  <telerik:RadGrid ID="gv" runat="server" AllowFilteringByColumn="false"
        AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false"
        EnableAJAX="false" EnableEmbeddedSkins="false" GridLines="Horizontal" OnItemCommand="gv_ItemCommand"
        OnItemCreated="gv_ItemCreated" PageSize="30"   Width="100%"
        OnExcelMLExportRowCreated="gv_ExcelMLExportRowCreated" OnExcelMLExportStylesCreated="gv_ExcelMLExportStylesCreated">
        <ExportSettings IgnorePaging="false"></ExportSettings>
        <MasterTableView AllowMultiColumnSorting="false" CommandItemDisplay="Top" DataKeyNames="ID"
            GridLines="None"  >
            <Columns>
                <telerik:GridBoundColumn AllowFiltering="false" AllowSorting="True" DataField="ID"
                    HeaderText="ID" SortExpression="ID" UniqueName="ID">

                </telerik:GridBoundColumn>
               .....
            </Columns>
            <CommandItemTemplate>
                <table class="Normal" cellspacing="0" cellpadding="4" border="0" width="100%">
                    <tr>
                        <td align="right">
                            <asp:LinkButton ID="btCommand" runat="server" CommandName="DoSomething" >DoSomething</asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </CommandItemTemplate>
            <CommandItemStyle HorizontalAlign="Right" />
        </MasterTableView>
        <ClientSettings>
         <ClientEvents OnCommand="gridCommand" />
        </ClientSettings>
    </telerik:RadGrid>

Thanks in advance.

[Eyup]

Hello Vasco,

Please try to use the following approach:
  mark-up:

<asp:LinkButton ... OnClientClick="fireCustomCommand();return false;">

  JavaScript:

function fireCustomCommand() {
    var masterTable = $find("<%= gv.ClientID %>").get_masterTableView();
    masterTable.fireCommand("DoSomething", "yourArgument");
}

I hope this will prove helpful.

Regards,
Eyup
the Telerik team

[Regula]

Thanks Eyup !

[Tim]

I am doing this exactly as you've stated, however, the "ItemCommand" event NEVER fires on the server.  I can see the RadAjaxPanel spinning on the client, but it doesn't actually invoke the server event for my custom command.

Markup:

<asp:LinkButton runat="server"
    CssClass="grid-link-button"
    OnClientClick="OnDoSomething(); return false;"
    Visible='<%# !grid.MasterTableView.IsItemInserted %>'>
    <img runat="server" alt="" src="~/Content/Icons/Add_16x16.png" />
    <span>Add Defaults</span>
</asp:LinkButton>

JavaScript:

function OnDoSomething() {
    var gridView = grid.get_masterTableView();
    gridView.fireCommand("AddDefaults", userSelectionValue);
}

I did notice this comment in the Online Help:
"Note that when firing custom commands (with a custom command name) they are fired through the first data item in the GridTableView. This means that no command will be fired if the grid is bound to an empty data source."

I am not sure how pertinent that is...
Am I doing something wrong?  Also, my grid is empty initially until the user adds some data.  I am testing this functionality with no rows in the Grid.

[Eyup]

Hello Tim,

This is the general design behavior and when firing custom commands (with a custom command name) they are fired through the first data item in the GridTableView. This means that no command will be fired if the grid is bound to an empty data source as stated in the following topic:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html

You can do your own PostBack or use the ajaxRequest method for an alternative approach:
http://www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html

As a conclusion, you cannot fire an ItemCommand when there are no items in the grid. In your case, you can execute your logic on AjaxRequest event handler:
Note that the AjaxManager should update the grid:

Copy Code

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

JavaScript:

Copy Code

function buttonClicked() {
    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequest('GridCustomCommand');
}

C#:

Copy Code

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument == "GridCustomCommand")
    {
        RadGrid1.MasterTableView.PageSize = 5;
        RadGrid1.MasterTableView.Rebind();
    }
}

Hope this helps.

Regards,
Eyup
Telerik