Enable Inline Editing Gridview ASP.NET when Data come from DataTable Ajax Server Side Processing

Question

I tried several way how to do my gridview enable inline editing when i full fill the gridview from DataTable Server Side Processing. I follow this TUTORIAL to do this, but I still have a problem.

this my code how jquery handle server sido processing.

var table = null;

function Loadgrid() {
table = $('#<%= gvAdjustPinDetail.ClientID %>').prepend($("<thead></thead>").append($('#<%= gvAdjustPinDetail.ClientID %>').find("tr:first"))).DataTable({
    "scrollX": true, //scrolling X
    "scrollY": "500px", //scrolling Y
    "columnDefs": [{
        "defaultContent": "-",
        "targets": "_all",
        //when column value is null then fill it by button
        "data": null,
        "defaultContent":
        '<button class="btn bg-blue waves-effect Edit" type="button">Edit</button>'
        + '<button class="btn bg-blue waves-effect Update" type="button" style="display:none">Update</button>'
        + '<button class="btn bg-blue waves-effect Cancel" type="button" style="display:none">Cancel</button>' 
    },
    //display progress server side request
    "Language":
        {
            "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
        },
    "processing": true,
    "serverSide": true,
    "ajax":
        {

            "url": "EFormAdjustPinID.aspx/GetData",
            "contentType": "application/json; charset=utf-8",
            "type": "GET",
            "dataType": "JSON",
            "data": function (d) {
                return d;
            },
            "dataSrc": function (json) {
                json.draw = json.d.draw;
                json.recordsTotal = json.d.recordsTotal;
                json.recordsFiltered = json.d.recordsFiltered;
                json.data = json.d.data;

                var return_data = json;
                return return_data.data;
            },
        },
    "columns": [
                { "data": "Id" },
                { "data": "SISO" },
                { "data": "SAC_Adjust_PIN_ID" },
                { "data": "SAC_Adjust_PIN_Name" },
                { "data": "SAC_Justification" },
                { "data": null },
    ],
});


    //mapping column to append row
    var row = $('[id*=gvAdjustPinDetail] tr:last-child');
    if (table.length > 0) {
        $.each(table, function () {
            //try to append row
            AppendRow(row, $(this).find("SAC_Adjust_PIN_ID").text(), $(this).find("SAC_Adjust_PIN_Name").text(), $(this).find("SISO").text());
            row = $('[id*=gvAdjustPinDetail] tr:last-child').clone(true);
        });
    }

    EditButton(); //calling function

    return false;
}

this code worked perfectly when just fill the gridview from datatable server side.

function AppendRow(row, SAC_Adjust_PIN_ID, SAC_Adjust_PIN_Name, SISO) {
    //Bind SAC_Adjust_PIN_ID.
    $(".SAC_Adjust_PIN_ID", row).find("span").html(SAC_Adjust_PIN_ID);
    $(".SAC_Adjust_PIN_ID", row).find("input").val(SAC_Adjust_PIN_ID);

    //Bind SAC_Adjust_PIN_Name.
    $(".SAC_Adjust_PIN_Name", row).find("span").html(SAC_Adjust_PIN_Name);
    $(".SAC_Adjust_PIN_Name", row).find("input").val(SAC_Adjust_PIN_Name);

    //Bind SISO
    $(".SISO", row).find("span").html(SISO);
    $(".SISO", row).find("input").val(SISO);

    $("[id*=gvAdjustPinDetail]").append(row);
}

//Edit event handler.
function EditButton() {
$("body").on("click", "[id*=gvAdjustPinDetail] .Edit", function () {
    var row = $(this).closest("tr");
    $("td", row).each(function () {

        if ($(this).find("input").length > 0) {
            $(this).find("input").show(); //show textboxt inside gridview
            $(this).find("span").hide(); //hide label inside gridview
        }

        row.find(".Update").show();
        row.find(".Cancel").show();
        row.find(".Edit").hide();

    });
    return false;
    });
}

and here is my .aspx page:

<asp:GridView ID="gvAdjustPinDetail" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered table-striped table-hover table-responsive"
Width="100%">
<Columns>
    <asp:TemplateField HeaderText="Id">
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("Id") %>' Visible="true" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="SISO(PC)">
        <ItemTemplate>
            <asp:Label ID="Label9" runat="server" Text='<%# Eval("SISO") %>' Visible="true" />
            <asp:TextBox ID="txtSiso" Text='<%# Eval("SISO") %>' runat="server" Style="display: none" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Adjust PIN ID SAC" ItemStyle-CssClass="SAC_Adjust_PIN_ID">
        <ItemTemplate>
            <asp:Label ID="lblSacPinId" runat="server" Text='<%# Eval("SAC_Adjust_PIN_ID") %>' Visible="true" />
            <asp:TextBox Text='<%# Eval("SAC_Adjust_PIN_ID") %>' runat="server" Style="display: none" />
        </ItemTemplate>
        <ControlStyle Width="115px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Adjust Name SAC" ItemStyle-CssClass="SAC_Adjust_PIN_Name">
        <ItemTemplate>
            <asp:Label ID="lblSacName" runat="server" Text='<%# Eval("SAC_Adjust_PIN_Name") %>' Visible="true" />
            <asp:TextBox Text='<%# Eval("SAC_Adjust_PIN_Name") %>' runat="server" Style="display: none" />
        </ItemTemplate>
        <ControlStyle Width="115px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Justification SAC">
        <ItemTemplate>
            <asp:Label ID="lblSacJustification" runat="server" Text='<%# Eval("SAC_Justification") %>' Visible="true" />
            <asp:TextBox Text='<%# Eval("SAC_Justification") %>' runat="server" Style="display: none" />
        </ItemTemplate>
        <ControlStyle Width="115px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="">
        <ItemTemplate>
            <asp:Label ID="lblAction" runat="server" Text='lblAction' Visible="true" />
        </ItemTemplate>
        <ControlStyle Width="115px" />
    </asp:TemplateField>
</Columns>
</asp:GridView>

i am still confusing until now to do this, if anyone wants help me i will really appreciate.