This is a migrated thread and some comments may be shown as answers.

RowClickEvent ClientSide Cancel or Activate

3 Answers 135 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Moon
Top achievements
Rank 2
Moon asked on 13 Apr 2010, 04:18 PM
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!

 

3 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 16 Apr 2010, 01:27 PM
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.
0
Davey
Top achievements
Rank 2
answered on 12 Sep 2012, 02:50 PM
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>
0
Davey
Top achievements
Rank 2
answered on 13 Sep 2012, 02:53 PM
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
Tags
Grid
Asked by
Moon
Top achievements
Rank 2
Answers by
Iana Tsolova
Telerik team
Davey
Top achievements
Rank 2
Share this question
or