This is a migrated thread and some comments may be shown as answers.

How to go in editmode using javascript?

4 Answers 204 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Saad
Top achievements
Rank 1
Saad asked on 07 Dec 2008, 07:10 AM
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.

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 08 Dec 2008, 05:28 AM
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
0
Saad
Top achievements
Rank 1
answered on 08 Dec 2008, 05:42 AM
But where to call this function....?
0
Princy
Top achievements
Rank 2
answered on 08 Dec 2008, 08:15 AM
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.
0
Iana Tsolova
Telerik team
answered on 08 Dec 2008, 01:13 PM
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.
Tags
Grid
Asked by
Saad
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Saad
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Iana Tsolova
Telerik team
Share this question
or