[Solved] "PerformInsert" and "Update" sometimes does not fire using fireCommand

[Prabhanjan]

Hi,

I have an issue with javascript fireCommand while firing "PerformInsert" and "Update". It fires the Grids ItemCommand but doesn't pass the Command name to my ItemCommand event handler. Here is the code snippet -

                   

<telerik:RadGrid ID="radVehicles" runat="server" AutoGenerateColumns="false" EnableViewState="true"

    PagerStyle-AlwaysVisible="true" GridLines="None" AllowSorting="true" AllowPaging="true" AllowAutomaticUpdates="false"

    AllowMultiRowEdit="false"                                   

    CellSpacing="0" PageSize="10" AllowFilteringByColumn="false" OnNeedDataSource="Vehicles_OnNeedDataSource" OnCancelCommand="ConvertVehicles_OnCancelCommand"

    OnItemDataBound="Vehicles_OnItemDataBound" OnItemCommand="Vehicles_OnItemCommand">

    <PagerStyle PageButtonCount="5" PagerTextFormat="{4}Total Rows: {5}" AlwaysVisible="true" />

    <MasterTableView DataKeyNames="VehiclesID, Active" ClientDataKeyNames="VehiclesID, Active">

        <NoRecordsTemplate>

            <p style="text-align: center;">

                No record(s) found !

            </p>

        </NoRecordsTemplate>

        <Columns>

            <telerik:GridBoundColumn DataField="VehiclesID" UniqueName="VehiclesID" HeaderText="#" Visible="false">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="LicensePlate" UniqueName="LicensePlate" HeaderText="License Plate"></telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="State" HeaderText="State" DataField="State"></telerik:GridBoundColumn>                               

            <telerik:GridTemplateColumn HeaderText="Action" ItemStyle-Width="10%" HeaderStyle-HorizontalAlign="Center"

                ItemStyle-HorizontalAlign="Center" UniqueName="Action">

                <ItemTemplate>

                    <asp:ImageButton AlternateText="ContextMenu" ID="ContextMenuButton" ImageUrl="~/Images/chart-expended-arrow-90.png"

                        runat="server" />

                </ItemTemplate>

            </telerik:GridTemplateColumn>

        </Columns>

        <EditFormSettings EditFormType="Template">

            <FormTemplate>

                <div class="tableInside">

                    <div class="tableW">

                        <div class="trW" style="display:none;">

                            <div class="tdColumn-left">

                                Vehicle ID

                            </div>

                            <div class="tdColumn-right">

                                <asp:Label runat="server" ID="lblVehiclesID" Text='<%# Eval("VehiclesID") %>'></asp:Label>                                               

                            </div>                                                  

                        </div>

                        <div class="trW">

                            <div class="tdColumn-left">

                                License Plate

                            </div>

                            <div class="tdColumn-right">

                                <telerik:RadTextBox ID="txtLicensePlate" Text='<%# Eval("LicensePlate") %>' runat="server"></telerik:RadTextBox>                                

                            </div>                                                  

                        </div>                                          

                    </div>

                    <div class="tableW">

                        <div class="trW">

                            <div class="tdColumn-left">

                                License Plate

                            </div>

                            <div class="tdColumn-right">

                            </div>                                                                                              

                        </div>                                       

                    </div>

                    <div class="trRow" style="text-align: center; margin-top: 5px;">

                        <telerik:RadButton ID="btnCancelVehicles" Text="Cancel" AutoPostBack="false" OnClientClicked="btnCancelVehicles_OnClientClicked" runat="server" CssClass="black" Icon-PrimaryIconUrl="~/Images/cancel1.png">

                        </telerik:RadButton>

                           

                        <telerik:RadButton ID="btnSaveVehicles" runat="server" Text="Save" CausesValidation="true" ValidationGroup="AllSave" CssClass="save" AutoPostBack="true" OnClientClicked="btnSaveVehicles_OnClientClicked"

                         

                        Icon-PrimaryIconCssClass="iconSave">

                        </telerik:RadButton>

                    </div>       

                </div>

            </FormTemplate>

        </EditFormSettings>

    </MasterTableView>

</telerik:RadGrid>                               

Here are the scripts (javascripts) below used to fire

function btnSaveVehicles_OnClientClicked(sender, eventArgs) {
           var _tempGridMaster = $find("<%=radVehicles.ClientID %>").get_masterTableView();

           var _lblConvertVehiclesVal = $("#<%=lblVehiclesItemIndex.ClientID %>").html();

           if (_lblConvertVehiclesVal != "") {
               ConvertVehiclesRowIndex = parseInt(_lblConvertVehiclesVal);
           }
           else {
               ConvertVehiclesRowIndex = -1;
           }

           if (Page_IsValid) {
               if (ConvertVehiclesRowIndex == -1) {
                   _tempGridMaster.fireCommand("PerformInsert", "");
               }
               else {
                   _tempGridMaster.fireCommand("Update", ConvertVehiclesRowIndex);
               }
           }
       }

here is my ItemCommand handler

protected void Vehicles_OnItemCommand(object sender, GridCommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case "Edit":
                lblConvertVehiclesItemIndex.InnerHtml = e.Item.ItemIndex.ToString();
                e.Item.OwnerTableView.IsItemInserted = false;
                BindConvertVehiclesData();
                break;
            case "InitInsert":
                radConvertVehicles.MasterTableView.ClearEditItems();
                BindConvertVehiclesData();
                break;
            case "Cancel":
                e.Item.OwnerTableView.IsItemInserted = false;
                BindConvertVehiclesData();
                break;
            case "PerformInsert":

all the above commands are invoked using client side fireCommand and all "Edit", "InitInsert", and "Cancel" are working but when firing "PerformInsert" I am unable to get the Commandname in e.CommandName as a result my switch is not working.

[Prabhanjan]

Hi,

The problem is in firefox browser. But the same code is working in case of Chrome and IE.

Not sure what's the issue is.

Thanks
Prabhanjan

[Deyan Enchev]

Hello,

In order GridCommands to be properly fired when invoke them from external button, it is necessary to disable PostBack on the button, so RadGrid will be initiator of the postback. This behavior depends on how the events are being fired in each browser. That is the reason this scenario to be working on Internet Explorer, and Chrome but not on Firefox.
In your scenario, it is necessary to set AutoPostBack property of RadButton to false. This way ItemCommand event will be properly fired and the correct CommandName will be passed.

Regards,

Deyan Enchev
Telerik

[Prabhanjan]

Hi Deyan,

Thanks for the reply. And as per your suggestion I should disable the AutoPostBack for the button i.e., I need to set it to false.

But even after setting it to false my code doesn't work in Firefox but it works well in other browsers.

Thanks & Regards

Prabhanjan

[Deyan Enchev]

Hi Prabhanjan,

I have created a sample project and you can find it attached. In this project all commands are firing as expected no matter which browser you are using. Still all AutoPostBack properties of the RadButons should be set to “false”.

Check the comments I have left in the code for the client side update command. Note that the update command require to pass the item index you are updating. More information on the client side fireCommand method and the specific syntax and parameters it uses is available in this help topic.

I hope this helps.

Regards,
Deyan Enchev
Telerik