RowClickEvent ClientSide Cancel or Activate

[Moon]

I am trying to either cancel the client side row click, or activate it, I don't care which, I just want something to work!

Mira, from the telerik support team, told me last week to use:

>>From your posts I assume that you have the EnablePostBackOnRowClick property set to true. To prevent postback if the confirm window returns false, please use the set_cancel() accessor method of the event arguments.

That errors and I read this post from 2009 where it says the grid no longer supports set_cancel()

http://www.telerik.com/community/forums/aspnet-ajax/grid/set-cancel-in-onrowclick-event.aspx

When trying to cancel the click, I had EnablePostBackOnRowClick="true"

And when trying to activate the click, I had: EnablePostBackOnRowClick="False"

I am using this for my grid click event:

 

grdGrid.ClientSettings.ClientEvents.OnRowClick = "GetDirtyGridRowClickReviewer"

So I tried several other things from other posts and none work:

<script language="JavaScript" type="text/javascript">
<!--
function GetDirtyGridRowClickReviewer(sender, eventArgs)
{
    var sContinue;
    if (isDirty == 1) {
        sContinue = window.confirm("You have unsaved changes. Please select CANCEL if you would like to return to the form to save your changes. Please select OK if you wish to proceed and lose your changes.");
        if (sContinue != true) {

            //4/13/2010
            //http://www.telerik.com/community/forums/aspnet-ajax/grid/deselecting-event-set-cancel-true-does-not-preserve-selectcolumn-status.aspx
            // below does nothing, continues to selected row...
//            var grid = $find("<%= grdReviewer.ClientID %>");
//            var masterTableView = grid.get_masterTableView();
//            row = masterTableView.get_dataItems()[0];
//            setTimeout('row.set_selected(true);', 10);



            // below errors...4/12/2010
            // says isn't supported as of 2009
            // http://www.telerik.com/community/forums/aspnet-ajax/grid/set-cancel-in-onrowclick-event.aspx
            // eventArgs.set_cancel(true);


           // 4/9/2010
           // below cancels everything, all buttons on page, everything.
            //$find("<%=grdReviewer.MasterTableView.ClientID %>").cancelAll();

            return false;     // cancel so they can save
            }
        }
        isDirty = 0; // reset if continue
        //http://www.telerik.com/community/forums/aspnet-ajax/grid/cancel-rowclick-event.aspx
        // 4/13/2010 set EnablePostBackOnRowClick="False"
        // below errors
//        doPostBack('<%=grdReviewer.ClientID %>');

        // 4/13/2010
        //http://www.telerik.com/community/forums/aspnet-ajax/grid/row-double-click-edit-and-row-click-edit-update-on-grid.aspx
//        doPostBack("<%= grdReviewer.UniqueID %>", "RowClicked:" + sender.get_masterTableView().get_dataItems()[editedRow]._itemIndexHierarchical);

        //http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx
        // below errors object expected...
        var editedRow;
        editedRow = eventArgs.get_itemIndexHierarchical();
        doPostBack("<%= grdReviewer.UniqueID %>", "RowClicked:" + sender.get_masterTableView().get_dataItems()[editedRow]._itemIndexHierarchical);


    return true;
}
// -->
</script>

Below are the links to the things I've tried.
http://www.telerik.com/community/forums/aspnet-ajax/grid/deselecting-event-set-cancel-true-does-not-preserve-selectcolumn-status.aspx

 

http://www.telerik.com/community/forums/aspnet-ajax/grid/set-cancel-in-onrowclick-event.aspx

 

http://www.telerik.com/community/forums/aspnet-ajax/grid/cancel-rowclick-event.aspx

 

http://www.telerik.com/community/forums/aspnet-ajax/grid/row-double-click-edit-and-row-click-edit-update-on-grid.aspx

 

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx

Can someone please provide a working example of canceling or activating  row click client side after asking if you wish to proceed?

 

Thanks!

 

[Iana Tsolova]

Hello Moon,

