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.

grid cell change (Textbox or ejDropDownList) get that entire row values to code behind - inline editing

Thread ID:

Created:

Updated:

Platform:

Replies:

123819 Apr 24,2016 02:02 PM Apr 28,2016 12:17 AM ASP.NET Web Forms 5
loading
Tags: Grid
Pratheep
Asked On April 24, 2016 02:02 PM

Hi


here if i change   int_quantity in grid -  code behind  can i get that  row  str_product_code,int_quantity,dml_price values 

     if i change  str_product_code dropdown in grid  - get that  row int_quantity,int_quantity,dml_price  values  


   <ej:Grid ID="ProductGrid" runat="server"

                    OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow"

 

                                 

                         <ej:Column Field="str_product_code" HeaderText="Product Name" IsPrimaryKey="True" ForeignKeyField="str_product_code"

                               ForeignKeyValue="str_product_name" TextAlign="Left" Width="90">    

                           </ej:Column>

                      

                               

                         <ej:Column Field="int_quantity" HeaderText="QTY"  TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric">                                                         

                        </ej:Column>

 

 

                        <ej:Column Field="dml_price" HeaderText="Unit Price"  TextAlign="Right" Width="80"  Format="{0:C}" EditType="Numeric">

                                   <NumericEditOptions DecimalPlaces="2" ></NumericEditOptions>                               

                        </ej:Column>

 

 

                      

                                                              

                            

                    </Columns>

 

                </ej:Grid>





Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On April 25, 2016 10:42 AM

Hi Pratheep, 

We have achieved your requirement,  “send the current row data to code behind” using the change event of ejDropDownList and ejNumericTextBox. Refer to the following code example and  

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <ej:Grid ID="Grid" runat="server" AllowPaging="True"> 
            . .. .  
        <Columns> 
               . . . . . 
            <ej:Column Field="EmployeeID" TextAlign="Right" EditType="Dropdown" Width="75" /> 
            <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric"> 
                <NumericEditOptions DecimalPlaces="2"></NumericEditOptions> 
            </ej:Column> 
        </Columns> 
        <ClientSideEvents ActionComplete="complete" /> 
    </ej:Grid> 
    <script> 
        function complete(args) { 
            var grid = this; 
            if (args.requestType == "beginedit") { 
                this.element.find(".gridform #MainContent_GridEmployeeID").ejDropDownList({ 
                    change: function (args) { 
                        var gridObj = $("#MainContent_Grid").ejGrid("instance"); 
                        currRow = gridObj.model.currentViewData[this.element.closest("tr").index()]; 
                        currRow["EmployeeID"] = parseInt(args.value); 
                        $.ajax({ 
                            type: "POST", 
                            url: "/Default/Data", 
                            data: { row: JSON.stringify(currRow) },//pass the current records 
                            success: function (response) { 
                                alert("Got an Object"); 
                            } 
                        }); 
 
                    } 
                }) 
                this.element.find(".gridform #MainContent_GridFreight").ejNumericTextbox({ 
                    change: function (args) { 
                        var gridObj = $("#MainContent_Grid").ejGrid("instance"); 
                        var currRow = gridObj.model.currentViewData[this.element.closest("tr").index()]; 
                        currRow["Freight"] = args.value; 
                        $.ajax({ 
                            type: "POST", 
                            url: "/Default/Data", 
                            data: { row: JSON.stringify(currRow) }, 
                            success: function (response) { 
                                alert("Got an Object"); 
                            } 
                        }); 
 
                    } 
                }) 
            } 
        } 
 
    </script> 
</asp:Content> 
 
        public string Data(string row) 
        { 
            //serialize the row and make use of current row 
            return "success"; 
        } 


Regards, 
Seeni Sakthi Kumar S. 


Pratheep
Replied On April 25, 2016 04:08 PM

Hi kumar

Thanks for your guide.I applied here that code but nothing happens, don't know where i make mistake  ( aspx page - no content master pages)

<div id="Content">


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

                    OnServerDeleteRow="EditEvents_ServerDeleteRow">

 

            <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True"></EditSettings>

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

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


            <Columns>


                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90">

                    <ValidationRule>

                        <ej:KeyValue Key="required" Value="true" />

                        <ej:KeyValue Key="number" Value="true" />

                    </ValidationRule>

                </ej:Column>

            

           

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" EditType="Numeric">

                    <NumericEditOptions DecimalPlaces="2"></NumericEditOptions>

                </ej:Column>

               

                

            </Columns>


        </ej:Grid>


    </div>


<script>

                function complete(args) {

                    var grid = this;

                    if (args.requestType == "beginedit") {

                      

                        this.element.find(".gridform #Content_OrdersGridFreight").ejNumericTextbox({

                            change: function (args) {

                                var gridObj = $("#Content_OrdersGrid").ejGrid("instance");

                      

                                var currRow = gridObj.model.currentViewData[this.element.closest("tr").index()];

                                currRow["Freight"] = args.value;

                                $.ajax({

                                    type: "POST",

                                    url: "/Default/Data",

                                    data: { row: JSON.stringify(currRow) },

                                    success: function (response) {

                                        alert("Got an Object");

                                    }

                                });

 

                            }

                        })

                    }

                }

 

    </script>

 


code behind 

      [WebMethod]

    public static string Data(string row)      

      {

            return "success"; 

       }


Thanks
Pratheep


Attachment: DialogEditing_b707d336.rar

Ragavee U S [Syncfusion]
Replied On April 26, 2016 11:48 AM

Hi Pratheep, 
  
Thanks for the update. 
  
In the previous update we have directly used the id of corresponding numeric textbox, so the mentioned issue occur in your project. To avoid these kind of issues we have used generic column name to find the corresponding numeric text box. Please refer to the below code example. 
  
this.element.find(".gridform input[name='Freight']").ejNumericTextbox({ // "Freight" is corresponding column name 
                            change: function (args) { 
                                var currRow = proxy.model.currentViewData[this.element.closest("tr").index()]; 
                                currRow["Freight"] = args.value; 
                                var value = JSON.stringify(currRow); 
                                $.ajax({ 
                                    type: "POST", 
                                    url: "/test2.aspx/Data", 
                                    dataType: "json", 
                                    contentType: 'application/json; charset=utf-8', 
                                    data: "{ row:'"+ value+"' }", 
                                    success: function (response) { 
                                        alert("Got an Object"); 
                                    }, 
                                    error: function (args) { 
                                        alert('clik'); 
                                    } 
                                }); 
  
                            } 
                        }) 
  

Regards, 
Ragavee U S. 


Pratheep
Replied On April 26, 2016 11:38 PM

Hi   ragavee

It's working fine.Thanks

Pratheep

Ragavee U S [Syncfusion]
Replied On April 28, 2016 12:17 AM

Hi Pratheep, 

  

Thanks for your update. 

  

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S. 

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.

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.

;