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.

How I can change the second cell automatically when I change the first cell

Thread ID:

Created:

Updated:

Platform:

Replies:

130501 May 16,2017 05:27 AM May 23,2017 07:44 AM JavaScript 8
loading
Tags: ejGrid
Luis Carlos
Asked On May 16, 2017 05:27 AM

Hi.

I must use the component "ejGrid" with editMode = "batch".

When a user clicks on the first cell, it shows a dropdown list, such this image.



After that, the user chooses one of them and automatically appears a value in the second cell, like the next image.



My question:
I don't know how I can change automatically the value of the second cell when I change the value of the first cell.

I'll be awating for your reply, thank you for your time.

Kind regards,
Luis Carlos Díaz.

Mani Sankar Durai [Syncfusion]
Replied On May 18, 2017 06:59 AM

Hi Luis, 

Thanks for contacting Syncfusion support 

We have analyzed your query and based on your requirement we have already prepared a Knowledge base that can be available from the below link. 
In this KB we have displayed the one column value based on another column value when clicking in dropdown 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


Luis Carlos
Replied On May 18, 2017 07:49 AM

Hi Luis, 

Thanks for contacting Syncfusion support 

We have analyzed your query and based on your requirement we have already prepared a Knowledge base that can be available from the below link. 
In this KB we have displayed the one column value based on another column value when clicking in dropdown 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


Hi again.

Maybe, I did not explain well.

When I change the value of the first cell, automatically the value of the second cell must be changed without clicking on it.

I will be awaiting for your reply, thank you again.

Best regards,
Luis Carlos Díaz.

Mani Sankar Durai [Syncfusion]
Replied On May 19, 2017 07:22 AM

Hi Luis, 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 
In this sample we have change the value of one cell when changing the value in dropdown of another cell while using batch edit mode. This can be achieved using cellEdit event in grid. 
Refer the code example. 
<div id="Grid"></div> 
<script type="text/javascript"> 
    var OrderData = @Html.Raw(Json.Encode(ViewBag.dataSource1)); //dataSource for whole grid 
    var CustData = @Html.Raw(Json.Encode(ViewBag.name));  //dataSource for dropdown 
    $(function () { 
        var element = $("#Grid"); 
        element.ejGrid({ 
            dataSource: OrderData, 
            allowPaging: true, 
           editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Batch }, 
                     ... 
            ], 
            cellEdit:"celledit" 
        }); 
 
    }); 
</script> 
 
<script type="text/javascript">     
     
    function celledit(args) { 
        setTimeout(function () { 
            $("#GridCustomerID").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown 
 
            var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object 
            $.ajax({ 
                url: '/Home/DataSource', 
                type: 'GET', 
                data: { "titleValue": titleObj.currentValue },//passed the selectedValue of the dropdown to server side 
                success: function (data1) { 
                    $("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide 
                } 
            }) 
        }, 10) 
    } 
    //change event of the Designation dropdown. 
    function ValChange(e) { 
        $.ajax({ 
            url: '/Home/DataSource', 
            type: 'GET', 
            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side 
            success: function (data1) { 
                var grid = $(".e-grid").ejGrid("instance"); 
                grid.getSelectedRows().find(".e-rowcell").eq(4).text(data1[0].text) 
                
            } 
        })         
    } 
</script> 
 

Refer the documentation link 

Please let us know if you need further assistance. 

Regards 
Manisankar Durai 


Luis Carlos
Replied On May 19, 2017 07:44 AM

Hi Luis, 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 
In this sample we have change the value of one cell when changing the value in dropdown of another cell while using batch edit mode. This can be achieved using cellEdit event in grid. 
Refer the code example. 
<div id="Grid"></div> 
<script type="text/javascript"> 
    var OrderData = @Html.Raw(Json.Encode(ViewBag.dataSource1)); //dataSource for whole grid 
    var CustData = @Html.Raw(Json.Encode(ViewBag.name));  //dataSource for dropdown 
    $(function () { 
        var element = $("#Grid"); 
        element.ejGrid({ 
            dataSource: OrderData, 
            allowPaging: true, 
           editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Batch }, 
                     ... 
            ], 
            cellEdit:"celledit" 
        }); 
 
    }); 
</script> 
 
