[Solved] client side event RowDeleted not firing after a delete

[Mark]

Hi,

I’m having a problem with the client side event RowDeleted, for some reason the RowDeleted event doesn’t get fired after I delete a record in my Grid.   Mind you that the record does get deleted.

My grid is setup to delete a selected row, I have implemented it in the following way:

My CommandItemTemplate looks like this

<CommandItemTemplate>
  <div>
    <div style="float:left;">
      <asp:LinkButton runat="server" ID="btnCreateContactReg" BorderColor="Black" CommandName="InitInsert">
        <img style="border:0px;vertical-align:middle;" alt="" src="IMG/AddRecord.gif" /> Nieuwe contact registratie
      </asp:LinkButton>
      <asp:LinkButton runat="server" ID="btnAssignCase" OnClientClick="showCaseWindow();">
        <img style="border:0px;vertical-align:middle;" alt="" src="IMG/case.gif" /> Toewijzen klacht
      </asp:LinkButton>
      <asp:LinkButton runat="server" ID="btnDeleteContactReg">
        <img style="border:0px;vertical-align:middle;" alt="" src="IMG/ico_16_delete.gif" CommandName="DeleteSelected" /> Verwijder contact registratie
      </asp:LinkButton>
    </div>
    <div style="float:right;">
      <asp:LinkButton runat="server" ID="btnRefresh" CommandName="Re bindGrid">
        <img style="border:0px;vertical-align:middle;" alt="" src="IMG/refresh.gif" />
      </asp:LinkButton>
    </div>
  </div>
</CommandItemTemplate>

My clientsettings of my grid look like this:

<ClientSettings ClientEvents-OnRowDblClick="RowDblClick" ClientEvents-OnRowSelected="rowSelected" ClientEvents-OnRowCreated="RowCreated" ClientEvents-OnRowDeleted="RowDeleted">
  <selecting allowrowselect="True" enabledragtoselectrows="False" />
  <ClientEvents OnRowDblClick="rowDblClick" OnRowSelected="rowSelected" OnRowCreated="RowCreated" OnRowDeleted="RowDeleted"></ClientEvents>
  <Resizing AllowColumnResize="True" EnableRealTimeResize="True" />
</ClientSettings>

My client side RowDeleted function looks like this (this one never gets fired):

function RowDeleted(sender, eventArgs)
{
  var table = eventArgs.get_tableView();
  var rows = new Array();
  rows = table.get_dataItems();

  if (rows.length > 1)
    evalRegardingLock(true);
  else
    evalRegardingLock(false);
}

I’m also posting the code of my entire gird

<telerik:RadGrid ID="rgdContactReg" runat="server" AllowAutomaticDeletes="True" onitemcreated="rgdContactReg_ItemCreated"
                             AllowAutomaticInserts="True" AllowAutomaticUpdates="True"
                Skin="Office2007" PageSize="5"
                             AutoGenerateColumns="False"
                DataSourceID="ContactRegistration" onitemdatabound="rgdContactReg_ItemDataBound"
                             AllowPaging="True" GridLines="None">
                <PagerStyle Mode="NextPrevAndNumeric"
                    PagerTextFormat="Verander pagina: {4} &amp;nbsp;Toont pagina {0} van {1}, contact registratie {2} van {3} tot {5}." />
                <MasterTableView datasourceid="ContactRegistration" DataKeyNames="id" CommandItemDisplay="Top"
                                 EditMode="InPlace"
                    ClientDataKeyNames="id,subjectid,description,productid" GridLines="None">
                    <CommandItemSettings AddNewRecordImageUrl="IMG/AddRecord.gif" AddNewRecordText="Nieuwe contact registratie" RefreshText="Vernieuwen" />
                    <CommandItemTemplate>
                        <div>
                            <div style="float:left;">
                            <asp:LinkButton runat="server" ID="btnCreateContactReg" BorderColor="Black" CommandName="InitInsert">
                                <img style="border:0px;vertical-align:middle;" alt="" src="IMG/AddRecord.gif" /> Nieuwe contact registratie
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="btnAssignCase" OnClientClick="showCaseWindow();">
                                <img style="border:0px;vertical-align:middle;" alt="" src="IMG/case.gif" /> Toewijzen klacht
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="btnDeleteContactReg">
                                <img style="border:0px;vertical-align:middle;" alt="" src="IMG/ico_16_delete.gif" CommandName="DeleteSelected" /> Verwijder contact registratie
                            </asp:LinkButton>
                            </div>
                            <div style="float:right;">
                            <asp:LinkButton runat="server" ID="btnRefresh" CommandName="Re bindGrid">
                                <img style="border:0px;vertical-align:middle;" alt="" src="IMG/refresh.gif" />
                            </asp:LinkButton>
                            </div>
                        </div>
                    </CommandItemTemplate>
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn Visible="true" Resizable="False">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <NoRecordsTemplate>
                        <div>Geen contact registraties gevonden!</div>
                    </NoRecordsTemplate>
                    <Columns>
                        <telerik:GridBoundColumn DataField="subjectid" UniqueName="subject"
                            Visible="False">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Onderwerp"
                            UniqueName="treeview">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblSubjectTitel" Text="" />
                            </ItemTemplate>
                            <EditItemTemplate>
                                <uc1:SubjectTree ID="SubjectTree" runat="server" />
                            </EditItemTemplate>
                            <HeaderStyle Width="200px" />
                            <ItemStyle Width="200px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="description" HeaderText="Omschrijving"
                                                 UniqueName="description">
                        </telerik:GridBoundColumn>
                        <telerik:GridDropDownColumn DataField="productid" DataSourceID="odsProduct" UniqueName="product"
                                                    HeaderText="Product" ListTextField="Name"
                            ListValueField="id" EnableEmptyListItem="True"
                            ColumnEditorID="editproduct">
                            <HeaderStyle Width="200px" />
                            <ItemStyle Width="200px" />
                        </telerik:GridDropDownColumn>
                        <telerik:GridTemplateColumn UniqueName="caselink">
                            <ItemTemplate>
                                <asp:HyperLink ID="hlnCase" runat="server"></asp:HyperLink>
                            </ItemTemplate>
                            <HeaderStyle Width="22px" />
                            <ItemStyle Width="22px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton"
                            InsertImageUrl="IMG/Insert.gif">
                            <HeaderStyle Width="25px" />
                            <ItemStyle Width="25px" />
                        </telerik:GridEditCommandColumn>
                    </Columns>
                    <EditFormSettings columnnumber="3">
                        <EditColumn UniqueName="EditCommandColumn1" insertimageurl="IMG/Insert.gif"></EditColumn>
                        <PopUpSettings ScrollBars="None"></PopUpSettings>
                    </EditFormSettings>
                    <ItemStyle Width="210px" />
                </MasterTableView>
                <ClientSettings ClientEvents-OnRowDblClick="RowDblClick" ClientEvents-OnRowSelected="rowSelected" ClientEvents-OnRowCreated="RowCreated" ClientEvents-OnRowDeleted="RowDeleted">
                    <selecting allowrowselect="True" enabledragtoselectrows="False" />
                    <ClientEvents OnRowDblClick="rowDblClick" OnRowSelected="rowSelected" OnRowCreated="RowCreated" OnRowDeleted="RowDeleted"></ClientEvents>
                    <Resizing AllowColumnResize="True" EnableRealTimeResize="True" />
                </ClientSettings>
            </telerik:RadGrid>

