InlineFormTemplate - grid - button server side event

[Pratheep]

Hi

Grid row have button(attached image) - if  click that button,server side button event firing(that's fine) 

if  double click the grid row need to show InlineFormTemplate(edit form) but  without showing InlineFormTemplate(edit form) button server side event firing (here no need to fire button event need to show edit form)

   <ej:Grid ID="CustomerGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow"

                    OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow" OnServerRecordClick="onClick">

  <ej:Column HeaderText="Order" Template="true" TemplateID="#buttonTemplate" TextAlign="Center" Width="75"/>  

 <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

  <script type="text/x-jsrender" id="buttonTemplate">

        <button class="Details" name="Details">Details</button>       

    </script>

 <script type="text/javascript">

       

                          $(function () {

                              $(".Details").ejButton();

                      

                              $(".Details").click(function (e) {

                                

                                  triggerEvent(e);

                              });

                          });                    

       

                          function triggerEvent(e) {

                              var obj = $("#CustomerGrid").data("ejGrid");

                              var args = { currentTarget: e.currentTarget.name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };

                              obj._trigger("onClick", args);

                          }

       

                          </script>

        protected void onClick(object Sender, GridEventArgs e)

        {

          

        }

Thanks

Pratheep

Attachment: gridbutton_d9aab709.rar

[Alan Sangeeth S]

Hi Pratheep,

Thanks for using Syncfusion products.

We have analyzed your code snippets and found that you tried to trigger “OnServerRecordClick” Grid Server event on Button Click.

We suggest you to trigger server event, on button click, using ajax post instead of using Grid Server event. Please refer to the following example.

<ej:Grid ID="OrdersGrid" runat="server" AllowSorting="True" AllowPaging="True" >

<Columns>

…

<ej:Column HeaderText="Order" Template="true" TemplateID="#buttonTemplate" TextAlign="Center" Width="75"/> 

            </Columns>

        </ej:Grid>

<script type="text/x-jsrender" id="buttonTemplate">

        <input type="button" class="Details" name="Details" value="Details"/>    

    </script>

   <script type="text/javascript">

       $(function () {

           $(".Details").ejButton({

               click: function (e) {

                   var obj = $('#<%= OrdersGrid.ClientID %>').data("ejGrid");

                   var args = { currentTarget: this.element[0].name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };

                   $.ajax({

                       url: "Default.aspx/ButtonHandler",

                       type: "POST",

                       contentType: "application/json; charset=utf-8",

                       data: JSON.stringify(args)

                   })

               }

           });

       });

[WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] // Return the JSON formatted result

        public static void ButtonHandler(string currentTarget, List<object> selectedRecord, int selectedIndex)

        {

        }

For your convenience we have created a sample that can be downloadable from the following link.
http://www.syncfusion.com/downloads/support/forum/120690/ze/Sample1485514032

Regards,
Alan Sangeeth S

[Pratheep]

Hi

Thanks.it's working fine.but 

When click Cancel button in InlineFormTemplate(edit form) - Grid row button disable 

When click Save button in InlineFormTemplate(edit form) -Grid row button style change 

attached code 

Thanks

Pratheep

      

Attachment: Inline_Editing_f2828147.rar

[Saravanan Arunachalam]

Hi Pratheep,

Query 1: When click Cancel button in InlineFormTemplate(edit form) - Grid row button disable 

We had known issue “Button remains the disable state after cancel the edit action” and we have fixed this error. The fix has been included in our Volume 3 v13.3.0.7 release. So, we suggest you to upgrade to our latest version in order to avoid the reported issue.

And we have resolved the issue using the workaround in product version that you are using. In the workaround, we have removed the disabled attribute using “ActionComplete” event of Grid. Please refer to the following code example.

function complete(args) {

     . . .

     if (args.requestType == "cancel")

     this.getContentTable().find("tr").eq(this.model.selectedRowIndex).find(".Details").removeClass("e-disable").removeAttr("disabled");

     . . .

}

Query 2: When click Save button in InlineFormTemplate(edit form) -Grid row button style change

In previous sample, we have rendered the ejButton for the template column in document ready function which was the cause of issue. So, we suggest you to render the ejButton for the template column in “ActionComplete” event of Grid.

Please refer to the following code example.

function complete(args) {

            . . .

            OnCreate();

        }

function OnCreate(args) {

             $(".Details").ejButton({

                 click: function (e) {

                     var obj = $('#<%= OrdersGrid.ClientID %>').data("ejGrid");

                      var args = { currentTarget: this.element[0].name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };

                      $.ajax({

                          url: "WebForm1.aspx/ButtonHandler",

                          type: "POST",

                          contentType: "application/json; charset=utf-8",

                          data: JSON.stringify(args)

                      })

                  }

               });

          }

We have modified the sample that can be downloaded from the below link:

http://www.syncfusion.com/downloads/support/forum/120690/ze/F1206902129282423

Regards,

Saravanan A.

[Pratheep]

Hi

Thanks for you guide 

1. Initially Page Load  - grid button style not apply and gird button event also not firing 

2. Template - save button click -  grid button style not apply and gird button event also not firing 

3. Template - cancel button click - 1st time grid button enable but 2nd time  same row open - Template  than click  cancel  button  - grid button disable

 

 please find the attachment 

 <ej:Column HeaderText="Order" Template="true" TemplateID="#buttonTemplate" TextAlign="Center" Width="75"/> 

    <script type="text/x-jsrender" id="buttonTemplate">

        <input type="button" class="Details" name="Details" value="Details"/>     

    </script>

  function complete(args) {

             OnCreate();

}

  <script type="text/javascript">

  

          function OnCreate(args) {

              $(".Details").ejButton({

                  click: function (e) {

                      var obj = $('#<%= OrdersGrid.ClientID %>').data("ejGrid");

                     var args = { currentTarget: this.element[0].name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };

                     $.ajax({

                         url: "WebForm1.aspx/ButtonHandler",

                         type: "POST",

                         contentType: "application/json; charset=utf-8",

                         data: JSON.stringify(args)

                     })

                 }

             });

             }

        </script>

Thanks

Pratheep

Attachment: Inline_Editing_c5b16d48.rar

[Saravanan Arunachalam]

Hi Pratheep,

We are sorry for the inconvenience.

We have initially created the ejButton for the template column using “Create” event of Grid and it has been done in the previous sample. And also using “ActionComplete” event of Grid to recreate the ejButton while performs the grid operations like paging and editing. Please refer to the previous sample and also refer to the following code example.

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow"

                    OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow">

             . . .

            <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" Create="OnCreate" />

             . . .

</ej:Grid>

<script type="text/javascript">

          function complete(args) {

             . . .

             OnCreate();

         }

      function OnCreate() {

              $(".Details").ejButton({

                  click: function (e) {

                      var obj = $('#<%= OrdersGrid.ClientID %>').data("ejGrid");

                      var args = { currentTarget: this.element[0].name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };

                      $.ajax({

                          url: "WebForm1.aspx/ButtonHandler",

                          type: "POST",

                          contentType: "application/json; charset=utf-8",

                          data: JSON.stringify(args)

                      })

                  }

              });

          }

      </script>

  

Regards,

Saravanan A.

[Pratheep]

Hi

Thanks,it's Working fine

Pratheep

[Saravanan Arunachalam]

Hi Pratheep,

Thanks for your update.

We are happy to hear that your issue has been resolved.

Please get back us if you need any further assistance. We will happy to assist you.

Regards,

Saravanan A.