<script type="text/javascript">     
     
    function celledit(args) { 
        setTimeout(function () { 
            $("#GridCustomerID").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown 
 
            var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object 
            $.ajax({ 
                url: '/Home/DataSource', 
                type: 'GET', 
                data: { "titleValue": titleObj.currentValue },//passed the selectedValue of the dropdown to server side 
                success: function (data1) { 
                    $("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide 
                } 
            }) 
        }, 10) 
    } 
    //change event of the Designation dropdown. 
    function ValChange(e) { 
        $.ajax({ 
            url: '/Home/DataSource', 
            type: 'GET', 
            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side 
            success: function (data1) { 
                var grid = $(".e-grid").ejGrid("instance"); 
                grid.getSelectedRows().find(".e-rowcell").eq(4).text(data1[0].text) 
                
            } 
        })         
    } 
</script> 
 

Refer the documentation link 

Please let us know if you need further assistance. 

Regards 
Manisankar Durai 


Hi again.

I am using a big framework with a lot of libraries in order to create a web page which contains multiple and complexity user interfaces, therefore, I do not see your solution viable. I was wondering if there is another way without setTimeOut() method.

In addition, I would rather testing your solution with a JsPlayground sample.

I will be awaiting for your reply, thanks again.

Kind regards, 
Luis Carlos Díaz.

Mani Sankar Durai [Syncfusion]
Replied On May 22, 2017 07:12 AM

Hi Luis, 

We have analyzed your query and when using batch editMode we can trigger only cellEdit event in grid. When it triggers the grid edit form will not render which means the dropdown element will not render. To access the dropdown element it has to be rendered properly so that we have defined it in the setTimeout function which is in cellEdit event and this is the recommended way to achieve the cascading dropdown when using the editMode as “batch”. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Robert Mims
Replied On May 22, 2017 08:23 AM

Luis,

Perhaps you take a look at my related thread - I'm having some of the same challenges you are with a data driven application and the timing of underlying value updates affecting other cell data and options.

While batch  mode provides many more event hooks, the rabbit hole you may be seeking could be related to the actionBegin and actionComplete events. You'll see in my code example that I attach metadata as focus is lost in one container and then use it to attempt (we're working on that) to drive behavior in the dependent cell.

Hopefully we'll get there - the support team has been very helpful in working towards solutions thus far.

Robert


Luis Carlos
Replied On May 22, 2017 08:37 AM

Hi Robert.

Thank you for your quick reply, however, I have to use the batch edit mode, so I cannot use the normal mode.

Anyway, if I take in consideration the Manisankar Durai's answer, I will try to avoid the behaviour of change other value cells.

Kind regards, 
Luis Carlos Díaz.

Mani Sankar Durai [Syncfusion]
Replied On May 23, 2017 07:44 AM

Hi Luis, 

Sorry for the inconvenience caused. 

To achieve your requirement without using setTimeout in grid we suggest you to use editTemplate feature in grid.  
Refer the code example 
<div id="Grid"></div> 
... 
    var CustData = @Html.Raw(Json.Encode(ViewBag.name));  //dataSource for dropdown 
    $(function () { 
        var element = $("#Grid"); 
        element.ejGrid({ 
... 
 
           editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Batch },//, formPosition: "topRight" }, 
... 
            columns: [ 
                     ... 
                     { field: "CustomerID", headerText: 'Customer ID',  
                     editTemplate : { create :"create",   read : "read",  write : "write"},width: 90 }, 
            ], 
            cellEdit:"celledit" 
        }); 
 
    }); 
</script> 
<script type="text/javascript"> 
    function create() { 
        return $("<input>"); 
    } 
    function write(args) { 
     args.element.ejDropDownList({ width: "100%",change: "ValChange" , dataSource: CustData,  selectedItemIndex:0 });   //rendering the dropdown for the column 
    } 
 
    function read(args) { 
        return args.ejDropDownList("getSelectedValue"); 
    } 
</script> 
 
 
 
 
<script type="text/javascript">     
    function ValChange(e) { 
        $.ajax({ 
            url: '/Home/DataSource', 
            type: 'GET', 
            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side 
            success: function (data1) { 
                var grid = $(".e-grid").ejGrid("instance"); 
                grid.getSelectedRows().find(".e-rowcell").eq(4).text(data1[0].text) 
                
            } 
        })         
    } 
</script> 
 

From the above code example using editTemplate property of columns in grid we can render the dropdown for the particular column using write event in editTemplate. After rendering using change event in dropdown we can assign the value for another column. 

Refer the documentation link. 

We have also prepared a sample that can be downloaded from the below link. 

Note: We suggest you to remove the cellEdit event which we suggested in the previous update. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


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.

;