Indeed, as described here and as you already found the OnRowClick client-side event is not cancelable. However if the EnablePostBackOnRowClick property is set to true, then RowClicked command will fire when you click on an item. In this case you can handle the OnCommand cient-side event and cancel it respectively.

Sincerely yours,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Davey]

The OnCommand event is not firing for me when I select a new row.

Is there any way to cancel the OnRowClick event using javascript? I want to check if a form is "dirty" using javascript before allowing the user to continue.

Here are my client setting:

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">
    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px"/>
    <Resizing AllowColumnResize="true" />
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowClick="OnClientGridRowSelectingHandler" />
</ClientSettings>

[Davey]

Well I found a work around to cancelling a OnRowClick so I'll post my code:

Update your RadAjaxManger to catch the request:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
UpdatePanelsRenderMode="inline"
ClientEvents-OnRequestStart="OnClientGridRowSelectingHandler">

Add a client event to your grid for deselecting:

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">
    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px"/>
    <Resizing AllowColumnResize="true" />
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowDeselecting="SaveCRM_PersonKey"  />
</ClientSettings>

Add some javascript:

function SaveCRM_PersonKey() {

    var grid = $find("<%=rgContacts.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    var selectedPersonKey;

    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        var cell = MasterTable.getCellByColumnUniqueName(row, "CRM_PersonKey")
        //here cell.innerHTML holds the value of the cell
        //alert(cell.innerHTML);
        selectedPersonKey = cell.innerHTML;
        document.getElementById("ctl00_ContentPlaceHolder1_HiddenRowChecker").value = selectedPersonKey;
        break;
    }

}

