title: Enable Inline Editing Gridview ASP.NET when Data come from DataTable Ajax Server Side Processing
body: <p>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 <strong><a href="https://www.aspsnippets.com/Articles/ASPNet-jQuery-AJAX-CRUD-Select-Insert-Edit-Update-and-Delete-in-ASPNet-GridView-using-jQuery-AJAX.aspx" rel="nofollow noreferrer">TUTORIAL</a></strong> to do this, but I still have a problem.</p>
  
  <p>this my code how jquery handle server sido processing.</p>
  
  <pre><code>var table = null;
  
  function Loadgrid() {
  table = $('#&lt;%= gvAdjustPinDetail.ClientID %&gt;').prepend($("&lt;thead&gt;&lt;/thead&gt;").append($('#&lt;%= gvAdjustPinDetail.ClientID %&gt;').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":
          '&lt;button class="btn bg-blue waves-effect Edit" type="button"&gt;Edit&lt;/button&gt;'
          + '&lt;button class="btn bg-blue waves-effect Update" type="button" style="display:none"&gt;Update&lt;/button&gt;'
          + '&lt;button class="btn bg-blue waves-effect Cancel" type="button" style="display:none"&gt;Cancel&lt;/button&gt;' 
      },
      //display progress server side request
      "Language":
          {
              "processing": "&lt;div class='overlay custom-loader-background'&gt;&lt;i class='fa fa-cog fa-spin custom-loader-color'&gt;&lt;/i&gt;&lt;/div&gt;"
          },
      "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 &gt; 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;
  }
  </code></pre>
  
  <p>this code worked perfectly when just fill the gridview from datatable server side.</p>
  
  <pre><code>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 &gt; 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;
      });
  }
  </code></pre>
  
  <p>and here is my .aspx page:</p>
  
  <pre><code>&lt;asp:GridView ID="gvAdjustPinDetail" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered table-striped table-hover table-responsive"
  Width="100%"&gt;
  &lt;Columns&gt;
      &lt;asp:TemplateField HeaderText="Id"&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="Label1" runat="server" Text='&lt;%# Eval("Id") %&gt;' Visible="true" /&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:TemplateField HeaderText="SISO(PC)"&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="Label9" runat="server" Text='&lt;%# Eval("SISO") %&gt;' Visible="true" /&gt;
              &lt;asp:TextBox ID="txtSiso" Text='&lt;%# Eval("SISO") %&gt;' runat="server" Style="display: none" /&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:TemplateField HeaderText="Adjust PIN ID SAC" ItemStyle-CssClass="SAC_Adjust_PIN_ID"&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="lblSacPinId" runat="server" Text='&lt;%# Eval("SAC_Adjust_PIN_ID") %&gt;' Visible="true" /&gt;
              &lt;asp:TextBox Text='&lt;%# Eval("SAC_Adjust_PIN_ID") %&gt;' runat="server" Style="display: none" /&gt;
          &lt;/ItemTemplate&gt;
          &lt;ControlStyle Width="115px" /&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:TemplateField HeaderText="Adjust Name SAC" ItemStyle-CssClass="SAC_Adjust_PIN_Name"&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="lblSacName" runat="server" Text='&lt;%# Eval("SAC_Adjust_PIN_Name") %&gt;' Visible="true" /&gt;
              &lt;asp:TextBox Text='&lt;%# Eval("SAC_Adjust_PIN_Name") %&gt;' runat="server" Style="display: none" /&gt;
          &lt;/ItemTemplate&gt;
          &lt;ControlStyle Width="115px" /&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:TemplateField HeaderText="Justification SAC"&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="lblSacJustification" runat="server" Text='&lt;%# Eval("SAC_Justification") %&gt;' Visible="true" /&gt;
              &lt;asp:TextBox Text='&lt;%# Eval("SAC_Justification") %&gt;' runat="server" Style="display: none" /&gt;
          &lt;/ItemTemplate&gt;
          &lt;ControlStyle Width="115px" /&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:TemplateField HeaderText=""&gt;
          &lt;ItemTemplate&gt;
              &lt;asp:Label ID="lblAction" runat="server" Text='lblAction' Visible="true" /&gt;
          &lt;/ItemTemplate&gt;
          &lt;ControlStyle Width="115px" /&gt;
      &lt;/asp:TemplateField&gt;
  &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>i am still confusing until now to do this, if anyone wants help me i will really appreciate.</p>