Any help is appreciated

Kind Regards,

Mark

[Princy]

Hi  Mark,

This event is fired after a row is deleted client-side (GridClientDeleteColumn).
For more information check out the help document lick below:

http://www.telerik.com/help/aspnet-ajax/grid_onrowdeleted.html


Thanks,
Princy

[Mark]

Hi, thx for the fast response,

Is there anyway to fire this event when using the following delete record implementation? 

<asp:LinkButton runat="server" ID="btnDeleteContactReg" CommandName="DeleteSelected">
  <img style="border:0px;vertical-align:middle;" alt="" src="IMG/ico_16_delete.gif" />Verwijder contact registratie
</asp:LinkButton>

or is it exclusive for GridClientDeleteColumn, if so is there any workaround so I can use the event when using command DeleteSelected or have my own java event fired after DeleteSelected.

I also noticed the following in the link you posted

<ClientEvents OnRowDeleting="RowDeleted" ...

should it not be

<ClientEvents OnRowDeleted="RowDeleted" ...

[Mark]

bump

[Iana Tsolova]

Hello Mark,

Thanks for the mark, you are right that it should be:

<ClientEvents OnRowDeleted="RowDeleted" ...

Regarding your questions:
The OnRowDeleting and OnRowDeleted client-events are only fired when row is deleted through the GridClientDeleteColumn. If you would like to handle the DeleteSelected command, you could implement the grid ItemCommand server-side event:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if(e.CommandName == "DeleteSelected")
    {
        //implement your logic here
    }
}

Another option is to add your own onclick client-side event for the particular LinkButton.
 
Let us know if we could help you further.

Regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mark]

Hi thx for the feedback.

Unfortunately doing my logic serverside is impossible.  My Grid is confined to an iframe that gets displayed inside of an m$ Dynamics Crm 4 activity form.  The logic that needs to be executed is if there are any rows in the rad grid a field on the ms crm form needs to be disabled if there are 0 rows in the grid the field needs te be enabled.  Piece of cake doing this clientside.  So I chose to go with the "own onclick client-side event" solution. 

But I seem to have hit another bump in the road.  Every thing seems to work except for the fireCommand javascript

var

masterTable = $find("<%= rgdContactReg.ClientID %>").get_masterTableView();
masterTable.fireCommand("DeleteSelected", "");

No errors, but the deletion of the row just doesn't occur

The markup of my linkbutton

<asp:LinkButton runat="server" ID="btnDeleteContactReg" OnClientClick="DeleteRow();">
  <img style="border:0px;vertical-align:middle;" alt="" src="IMG/ico_16_delete.gif" />Verwijder contact registratie
</asp:LinkButton>

The javascript

function DeleteRow()
{
  var deleted = fireDeleteCommand();
  if(deleted)
    countRows();
}

function fireDeleteCommand()
{
  var masterTable = $find("<%= rgdContactReg.ClientID %>").get_masterTableView();
  masterTable.fireCommand("DeleteSelected", "");
  return true;
}

function countRows()
{
  var table =  $find("<%= rgdContactReg.MasterTableView.ClientID %>");
  var rows = new Array();
  rows = table.get_dataItems();

  if (rows.length > 0)
    evalRegardingLock(true);
  else
    evalRegardingLock(false);
}

Thx for anyhelp you can provide.

[Iana Tsolova]

Hello Mark,

Please try changing you code as follows and check if it makes any difference:

<asp:LinkButton runat="server" ID="btnDeleteContactReg"
    OnClientClick="return DeleteRow();">
    <img style="border:0px;vertical-align:middle;" alt=""
         src="IMG/ico_16_delete.gif" />Verwijder contact registratie
</asp:LinkButton>

function DeleteRow()
{
  var deleted = fireDeleteCommand();
  if(deleted)
    countRows();
  return false;
}
function fireDeleteCommand()
{
  var masterTable = $find("<%= rgdContactReg.ClientID %>").get_masterTableView();
  masterTable.fireCommand("DeleteSelected", "");
}

For your convenience a sample project is attached.

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.