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.
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
|
<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>
|
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.
Refer the documentation link
Please let us know if you need further assistance.
RegardsManisankar Durai
|
<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>
|
