RadGrid DbClick...

[realweb]

I look for long time to solve this problem.
The matter is I wanna use both way to delete row by GridButtonColumn and to edit row by client double click. but there is a matter. if I put scripts to edit rows, delete command doesn't work with ItemHierachicalIndex error.

I checked html source... there is a bit differences for scripts.
how can I do this? any helps?


        <ClientSettings>
            <ClientEvents OnCommand="GridCommand" OnGridCreated="GridCreated"
                OnRowClick="RowClick" OnRowDblClick="RowDblClick" />
        </ClientSettings>
            <Columns>
                <telerik:GridButtonColumn HeaderText="Delete" UniqueName="Delete" ButtonType="ImageButton" CommandName="Delete">
                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="30px" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </telerik:GridButtonColumn>

This is my .aspx code... I tried to put ClearEditITems Methods all.. but.. it's not helpful...

Please help~

[Iana Tsolova]

Hello realweb,

Could you please send us a runnable sample illustrating the issue in the other ticket you have open?

Best wishes,
Iana
the Telerik team

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

[realweb]

	<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManageDepts.aspx.cs" Inherits="RealWeb.Integration.SeoulMilk.Shipping.ManageDepts" MasterPageFile="~/MasterPages/WorkFormMasterPage.master" %>
	<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
	<%@ Register Assembly="RealWeb.Portal.Controls" Namespace="RealWeb.Portal.Controls" TagPrefix="rw" %>
	<asp:Content ID="ContentTitle" runat="server" ContentPlaceHolderID="ContentPlaceHolderTitle">
	<rw:RealTitle ID="SCRealTitle" runat="server" Title="Depts"></rw:RealTitle>
	</asp:Content>
	<asp:Content ID="ContentSearchBox" runat="server" ContentPlaceHolderID="ContentPlaceHolderSearchBox">
	<script src="../../ClientScripts/CommonFormScripts.js" type="text/javascript"></script>
	<script src="../../ClientScripts/DHtmlWindow.js" type="text/javascript"></script>
	<script src="../../ClientScripts/ModalWindow.js" type="text/javascript"></script>
	<link href="../../Styles/CSS/DHtmlWindow.css" rel="stylesheet" type="text/css" />
	<link href="../../Styles/CSS/ModalWindow.css" rel="stylesheet" type="text/css" />
	<rw:RealSearchBox ID="SCRealSearchBox" runat="server">
	<table cellpadding="0" cellspacing="0" border="0" class="Outline">
	<colgroup>
	<col class="Title" />
	<col style="width: 50%;" />
	<col class="Title" />
	<col style="width: 50%;" />
	</colgroup>
	<tbody>
	<tr class="FirstRow">
	<td class="Title_First">DeptId</td>
	<td class="Value_First">
	<asp:TextBox ID="tbxDeptId" runat="server" Width="99%"></asp:TextBox>
	<asp:LinkButton ID="lbtSearchDept" runat="server" Width="0px"
	onclick="lbtSearchDept_Click"></asp:LinkButton></td>
	<td class="Title_First">DeptName</td>
	<td class="Value_First">
	<asp:Label ID="lblDeptName" runat="server"></asp:Label></td>
	</tr>
	<tr class="LastRow">
	<td class="Title_First">DeptClass</td>
	<td class="Value_First">
	<asp:DropDownList ID="ddlDeptClass" runat="server" Width="99%">
	</asp:DropDownList>
	</td>
	<td class="Value_Last" style="text-align: right;" colspan="2">
	<rw:RealButton ID="RealButtonInsert" runat="server" Type="Main" Text="Append"
	onclick="RealButtonInsert_Click"></rw:RealButton>
	</td>
	</tr>
	</tbody>
	</table>
	</rw:RealSearchBox>
	<div class="Separate_Middle"></div>
	</asp:Content>
	<asp:Content ID="ContentLegend" runat="server" ContentPlaceHolderID="ContentPlaceHolderLegend">
	</asp:Content>
	<asp:Content ID="ContentBody" runat="server" ContentPlaceHolderID="ContentPlaceHolderBody">
	<telerik:RadScriptManager ID="TCScriptManager" runat="server"
	EnableTheming="True">
	</telerik:RadScriptManager>
	<telerik:RadAjaxManager ID="TCRadAjaxManager" runat="server">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="RadGridDepts">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="RadGridDepts" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	<telerik:RadAjaxLoadingPanel ID="TCRadAjaxLoadingPanel" runat="server" Height="75px"
	Width="75px">
	<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading6.gif") %>'
	style="border: 0px;" />
	</telerik:RadAjaxLoadingPanel>
	<telerik:RadCodeBlock ID="TCRadCodeBlock" runat="server">
	<script type="text/javascript" language="javascript">
	var hasChanges, inputs, dropdowns, editedRow;
	function RowClick(sender, eventArgs) {
	if (editedRow && hasChanges) {
	hasChanges = false;
	if (confirm("Edit?")) {
	$find("<%= this.RadGridDepts.MasterTableView.ClientID %>").updateItem(editedRow);
	}
	}
	}
	function RowDblClick(sender, eventArgs) {
	editedRow = eventArgs.get_itemIndexHierarchical();
	$find("<%= this.RadGridDepts.MasterTableView.ClientID %>").editItem(editedRow);
	}
	function GridCommand(sender, args) {
	if (args.get_commandName() != "Edit") {
	editedRow = null;
	}
	}
	function GridCreated(sender, eventArgs) {
	var gridElement = sender.get_element();
	var elementsToUse = [];
	inputs = gridElement.getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
	var lowerType = inputs[i].type.toLowerCase();
	if (lowerType == "hidden" || lowerType == "button") {
	continue;
	}
	Array.add(elementsToUse, inputs[i]);
	inputs[i].onchange = TrackChanges;
	}
	dropdowns = gridElement.getElementsByTagName("select");
	for (var i = 0; i < dropdowns.length; i++) {
	dropdowns[i].onchange = TrackChanges;
	}
	}
	function TrackChanges(e) {
	hasChanges = true;
	}
	</script>
	</telerik:RadCodeBlock>
	<telerik:RadGrid ID="RadGridDepts" runat="server" AllowSorting="True" AutoGenerateColumns="False"
	GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True"
	AllowCustomPaging="True" EnableAJAX="True"
	EnableAJAXLoadingTemplate="True" DataSourceID="odsDepts"
	onprerender="RadGridDepts_PreRender"
	onitemdeleted="RadGridDepts_ItemDeleted"
	onitemupdated="RadGridDepts_ItemUpdated" Skin="Vista">
	<ClientSettings>
	<ClientEvents OnCommand="GridCommand" OnGridCreated="GridCreated"
	OnRowClick="RowClick" OnRowDblClick="RowDblClick" />
	</ClientSettings>
	<MasterTableView DataSourceID="odsDepts" EditMode="InPlace" DataKeyNames="DeptId">
	<NoRecordsTemplate>
	</NoRecordsTemplate>
	<RowIndicatorColumn>
	<HeaderStyle Width="20px"></HeaderStyle>
	</RowIndicatorColumn>
	<ExpandCollapseColumn>
	<HeaderStyle Width="20px"></HeaderStyle>
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridButtonColumn HeaderText="Delete" UniqueName="Delete" ButtonType="ImageButton" CommandName="Delete">
	<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="30px" />
	<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
	</telerik:GridButtonColumn>
	<telerik:GridDropDownColumn HeaderText="DeptClass" UniqueName="DeptClass" SortExpression="DeptClass" DataField="DeptClass" DataSourceID="odsDeptClasses" ListTextField="DataTextField" ListValueField="DataValueField" DropDownControlType="DropDownList">
	<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="70px" />
	<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
	</telerik:GridDropDownColumn>
	<telerik:GridBoundColumn HeaderText="DeptId" UniqueName="DeptId" SortExpression="DeptId" DataField="DeptId" ReadOnly="true">
	<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="70px" />
	<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn HeaderText="DeptName" UniqueName="DeptName" SortExpression="DeptName" DataField="DeptName" ReadOnly="true">
	<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
	<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
	</telerik:GridBoundColumn>
	</Columns>
	</MasterTableView>
	<FilterMenu Skin="Vista" EnableTheming="False">
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</FilterMenu>
	<SortingSettings SortedAscToolTip="" SortedDescToolTip=""
	SortToolTip="" />
	<StatusBarSettings LoadingText="" ReadyText="" />
	</telerik:RadGrid>
	<asp:ObjectDataSource ID="odsDepts" runat="server" SelectMethod="GetShipDeptsDataSet"
	TypeName="RealWeb.Integration.SeoulMilk.Shipping.ShipDeptController"
	DeleteMethod="DeleteShipDept" UpdateMethod="UpdateShipDept">
	<DeleteParameters>
	<asp:Parameter Name="deptId" Type="String" />
	</DeleteParameters>
	<UpdateParameters>
	<asp:Parameter Name="deptId" Type="String" />
	<asp:Parameter Name="deptClass" Type="Int32" />
	<asp:Parameter Name="modifierId" Type="String" />
	</UpdateParameters>
	</asp:ObjectDataSource>
	<asp:ObjectDataSource ID="odsDeptClasses" runat="server" SelectMethod="GetShipDeptClasses"
	TypeName="RealWeb.Integration.SeoulMilk.Shipping.ShipDeptController"></asp:ObjectDataSource>
	</asp:Content>

