1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. How to call server side function when textchanged in Grid

How to call server side function when textchanged in Grid

Hello,

I'm working on Grid.
I would like to implement function that if one of the column (textbox) was changed, it should be called a function in code behind.
Before we use syncfusion control, we used to used <asp:textbox OnTextChanged="functionA"/>.

How can we achieve this in ej:grid?

Thank you in advance.
Yukiko


7 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team August 28, 2018 08:31 AM UTC

Hi Yukiko, 

Thanks for contacting Syncfusion support. 

Based on your requirement we suspect that when the Grid in Edit State you need to call a function in server-side while modify the textbox value. The textboxes in grid edit form is a client based control, so it is not feasible to bind the server-side event for the textboxes.  

To achieve your requirement we can bind the keydown event to the textboxes and from the keydown event we can use ajax call to send the data to server-side. But before we proceed with this,  please share the purpose of calling a function in code behind when the textbox value has been changed. Based on your purpose we will try to achieve your requirement with other methods.  

Regards, 
Prasanna Kumar N.S.V 


YI Yukiko Imazu August 28, 2018 02:17 PM UTC

Hi Prasanna Kumar,

Thank you for you replying.

I attach my sample solution that I'm working on.
What I want to achieve is that when one of the column(cost column) was changed in edit mode, I want to call Calculation function in code behind, then I want to calculate based on database in that function.  After calculation, I want to set result back to the one of the column(sum column) in the same row in grid and checkbox (checkColumnA) should be checked.  It is complicated function, but can we do this?

Thanks,
Yukiko

Attachment: test_53d26edf.7z

AS Alan Sangeeth S Syncfusion Team August 29, 2018 03:54 PM UTC

Hi Yukiko, 

As per your given detail we suspect that you want to modify the check box column value when you edit the cost column value in edit form. 

By binding the keyup event for the Cost column in the actionComplete event of ejGrid control and we can do post back and update checkbox. 

So, we suggest you to follow the below code example to achieve your requirement. 

[ucPerson.ascx] 

<ej:Grid ID="Grid1" runat="server" AllowPaging="True"  DataSourceID="test34" ClientIDMode="AutoID" >  
 
<ClientSideEvents ActionBegin="onbegin" MergeHeaderCellInfo="mergeHead"  RowSelected="rowselect" ActionComplete="onGridActionCompleteEvent" />   
       
        <Columns> 
 
            --- 
 
        </Columns> 
</ej:Grid> 
 
<script type="text/javascript"> 
 
function onGridActionCompleteEvent(args) { 
         
        if (args.requestType == "beginedit" || args.requestType == "add") { 
 
            $("#ctl00_MainContent_ucPerson1_Grid1cost").keyup(function (event) { 
                var editedData = {}; 
                editedData.cost = $("#ctl00_MainContent_ucPerson1_Grid1cost").val(); 
                editedData.priceId = $("#ctl00_MainContent_ucPerson1_Grid1priceId").val(); 
 
                $.ajax({ 
                    type: "POST", 
                    url: "Default.aspx/Calculation", 
                    datatype: "json", 
                    contentType: "application/json; charset=utf-8", 
                    data: JSON.stringify({ gridSelectedData: editedData }), 
                    success: function (result) { 
                      
                     if (result.d == 1) { 
 
          var obj = $("#ctl00_MainContent_ucPerson1_Grid1checkColumnA").ejCheckBox('instance'); 
                            obj.option({ checked: true }); 
                        }                        
                    }, 
                    error: function (args) { 
                        alert('error occurred'); 
                    } 
                }); 
 
            }); 
        } 
} 
</script> 
 
---------------------------------------------------- 
[Default.aspx] 

<WebMethod> 
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> 
    Public Shared Function Calculation(ByVal gridSelectedData As Object) As Object 
 
        ' Do your stuff here 
        
        Return result 
 
    End Function 


Note: Due to user control does not have the valid URL to call methods. So, we have done the same in an aspx page in your sample. 


We have modified the provided sample and it can be downloadable from the below location. 


Refer the help documentation. 


Regards, 
Alan Sangeeth S 


YI Yukiko Imazu August 29, 2018 06:46 PM UTC

Hi,

Thank you for replying and sample solution.

>Note: Due to user control does not have the valid URL to call methods. So, we have done the same in an aspx page in your sample. 

If we want to achieve this requirement in user control, what should we do?   Is there another solution for this?

Thanks,
Yukiko


AS Alan Sangeeth S Syncfusion Team August 30, 2018 10:56 AM UTC

Hi Yukiko, 

It’s not feasible to do ajax post to ascx page and so could not be integrated in grid. Please refer the following documentation link. 


Regards,
Alan Sangeeth S 


YI Yukiko Imazu August 31, 2018 01:21 PM UTC

Hi Alan,

Thank you for your support and information.

Regards,
Yukiko

PK Prasanna Kumar Viswanathan Syncfusion Team September 3, 2018 05:41 AM UTC

Hi Yukiko, 

Thanks for the update. 

Please get back to us if you require further assistance. 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon