Radgrid deleteSelectedItems behavior

[Vincent]

Dear Telerik,

We are experiencing a strange thing with the RadGrid. We have set up a RadGrid clientside, all clientside. Paging, Adding and Deleting are done clientside.

What we come across is that every second time we Delete a row(by calling the deleteCustomer function) the  masterTable.deleteSelectedItems(); is not executed. But the console.log just above it is executed so it makes it too that function each time you want to delete an item.
The basic idea of deleting these items is that when a row is selected, an javascript array is filled with IDs and when the deleteCustomer function is executed, it fires an ajax call to the webservice to do database updates. And after waiting for the result to come back, it deletes the row from the grid.

Is there a bug in the RadGrid that makes it unavailable for a small time or are we not implementing this correctly?
I have put the RadGrid and Jquery code beneath.

By the way, we also used masterTable.rebind function instead of the deleteSelectedItems but that has the same effect.

Thank you for your time.

Vincent

<telerik:RadGrid ID="AudienceRecipientsGrid" runat="server" Width="695" AllowPaging="True" PageSize="15" AutoGenerateColumns="false" AllowMultiRowSelection="true" >

    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

    <MasterTableView TableLayout="Fixed" DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">

        <Columns>

            <telerik:GridBoundColumn DataField="CustomerID" DataType="System.Int32" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" SortExpression="CustomerID" UniqueName="CustomerID" Visible="False" ReadOnly="True"></telerik:GridBoundColumn>

            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="6%" ItemStyle-Width="6%">

                    <HeaderStyle Width="6%"></HeaderStyle>

                    <ItemStyle Width="6%"></ItemStyle>

                </telerik:GridClientSelectColumn>

            <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter Name column" HeaderText="Voornaam" SortExpression="Name" UniqueName="Name"></telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="SurName" FilterControlAltText="Filter SurName column" HeaderText="Achternaam" SortExpression="SurName" UniqueName="SurName"></telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Email" FilterControlAltText="Filter Email column" HeaderText="E-mail" SortExpression="Email" UniqueName="Email"></telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="joindate" DataType="System.DateTime" FilterControlAltText="Filter joindate column" HeaderText="Inschrijfdatum" DataFormatString="{0:dd/MM/yyyy HH:mm:ss}" UniqueName="joindate" ReadOnly="true" ></telerik:GridBoundColumn>

        </Columns>

    </MasterTableView>

    <ClientSettings>

        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />

        <Scrolling AllowScroll="False" EnableVirtualScrollPaging="True" UseStaticHeaders="True"></Scrolling>

        <DataBinding Location="~/ems/EMSWS.asmx" StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows"></DataBinding>

        <ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" OnRowCreated="RowCreated" OnRowDataBound="RowDataBound" />

    </ClientSettings>

    <PagerStyle Mode="NumericPages" />   

    <FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>
<span onclick="deleteCustomers()" class="cms_hyperlink">Ontvangers verwijderen</span>

All grid logic is done here:

//Grid logic
var selected = {};
function RowSelected(sender, args) {
    var customerID = args.getDataKeyValue("CustomerID");
    if (!selected[customerID]) {
        selected[customerID] = customerID;
    }
}
function RowDataBound(sender, args) {
    //Every time a new page is loaded, all rows are unselected....
    var customerID = args.get_dataItem()["CustomerID"];
    if (selected[customerID]) {
        args.get_item().set_selected(true);
    }
    else {
        args.get_item().set_selected(false);
    }
}
function RowDeselected(sender, args) {
    var customerID = args.getDataKeyValue("CustomerID");
    if (selected[customerID]) {
        selected[customerID] = null;
    }
}
function RowCreated(sender, args) {
    var customerID = args.getDataKeyValue("CustomerID");
    if (selected[customerID]) {
        args.get_gridDataItem().set_selected(true);
    }
}

//Deleting customers
function deleteCustomers() {
    WSdeleteCustomers();
}
function WSdeleteCustomers() {
    var dfd = new jQuery.Deferred();
    $.ajax({
        type: 'POST',
        url: "/ems/emsws.asmx/RemoveEmailFromAudience",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: "{ 'strCustomerIDs': '" + GetSelectedCustomers() + "', 'iAudienceID': '" + getParameterByName('id') + "' }",
        cache: false,
        success: function (data) {
            dfd.resolve();
        }
    }).done(function () {
        dfd.promise();
    }).pipe(function () {
        reloadGridAfterDelete();
    });
}
function GetSelectedCustomers() {
    var allids = '';
    var grid = $find("<%=AudienceRecipientsGrid.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    for (var i in selected) {
        allids = allids + i + ',';
    }
    return allids;
}

