Edit on row double-click in RadListView control

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 13 May 2010 Link to this post

    Requirements
    RadControls version

    RadControls for ASP.NET AJAX 2010.1.415 and later
    .NET version

    NET 2.0 and later
    Visual Studio version

    2005 and later
    programming language

    C#/VB 
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    The following project demonstrates how to switch a row in edit mode by double-clicking an arbitrary RadListView item and how to update this row when the user clicks another row in the RadListView.
    The example takes advantage of the editItem() client side function, to put the RadListView 's item in edit mode when the corresponding row is double clicked:
    ... 
    <ItemTemplate> 
        <tr class="rlvI" ondblclick='row_doubleclick("<%#Container.DisplayIndex %>")'> 
            <td> 
                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /> 
            </td> 
           ... 
        </tr> 
    </ItemTemplate> 
    ... 
    function row_doubleclick(index) 
    { 
         //set item into edit mode 
         $find("<%=RadListView1.ClientID %>").editItem(index); 
    } 
     

    Once the control is in edit mode, the user can enter data in the edit fields, and then after clicking another row, a user-friendly confirm dialog is displayed to prompt whether the update operation should be performed or not. This is achieved with the following code snippet:
    //hook the click event 
    $(container).bind("click", function(event) 
    { 
        if (!$(event.target).hasClass("rlvIEdit") && 
        !$(event.target).is(":input[type='checkbox']")) 
        { 
     
            if (editRowIndex > -1 && hasChanges) 
            { 
                hasChanges = false; 
                if (confirm("Update changes?")) 
                { 
                    $find("<%=RadListView1.ClientID %>").updateItem(editRowIndex); 
                } 
                editRowIndex = -1; 
            } 
        } 
    });  
     

    The value in editRowIndex variable is set in the code behind in the RadListView.PreRender event handler:
    protected void RadListView1_PreRender(object sender, EventArgs e) 
    { 
       ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "editRowIndex",string.Format("var editRowIndex = {0};",  
          RadListView1.EditIndexes.Count > 0 ? RadListView1.EditIndexes[0] : -1), true); 
    } 
     

    NOTE: To convert the code snippet above to Visual Basic, please use our online C# to VB.Net converter tool here:  http://converter.telerik.com/

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.