Row double click edit and Row click edit update on Grid

[Indira]

Hi,

I would like to achieve this with AllowAutomaticUpdate/Delete/Insert set to false and with no declarative datasource.  Basically I would like to bind the data to the grid in the code behind with a business object and would like to bring the grid rows in edit mode on a client double click and update it on a rowckick after validating the input values.

I truly appreciate your help in this regard with a sample project.

Thanks!

[Princy]

Hi,

You can make a call to the RadAjaxManager AjaxRequest  from the js ,where you can execute server side code  to update your record.

JS:

  function RowClick(sender, eventArgs) {
            if (editedRow && hasChanges) {
                hasChanges = false;
                if (confirm("Update changes?")) {

                    $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest("update")
                }
            }
        }

C#

 protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "update")
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString());

            string cmdText;
            foreach(GridEditableItem editedItems in RadGrid1.EditItems)
             {
              conn.Open();
               cmdText = "Update Products set ProductName='" + ((TextBox)editedItems["ProductName"].Controls[0]).Text + " 'where ProductID='" + editedItems.GetDataKeyValue("ProductID").ToString() + "'";
               SqlCommand cmd = new SqlCommand(cmdText, conn);
               cmd.ExecuteNonQuery();
               conn.Close();
            }

            RadGrid1.Rebind();

        }
    }

Hope this helps.

Thanks,

Princy

[Indira]

Thanks for the reply.

I was not intending to use RadAjaxManager. I have tried posting back by implementing PostBackEventHandler.RaisePostBackEvent(), then it is erroring out with " this.Rows" being null or empty.

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

var hasChanges, inputs, dropdowns, editedRow;

function RowClick(sender, eventArgs)

{

if(editedRow && hasChanges)

{

hasChanges = false;

if(confirm("Update changes?"))

{

doPostBack("<%= RadGridRecLayoutPage.UniqueID %>", "RowClicked:" + this.Rows[editedRow].ItemIndex);

}

}

}

function RowDblClick(sender, eventArgs)

{

editedRow = eventArgs.get_itemIndexHierarchical();

$find("<%= RadGridRecLayoutPage.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;

}

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

}

function TrackChanges(e)

{

hasChanges = true;

}

-->

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGridRecLayoutPage" Width="97%"

ShowStatusBar="True" AllowSorting="True" PageSize="25" AllowPaging="True"

runat="server"

AutoGenerateColumns="False" ondatabound="RadGridRecLayoutPage_DataBound"

onitemupdated="RadGridRecLayoutPage_ItemUpdated"

onitemcreated="RadGridRecLayoutPage_ItemCreated"

onupdatecommand="RadGridRecLayoutPage_UpdateCommand"

onitemcommand="RadGridRecLayoutPage_ItemCommand">

<MasterTableView TableLayout="Auto" EditMode="InPlace"

EnableViewState="true">

<Columns>

<telerik:GridBoundColumn UniqueName="PageIndex" DataField="PageIndex" HeaderText="PageIndex" ReadOnly="True" Visible="false" />

<telerik:GridBoundColumn UniqueName="Location" DataField="StartingLocation" HeaderText="Location"

HeaderStyle-Width="10%" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="FieldName" DataField="FieldName" HeaderText="Field Name"

HeaderStyle-Width="28%" ColumnEditorID="FieldNameGridTextBoxColumnEditor" />

<telerik:GridNumericColumn UniqueName="FieldLength" DataField="FieldLength" HeaderText="Length"

HeaderStyle-Width="10%" ColumnEditorID="FieldLengthGridNumericColumnEditor" />

<telerik:GridBoundColumn UniqueName="FieldType" DataField="FieldType" HeaderText="Type" HeaderStyle-Width="10%" ColumnEditorID="FieldTypeGridTextBoxColumnEditor" />

<telerik:GridBoundColumn UniqueName="FieldName" DataField="FieldName" HeaderText="Comments"

HeaderStyle-Width="45%" ColumnEditorID="FieldCommentsGridTextBoxColumnEditor" />

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick"

OnGridCreated="GridCreated" OnCommand="GridCommand" />

</ClientSettings>

</telerik:RadGrid>

<telerik:GridTextBoxColumnEditor ID="FieldCommentsGridTextBoxColumnEditor" TextBoxStyle-Height="30px" TextBoxMode="MultiLine" runat="server" TextBoxStyle-Width="300px" />

<telerik:GridTextBoxColumnEditor ID="FieldTypeGridTextBoxColumnEditor" runat="server" TextBoxStyle-Width="50px" />

<telerik:GridTextBoxColumnEditor ID="FieldNameGridTextBoxColumnEditor" runat="server" TextBoxStyle-Width="180px" />

<telerik:GridNumericColumnEditor ID="FieldLengthGridNumericColumnEditor" runat="server" NumericTextBox-Width="50px" />

public partial class UserControl1 : System.Web.UI.UserControl, IPostBackEventHandler
    {
 void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
        {
            string[] postBackEventArgumentData = eventArgument.Split(':');
            switch (postBackEventArgumentData[0])
            {
                case "RowClicked":
                    GridDataItem item = RadGridRecLayoutPage.Items[int.Parse(eventArgument.Split(':')[1])];
                    Response.Write(String.Format("Page Id:{0}", item.GetDataKeyValue("PageIndex")));
                    break;
            }

        }
}

[Princy]

Hi,

Please use the code snippet instead to pass the index:

 function RowClick(sender, eventArgs) {
          if (editedRow && hasChanges) {
                hasChanges = false;
                if (confirm("Update changes?")) {
                    doPostBack("<%= RadGrid1.UniqueID %>", "RowClicked:" + sender.get_masterTableView().get_dataItems()[editedRow]._itemIndexHierarchical);


                }
            }
        }

Thanks,

Princy

[Moon]

You say to use this:

                   doPostBack("<%= RadGrid1.UniqueID %>", "RowClicked:" + sender.get_masterTableView().get_dataItems()[editedRow]._itemIndexHierarchical);

How do you determine the value of [editedrow]?