Edit Row using Jquery Functionality

[maxazan]

Edit Row using Jquery Functionality

[maxazan]

Show me example, plz

[NezamAhamed87]

    var rowIndex;
    $( document ).ready( function ()
    {
        $( '.tree' ).treegrid( {
            initialState: 'collapsed',
            expanderExpandedClass: 'glyphicon glyphicon-minus',
            expanderCollapsedClass: 'glyphicon glyphicon-plus'

        } );

        $( '#tblTree tr' ).bind( 'dblclick', function ( obj )
        {
            rowIndex = obj.currentTarget.sectionRowIndex;
            var paramValues = [];
            $( 'td', obj.currentTarget ).each( function ( d, e )
            {
                paramValues.push( e.innerText );
            } );

            $( '#divPopup' ).on( 'show.bs.modal', function ()
            {
                $( '#txtTask' ).val( paramValues[0] );
                $( '#txtStatus' ).val( paramValues[1] );
                $( '#txtAssigned' ).val( paramValues[2] );
            } );
            $( '#divPopup' ).modal( 'show' );
        } );

    } );
    function SaveClick()
    {

        var returnValues = [];
        returnValues.push( $( '#txtTask' ).val() );
        returnValues.push( $( '#txtStatus' ).val() );
        returnValues.push( $( '#txtAssigned' ).val() );
        var selectedRow = $( '#tblTree tbody tr' )[rowIndex];
        var i = 0;
        $( 'td', selectedRow ).each( function ( d, e )
        {
            var oldValue = e.innerText;
            $( 'td', selectedRow )[i].innerText.replace( oldValue, returnValues[i] );
            i++;
        } );
    }       


<form id="form1" runat="server">
<div>
    <table id="tblTree" class="table tree table-bordered table-striped table-condensed">
        <thead>
            <tr style="text-align: center; background: #BBBAB8;">
                <td>
                    Task Name
                </td>
                <td>
                    Status
                </td>
                <td>
                    Assigned To
                </td>
            </tr>
        </thead>
        <tbody>
            <tr id="node-1" class="treegrid-1 treegrid-expanded" style="">
                <td id="td-1">
                    <span class="treegrid-expander glyphicon glyphicon-minus"></span>Task Base
                </td>
                <td id="td-2">
                    Active
                </td>
                <td id="td-3">
                    Network
                </td>
            </tr>
            <tr id="node-2" class="treegrid-2 treegrid-parent-1" style="display: none;">
                <td id="txtTest">
                    <span class="treegrid-indent"></span><span class="treegrid-expander"></span>Sub Task1
                </td>
                <td id="txtTd">
                    Complete
                </td>
                <td>
                    Networks
                </td>
            </tr>
            <tr class="treegrid-3 treegrid-parent-1 treegrid-expanded" style="display: none;">
                <td>
                    <span class="treegrid-indent"></span><span class="treegrid-expander glyphicon-minus glyphicon"></span>Node 1-2
                </td>
                <td>
                    Close
                </td>
                <td>
                    Development
                </td>
            </tr>
            ..........
        </tbody>
    </table>
</div>
<div id="divPopup" class="modal" role="dialog" style="left: 200px; top: 100px;">
    <div id="divPopUpContent" class="modal-content" style="width: 50%;">
        <div id="divPopUpHeader" class="modal-header">
            <span>List Of Task</span>
        </div>
        <div id="divPopUpBody" class="modal-body">
            <div class="row">
                <div class="col-lg-6">
                    <label for="s" class="screen-reader-text">
                        Task Name:</label>
                </div>
                <div class="col-lg-6">
                    <input type="text" id="txtTask" class="form-control" />
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-lg-6">
                    <label for="s" class="screen-reader-text">
                        Status:</label>
                </div>
                <div class="col-lg-6">
                    <input type="text" id="txtStatus" class="form-control" />
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-lg-6">
                    <label for="s" class="screen-reader-text">
                        Assigned To:</label>
                </div>
                <div class="col-lg-6">
                    <input type="text" id="txtAssigned" class="form-control" />
                </div>
            </div>
        </div>
        <div id="divPopUpFooter" class="modal-footer">
            <button class="small-button green" onclick="SaveClick()">
                Save</button>
        </div>
    </div>
</div>
</form>