this is the .aspx and the cs which related with delete is below...

	protected void RadGridDepts_ItemDeleted(object source, GridDeletedEventArgs e)
	{
	if (e.Exception != null)
	{
	log.Debug(e.Exception);
	e.ExceptionHandled = true;
	}
	}

nothing else for deleting except this code. it's working well... without double click scripts. thanks for replying...

[Iana Tsolova]

Hello realweb,

I went through your code and it looks fine to me.
Furthermore I followed your scenario in order to replicate the issue but no avail. PLease find the attached sample and let me know how it works on your end and what differs in your case.
Additionally, I suggest that you check if you delete command is defined correctly and is working properly. You can remove the edit on double click functionally of your sample and check if the deletion works as expected then.

Let me know how it goes.

Kind regards,
Iana
the Telerik team

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

[realweb]

Hi, Iana

I got your sample and check what's differences between yours and mine.
Your sample is totally working well. so, I've tried to check.
Finally, I got what's matter with delete.
because I set buttomColumn as ButtonType="ImageButton" like this...
then... it's happend.

If you do it, you can see the warning message 
"Specified argument was out of the range of valid values.
Parameter name: ItemHierarchicalInde"

and when you check html source.. you can see that there is no index for deleting. 
.fireCommand('Delete','') <- like this...

Thanks for sample, and I wish it's solved as soon as possible.

[Iana Tsolova]

Hi realweb,

Thank you for the additional information provided. I was able to replicate the issue. Please try removing the OnCommand client-side event handler and modify the OnGridCreated one as follows:

function GridCreated(sender, eventArgs)
{
 var gridElement = sender.get_element();
 var elementsToUse = [];
 inputs = gridElement.getElementsByTagName("input");
 for (var i = 0; i < inputs.length;i++)
 {
     var lowerType = inputs[i].type.toLowerCase();
     if(lowerType == "hidden" || lowerType == "button" || lowerType == "image")
     {
                continue;
     }

     Array.add(elementsToUse, inputs[i]);
         inputs[i].onchange = TrackChanges;
 }

 dropdowns = gridElement.getElementsByTagName("select");
 for (var i = 0; i < dropdowns.length;i++)
 {
     dropdowns[i].onchange = TrackChanges;
 }

 setTimeout(function(){if(elementsToUse[0])elementsToUse[0].focus();},100);

}

 
Let me know if this works for you.

Regards,
Iana
the Telerik team

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