function reloadGridAfterDelete() {
    //console.log("reload grid");
    var masterTable = window.$find("<%= AudienceRecipientsGrid.ClientID %>").get_masterTableView();
    //masterTable.rebind();
    console.log("deleteSelectedItems()");
    masterTable.deleteSelectedItems();
    }




[Antonio Stoilkov]

Hi Vincent,

I have examined the provided code and there are no issues with it. You could try using the rebind method and try disabling any ajax that is used on the page. Another possible issue could be if any JavaScript errors are thrown.

function reloadGridAfterDelete() {
    var masterTable = window.$find("<%= AudienceRecipientsGrid.ClientID %>").get_masterTableView();
    masterTable.rebind();
}

If your issue still persists you could open a format ticket attaching a sample runnable application showing the unwanted behavior so we could investigate and advise you with the best possible solution.

Kind regards,
Antonio Stoilkov
the Telerik team

[Vincent]

Hi Antonio,

Thank you for your answer. Yes, the code looks good and it should work indeed :)
There are no JS errors at all and the problem appears to happen randomly( I said every second time before, but it appears to be a little more random even)

I isolated a page for you that replicates this problem. Please find it at http://dev.increatie.nl/ems/testpage.aspx 
To delete a row, is the following logic:
 - Select one or more rows
 - Click Delete rows/recipients
 - They are removed in the database and the grid is updated(or at least should be)

To add a row, is the following logic:
 - Click the head-icon.
 - A panel opens up and you can type in letters in the first field
 - Select a name from the dropdown that follows
 - Click 'Toevoegen' (add in Dutch) and the record should appear

Sometimes this functionality also doesn't update the grid properly. When I posted this thread I left this second problem out, because the cause/problem will propably be the same for adding and deleting records.


Thank you for your time.

Kind regards,

Vincent Fabris
INcreatie

P.S. Please let me know when you are done investigating this page, so I can remove it.

[Antonio Stoilkov]

Hello Vincent,

I have successfully replicated the issue which is expected because when DataBinding is enabled a RadGrid commands are canceled. In order to achieve your scenario you could follow the steps below:

• Define RadAjaxManager with ajax initiator the RadAjaxManager1 and updated control RadGrid1 and subscribe to OnAjaxRequest event

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

• Define function to which calls RadAjaxManager ajaxRequest with RebindGrid argument

function refreshGrid()
{
    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindGrid");
}

• In the AjaxRequest event handler rebind the grid if the argument name is RebindGrid

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "RebindGrid")
    {
        this.RadGrid1.Rebind();
    }
}

Additionally, I have attached a project showing the desired functionality implemented.

Greetings,
Antonio Stoilkov
the Telerik team

[Vincent]

Hello Antonio,

Thank you for your answer. I implemented the functionality as you indicated. And the ajaxrequest is fired correctly, but the problem persists.  At random it does not update the grid properly. A very strange phenomena...
1 difference between your script and mine is that I do not use the Need_Datasource option... I am setting the SelectMethod and SelectCountMethode programmatically to retrieve results from the webservice... Could that impact behavior?
Is there another way of coding this with using a webservice?

I have posted the code you cannot see from viewing  sourcecode below. Sourcecode of the page will show you the rest. And the JS console log should indicate the moment when the ReloadGrid or ReloadGridafterDelete is fired.

Thank you for your help once again.

Regards,

Vincent

.ASPX code

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function refreshGrid() {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindGrid");
            }
        </script>
    </telerik:RadScriptBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" onajaxrequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="AudienceRecipientsGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

VB code behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    AudienceRecipientsGrid.ClientSettings.DataBinding.SelectMethod = "SelectReceivers?AudienceID=1"
    AudienceRecipientsGrid.ClientSettings.DataBinding.SelectCountMethod = "SelectCountReceivers?AudienceID=1"
    AudienceRecipientsGrid.ClientSettings.Selecting.UseClientSelectColumnOnly = True

End Sub
Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)
    If e.Argument = "RebindGrid" Then
        Me.AudienceRecipientsGrid.Rebind()
    End If
End Sub

[Antonio Stoilkov]

Hello Vincent,

I have further investigated the problem and observed the behavior is not changed. It is possible for the issue to come from the way the grid is data-bound but without debugging the server-side code the source of the problem could not be determined. In order to further continue with the issue you could open a format ticket and attach the project uploaded at the live URL. Note that the project should be runnable so we could debug it.

Kind regards,
Antonio Stoilkov
the Telerik team