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

How to disable client side double click of specific rows based on link button enabled status

7 Answers 577 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 30 May 2014, 09:22 AM
Hi,

I'm pretty new to the Telerik controls and also have very little experience with javascript. Here is my problem:

I have a RadGrid that displays some information from a database and allows the user to modify this data by clicking an Edit link button and then using a form template.

I have a client side row double click function that puts the row into edit mode that I found on one of the Telerik support documents, but I need to disable this for specific rows based on the enabled status of the link button.

Code.

I've cut out a lot of the columns of the grid and also the form template as they are not relevant. I've highlighted the relevant parts in bold.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, eventargs)
            {
                sender.get_masterTableView().editItem(eventargs.get_itemIndexHierarchical());
            }

        </script>
    </telerik:RadCodeBlock>


<telerik:RadGrid ID="ShiftRadGrid" runat="server" AllowSorting="True" 
                                        AutoGenerateColumns="False" 
                                        DataSourceID="ShiftSqlDataSource" 
                                        ShowFooter="True" GridLines="Both">
                            
                            <ExportSettings ExportOnlyData="True" OpenInNewWindow="True">
                            </ExportSettings>

                            <ClientSettings EnableRowHoverStyle="true">
                                <Selecting AllowRowSelect="True" />
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                                <ClientEvents OnRowDblClick="RowDblClick" />
                            </ClientSettings>
                            
                            <MasterTableView DataSourceID="ShiftSqlDataSource" DataKeyNames="id">
                                <Columns>
                                    <telerik:GridEditCommandColumn buttontype="LinkButton"  UniqueName="RadGrdEditCommand" EditText="Edit">
                                    </telerik:GridEditCommandColumn>
                                   
<telerik:GridButtonColumn CommandName="Select" FilterControlAltText="Filter Select column" Text="Select" UniqueName="Select">
                                    </telerik:GridButtonColumn>
                                    <telerik:GridBoundColumn DataField="ScheduleDate" DataFormatString="{0:d}" DataType="System.DateTime" FilterControlAltText="Filter ScheduleDate column" HeaderText="Date Worked" SortExpression="ScheduleDate" UniqueName="ScheduleDate">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="CAName" FilterControlAltText="Filter CAName column" HeaderText="Name" ReadOnly="True" SortExpression="CAName" UniqueName="CAName">
                                        <ItemStyle Wrap="False" />
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <EditFormSettings EditFormType ="Template">
                                    <FormTemplate>
                                        <table id="FormTable" class="Table4" border="0">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="lblWorkingDate" runat="server" Text ="Working Date:"></asp:Label>
                                                </td>
                                                <td>
                                                    <telerik:RadDatePicker ID="RadShiftEditWorkingDatePicker" runat="server" 
                                                                            Height="22px" Width="100px"
                                                                            DBSelectedDate='<%# Bind("ScheduleDate", "{0:d}")%>' >
                                                    </telerik:RadDatePicker>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblHospital" runat="server" Text="Hospital"></asp:Label>
                                                </td>
                                            </tr>

                                        </table>
                                    </FormTemplate>
                                </EditFormSettings>
                            </MasterTableView>
                        </telerik:RadGrid>



Protected Sub ShiftRadGrid_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles ShiftRadGrid.ItemDataBound
        If TypeOf e.Item Is GridDataItem Then
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
            Dim itemCounter As Integer = item.Cells.Count

            Try
                'Dim lnkEdit As LinkButton = DirectCast(e.Item.FindControl("RadGrdEditCommand"), LinkButton)

                Dim lnkEdit As LinkButton = DirectCast(item("RadGrdEditCommand").Controls(0), LinkButton)
                lnkEdit.Enabled = False
               ' I've disabled all rows just to test but this will ultimately be based on logic.


            Catch ex As Exception
' Rest of logic.

End try
end if

    End Sub

Hope this is clear enough. Many thanks.

    







7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 02 Jun 2014, 05:22 AM
Hi John,

I guess you have a LinkButton inside the ItemTemplate of a GridTemplateColumn and based on its value you want to cancel the RowDoubleClick event. Please try the following JS code:

JS:
function OnRowDblClick1(sender, eventArgs) {
    var dataItem = $get(eventArgs.get_id());
    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    //Accesss the LinkButton text
    var lnkText = row.findElement("LinkButtonID").innerText
    if (lnkText == "Disabled") {
       //cancel the event
        eventArgs._domEvent.preventDefault();
    }
    else {
        //edit row
        editedRow = eventArgs.get_itemIndexHierarchical();
        $find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(editedRow);
    }
}

Thanks,
Princy
0
John
Top achievements
Rank 1
answered on 02 Jun 2014, 11:13 AM
Hi, Thanks for your response. 

I replaced the "LinkButtonID" with "EditButton" and this still enables access to the edit form regardless of the enabled status of the button.

I changed the EditButton to the UniqueName of the Grid Column which is RadGrdEditCommand but I get a "Unable to get property 'innerText' of undefined or null reference" script error.

0
Princy
Top achievements
Rank 2
answered on 03 Jun 2014, 03:15 AM
Hi John,

You can try the following code snippet to get the GridEditCommandColumn, use its UniqueName to access it in the clientside.

JS:
//Access using UniqueName
  var cell = MasterTable.getCellByColumnUniqueName(row, "EditButton");
  var value = cell.innerText;
     if (value == "Disabled") {
       eventArgs._domEvent.preventDefault();
     }

Thanks,
Princy
0
John
Top achievements
Rank 1
answered on 03 Jun 2014, 07:49 AM
Hi Princy,

Many thanks for your response. However as stated earlier I have very little experience with client side scripting. I'm not sure where I should be putting the above code.

I copied the two lines to the top of my RowDblClick function and got the attached error.

Here is the code. 

<script type="text/javascript">
            function RowDblClick(sender, eventargs) {
                var cell = MasterTable.getCellByColumnUniqueName(row, "EditButton"); // Error fires on this line
                var value = cell.innerText;

               
                //if ($find(eventargs.get_id()).findElement("EditButton").className != "aspNetDisabled") {
                 //   sender.get_masterTableView().editItem(eventargs.get_itemIndexHierarchical());
                //}
            }

        </script>




0
Princy
Top achievements
Rank 2
answered on 03 Jun 2014, 09:57 AM
Hi John,

I have added only the code to get EditColumn, rest of the code is same as above post. Here is the full code snippet.

JS:
function OnRowDblClick1(sender, eventArgs) {
    var dataItem = $get(eventArgs.get_id());
    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; 
    var cell = MasterTable.getCellByColumnUniqueName(row, "EditButton");
    var value = cell.innerText;
    if (value == "Disabled") {
        eventArgs._domEvent.preventDefault();
    }
    else {
        editedRow = eventArgs.get_itemIndexHierarchical();
        $find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(editedRow);
    }
}

Thanks,
Princy
0
John
Top achievements
Rank 1
answered on 03 Jun 2014, 10:09 AM
Hi,

Thanks for that. We're getting a little closer. Am I right in thinking that the innerText property gets text part of the button?

If this is correct then this is always going to return edit. I've just tried this on a button that has it's enabled property set to false and your function still shows the innerText to be Edit.

I need it to be based on the Enabled property of my link button. Is this possible?
0
Princy
Top achievements
Rank 2
answered on 04 Jun 2014, 06:40 AM
Hi John,

The previous post I was checking the text of the button and disabling doubleclick event. You can try another approach, access the enabled button rows and attach a double-click event as below.

ASPX:
<telerik:GridEditCommandColumn UniqueName="EditButton">
</telerik:GridEditCommandColumn>

C#:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{   
 if (e.Item is GridDataItem)
 {
  GridDataItem dataItem = (GridDataItem)e.Item;
  LinkButton lnkEdit = (LinkButton)dataItem["EditButton"].Controls[0];
  if (lnkEdit.Enabled == true)
  {
   dataItem.Attributes.Add("ondblclick","OnRowDblClick(" + dataItem.ItemIndex + ")");               
  }
 }
}

JS:
<script type="text/javascript">
 function OnRowDblClick(index) {         
    $find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(index);    
   }      
</script>

Thanks,
Princy
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
John
Top achievements
Rank 1
Share this question
or