Client side Edit RadGrid row

12 posts, 1 answers
  1. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 18 Apr 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 18 Apr 2012 Link to this post

    <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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Apr 2012 Link to this post

    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.
  6. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 19 Apr 2012 Link to this post

    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.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Apr 2012 Link to this post

    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.
  8. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 20 Apr 2012 Link to this post

    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.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Apr 2012 Link to this post

    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.
  10. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 23 Apr 2012 Link to this post

    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
  11. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 23 Apr 2012 Link to this post

    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.
  12. Phaneendra
    Phaneendra avatar
    27 posts
    Member since:
    Jul 2011

    Posted 23 Apr 2012 Link to this post

    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.
  13. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Apr 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017