Client side Edit RadGrid row

[Phaneendra]

Hi,
I've have to radgrid binded from List in asp.net.
Each row in radgrid has action column, ImageButton which has VIEW|EDIT|DELETE
when Edit is clicked radwindow should display selected row details in popup and save button just displays modified row text on the radgrid back

Thanks
Krishna

[Princy]

Hello Krishna,

With reference to this demo, you can access the ImageButton in ItemCreated event and show the window. Here is the sample code.
C#:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
    GridDataItem item = (GridDataItem)e.Item;
    ImageButton editLink = (ImageButton)item.FindControl("ImageButton1");
    editLink.Attributes["href"] = "#";
    editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"], e.Item.ItemIndex);
  }
}

JS:

function ShowEditForm(id, rowIndex)
{
   var grid = $find("<%= RadGrid1.ClientID %>");
   var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
   grid.get_masterTableView().selectItem(rowControl, true);
   window.radopen("EditForm.aspx?EmployeeID=" + id, "UserListDialog");
   return false;
}

Thanks,
Princy.

[Phaneendra]

<telerik:RadWindow ID="RadgvAppliedData" runat="server">
                        <ContentTemplate>
                            <table>
                                <tr>
                                    <td>
                                        Category
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtCategory" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Machinery
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtMachinery" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Application Point
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtApplicationPoint" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Button ID="btnRadgvAppliedSave" runat="server" Text="Save" CommandName="Save" />
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </telerik:RadWindow>

Above is my radwindow, in this i need to display the selected row text.

[Princy]

Hello Krishna,

You can attach a click event to the ImageButton and set the text as hsown below.
C#:

void editLink_Click(object sender, ImageClickEventArgs e)

{

RadgvAppliedData.VisibleOnPageLoad = true;
TextBox txt = RadgvAppliedData.ContentContainer.FindControl("txtCategory") as TextBox;

txt.Text = "some text";

}

Thanks,
Princy.

[Phaneendra]

HI Princy,
what you said it agreed. But I need a client side event,
when I click on edit button of radgrid row, the selected row text should appear on radwindow context textbox controls as text.
The actions needs to be solid client actions no way of server side action.
Help me in this regards. I'm running late in time of my milestone.

[Princy]

Hi Krishna,

You can attach client event to open the window and set the text as shown below.

ASPX:

<ItemTemplate>
  <asp:ImageButton runat="server" ID="img" OnClientClick="openWindow();return false;">
</ItemTemplate>

JS:

function openWinContentTemplate()
{
 var wind = $find("RadgvAppliedData");
 wind.show();
 $get("<%= txtMachinery.ClientID %>").value="some text";
}

Thanks,
Princy.

[Phaneendra]

Hi Princy,
Thanks for the response., but the screnario didn't work with me.
Opening of windows is ok, issue with displaying selected rad grdi row value at the textbox which is in Radwindow.
I't not happing, when the button is clicked the window is opening but the relevant row values not displaying the textboxes which are inside the window.

[Princy]

Hello Krishna,

Try the following code to show the cell value in window.
C#:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
  GridDataItem item = (GridDataItem)e.Item;
  ImageButton img = (ImageButton)item.FindControl("ImageButton1");
  int index = e.Item.ItemIndex;
  img.Attributes.Add("onclick", "rowIndex('" + index + "');");
 }
}

JS:

function rowIndex(index) {
 var grid = $find('<%= RadGrid1.ClientID %>');
 var masterTable = grid.get_masterTableView();
 var row = masterTable.get_dataItems()[0];
 var cell = masterTable.getCellByColumnUniqueName(row, "UniqueName");
 var wind = $find("RadgvAppliedData");
 wind.show();
 $get("<%= txtMachinery.ClientID %>").value = cell.innerHTML;
}

Thanks,
Princy.

[Phaneendra]

Hi Princy,
Thanks for the support.
I have followed your suggestion but i faced an error. Please find with the attachment.
Now, it seems that issue is with firing the rad window from the client side.
Please look into.


Regards
Phaneendra

[Phaneendra]

function rowIndex(index) {

var grid = $find('<%= RadGrid1.ClientID %>');

var masterTable = grid.get_masterTableView();

var row = masterTable.get_dataItems()[0];

var cell = masterTable.getCellByColumnUniqueName(row, "UniqueName");

var wind = $find("RadgvAppliedData");

wind.show();

$get("<%= txtMachinery.ClientID %>").value = cell.innerHTML;

}

IN the above js script, index is returning the correct index, but the variable of row in not displaying dateitems()[0] value.

[Phaneendra]

Hi Princy,

I moved one step forward.
able to read the selected row cell data.

function rowIndex(index) {


           alert('Selected Row Index  ' + index);
           var grid = $find('<%= gvChartDetails.ClientID %>');
           var masterTable = grid.get_masterTableView();
           var oemId = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[index], "OEM.OEMId").innerHTML;
           var machineName = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[index], "OEM.Machinery.MachineryName").innerHTML;
           alert('OEMID' + oemId + 'Machine Name' + machineName);


       }

I could able to get the data, the only remaining step is to bring the radwindow and show it as popup.

[Princy]

Hello Krishna,

I apologize for the wrong code. You can access the radwindow as shown below.
C#:

img.Attributes.Add("onclick", "rowIndex('" + index + "');return false;");

JS:

function rowIndex(index) {
 var grid = $find('<%= RadGrid1.ClientID %>');
 var masterTable = grid.get_masterTableView();
 var row = masterTable.get_dataItems()[index];
 var cell = masterTable.getCellByColumnUniqueName(row, "UniqueName");
 alert(cell.innerHTML);
 var wind = $find("RadgvAppliedData");
 wind.show();
 $get("<%= txtMachinery.ClientID %>").value = cell.innerHTML;
 }

Thanks,
Princy.