How to go in editmode using javascript?

5 posts, 0 answers
  1. Saad
    Saad avatar
    82 posts
    Member since:
    Oct 2008

    Posted 07 Dec 2008 Link to this post

    I have defined my editmode template in which there is a textbox and two buttons....And i have put up an GridEditCommandColumn on each row as well. I need to put the row in edit when that GridEditCommandColumn is clicked, but at the client side.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Dec 2008 Link to this post

    Hi Saadi,

    You can set a row in edit mode on client side using the following code snippet.

    JS:
    <script type="text/javascript"
      function SetEdit() 
      { 
      var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
      masterTable.editItem(masterTable.get_dataItems()[0].get_element()); 
      } 
       
    </script> 

    editItem

    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saad
    Saad avatar
    82 posts
    Member since:
    Oct 2008

    Posted 07 Dec 2008 Link to this post

    But where to call this function....?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Dec 2008 Link to this post

    Hi Saadi,

    Access the Edit linkbutton in the code behind and attach the OnClick client event to it as shown below.

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

    CS:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridDataItem) 
            { 
                GridDataItem item = (GridDataItem)e.Item; 
                int rowIndex = item.ItemIndex; 
                LinkButton editBtn = (LinkButton)item["EditCol"].Controls[0]; 
                editBtn.Attributes.Add("onClick", "return EditItem('" + rowIndex + "');"); 
            } 
       } 

    JS:
    <script type="text/javascript" language="javascript"
             
              function EditItem(rowIndex) 
              { 
              var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();  
              masterTable.editItem(masterTable.get_dataItems()[rowIndex].get_element()); 
             
              } 
            </script> 


    Princy.
  6. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 08 Dec 2008 Link to this post

    Hi saadi,

    The GridEditCommandColumn is used to automatically enter the grid in edit mode. If you use it, you do not need to call any additional server or client code in order to turn a grid item into edit mode.
    However if you would like to invoke grid item editing with client-side code, I suggest that you use GridTemplateColumn with button inside it:

    <script type="text/javascript">    
    function EditItem(rowIndex)    
    {    
        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();     
        masterTable.editItem(masterTable.get_dataItems()[rowIndex].get_element());    
    }    
    </script>    
     
    <telerik:GridTemplateColumn UniqueName="TemplateColumn">  
        <ItemTemplate> 
            <input id="btnEdit" type="button" value="Edit" runat="server" /> 
        </ItemTemplate> 
    </telerik:GridTemplateColumn> 
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  
    {  
        if (e.Item is GridDataItem)  
        {  
            HtmlInputButton btnEdit = (e.Item as GridDataItem)["TemplateColumn"].FindControl("btnEdit"as HtmlInputButton;  
            btnEdit.Attributes["onclick"] = "EditItem(" + e.Item.ItemIndex + ")";  
        }  

    Let me know if this helps.

    Kind regards,
    Iana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017