function OnClientGridRowSelectingHandler(sender, args) {

    var grid = $find("<%=rgContacts.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    var selectedPersonKey = document.getElementById("ctl00_ContentPlaceHolder1_HiddenRowChecker").value;

    if (args.EventTarget.indexOf("rgContacts") != -1) {

        if (IsDirty() == true) {

                var ans = confirm("Are you sure you want to switch contacts without saving your changes?")

                if (!ans) {

                    args.EnableAjax = false;

                    var datarows = MasterTable.get_dataItems()

                    for (var i = 0; i < datarows.length; i++) {

                        var row = datarows[i];
                        var cell = MasterTable.getCellByColumnUniqueName(row, "CRM_PersonKey")

                        if (cell.innerHTML == selectedPersonKey) {
                            row.set_selected(true);
                            MasterTable.selectItem(row.get_element());
                            break;
                        } else {
                            row.set_selected(false);
                        }

                    }

                    return false;
                }
            }
    }
}
function IsDirty() {
    try {
        if (controls == null)
            return false;
        for (var i = 0, j = controls.length; i < j; i++) {
            var control;
            switch (controls[i].Type) {
                case "RadTextBox":
                    control = $find(controls[i].ID);
                    if (control != null) {
                        if (control.get_value() != controls[i].Value) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }
                case "RadNumericTextBox":
                    control = $find(controls[i].ID);
                    if (control != null) {
                        if (control.get_value() != controls[i].Value) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }
                case "RadMaskedTextBox":
                    control = $find(controls[i].ID);
                    if (control != null) {
                        if (control.get_value() != controls[i].Value) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }
                case "RadComboBox":
                    control = $find(controls[i].ID);
                    if (control != null) {
                        if (control.get_value() != controls[i].Value) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }
                case "CheckBox":
                    control = document.getElementById(controls[i].ID);
                    if (control != null) {
                        var comp1 = document.getElementById(controls[i].ID + "_Hidden").value;
                        var comp2 = document.getElementById(controls[i].ID).checked;

                        if (comp1 == 'False') {
                            comp1 = false;
                        }

                        if (comp1 == 'True') {
                            comp1 = true;
                        }

                        //alert(comp1);
                        //alert(comp2);

                        if (comp1 != comp2) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }
                case "RadDatePicker":
                    control = $find(controls[i].ID);
                    if (control != null) {
                        var compareVal
                        if (control.get_selectedDate() == null) {
                            compareVal = "";
                        } else {
                            compareVal = formatDate(control.get_selectedDate());
                        }

                        if (compareVal != controls[i].Value) {
                            //alert(controls[i].Type);
                            return true;
                        }
                        break;
                    }

            }
        }

        return false;
    } catch (e) {
        // do nothing
        return false;
    }
}
function formatDate(value) {
    return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
}
window.onbeforeunload = function (e) {
    if (IsDirty() == true) {
        var ev = e || window.event;
        ev.returnValue = "Are you sure?";
    }
}

Add to codebehind:

Protected Sub SerializeControlProperties()

    Dim control As Dictionary(Of String, String)
    Dim controlsCollection As New List(Of Dictionary(Of String, String))()
    Dim addJS As Boolean = False

    Try

        For Each ctrl2 In pnlGeneral.Controls

            If (ctrl2.GetType() Is GetType(RadTextBox)) Then

                Dim txt As RadTextBox = CType(ctrl2, RadTextBox)

                control = New Dictionary(Of String, String)()
                control("ID") = txt.ClientID
                control("Type") = "RadTextBox"
                control("Value") = txt.Text
                controlsCollection.Add(control)

                addJS = True

            ElseIf (ctrl2.GetType() Is GetType(RadNumericTextBox)) Then

                Dim numtxt As RadNumericTextBox = CType(ctrl2, RadNumericTextBox)

                control = New Dictionary(Of String, String)()
                control("ID") = numtxt.ClientID
                control("Type") = "RadNumericTextBox"
                control("Value") = numtxt.Text
                controlsCollection.Add(control)

                addJS = True

            ElseIf (ctrl2.GetType() Is GetType(RadMaskedTextBox)) Then

                Dim masktxt As RadMaskedTextBox = CType(ctrl2, RadMaskedTextBox)

                control = New Dictionary(Of String, String)()
                control("ID") = masktxt.ClientID
                control("Type") = "RadMaskedTextBox"
                control("Value") = masktxt.Text
                controlsCollection.Add(control)

                addJS = True

            ElseIf (ctrl2.GetType() Is GetType(RadComboBox)) Then

                Dim rcb As RadComboBox = CType(ctrl2, RadComboBox)

                control = New Dictionary(Of String, String)()
                control("ID") = rcb.ClientID
                control("Type") = "RadComboBox"
                control("Value") = rcb.SelectedValue
                controlsCollection.Add(control)

                addJS = True

            ElseIf (ctrl2.GetType() Is GetType(RadDatePicker)) Then

                Dim rdp As RadDatePicker = CType(ctrl2, RadDatePicker)

                control = New Dictionary(Of String, String)()
                control("ID") = rdp.ClientID
                control("Type") = "RadDatePicker"
                control("Value") = If(rdp.SelectedDate.HasValue = True, rdp.SelectedDate, String.Empty)
                controlsCollection.Add(control)

                addJS = True

            ElseIf (ctrl2.GetType() Is GetType(CheckBox)) Then

                Dim chk As CheckBox = CType(ctrl2, CheckBox)

                control = New Dictionary(Of String, String)()
                control("ID") = chk.ClientID
                control("Type") = "CheckBox"
                control("Value") = chk.Checked
                controlsCollection.Add(control)

                addJS = True

            End If

        Next

        If addJS Then

            Dim json As New StringBuilder()
            Dim jss As New JavaScriptSerializer()
            jss.Serialize(controlsCollection, json)
            json.Insert(0, "var controls = ")
            json.Append(";")

            ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(Page), "MyKey", json.ToString(), True)

        End If


    Catch ex As Exception

        Dim myerror As New MyError
        myerror.showMeTheError(ex)

    End Try

End Sub

Private Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender

    Try

        If tabCRM_Data.SelectedIndex = 0 Then
            SerializeControlProperties()
        End If

    Catch ex As Exception

        Dim myerror As New MyError
        myerror.showMeTheError(ex)

    End Try

End Sub