We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

InlineFormTemplate - grid - button server side event

Thread ID:

Created:

Updated:

Platform:

Replies:

120690 Oct 5,2015 02:24 AM UTC Oct 8,2015 05:33 AM UTC ASP.NET Web Forms 7
loading
Tags: Grid
Pratheep
Asked On October 5, 2015 02:24 AM UTC

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 [Syncfusion]
Replied On October 5, 2015 10:50 AM UTC

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
Replied On October 5, 2015 10:04 PM UTC

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 [Syncfusion]
Replied On October 6, 2015 09:25 AM UTC

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
Replied On October 6, 2015 07:28 PM UTC

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 [Syncfusion]
Replied On October 7, 2015 10:30 AM UTC

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
Replied On October 7, 2015 09:17 PM UTC

Hi

Thanks,it's Working fine

Pratheep

Saravanan Arunachalam [Syncfusion]
Replied On October 8, 2015 05:33 AM UTC

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;