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,
I am using CellEditType. DropdownEdit edit mode in manual excel like editing with JSON action mode.
My code looks exactly as given in samples on your site. Now when I run the app I get following Javascript error - 'grid.jsonModeMgr._jsonDataAndOption.FIELDNAME_Options' is null or not an object.
This is because it didn't get the drop down list options.
In all of your code samples I didn't find any way to specify any way for specifying data source.
Please let me know how can I supply master list for adding new row for drop down columns.
Thanks.
Hi Mohit,
Thank you for using Syncfusion products.
Your requirement of displaying dropdownlist values in edit form can be achieved
by handling ajax post . The datas of the dropdownlist values can be added by
handling OnCellEdit event and setting the dropdown selected value to the grid
can be achieved by handling OnActionSuccess Event. Please refer to the
code-snippets below.
Step #1: Set the Celledittype as DropDownEdit in grid column and handle the
events for updating drop down.
<%=Html.Syncfusion().Grid<EditableOrder>("SampleGrid") .Datasource(Model) .Caption("Orders") .Column(col => { col.Add(c => c.ShipCountry).CellEditType(CellEditType.DropdownEdit); . . . . }).ClientSideEvents(events=>{
events.OnCellEdit('SetdropDownData'); //Updating dropdown values
events.OnActionSuccess('GetdropDownData'); //Obtaining the dropdownlist values
})
%>
Step #2:Handling Ajax post for
updating Dropdown values
Script as follows:
<script
type='text/javascript'>
var dropDownOptions = null;
function GetdropDownData(sender,
args) {
$.ajax({
type: 'POST',
url: 'Home/GetCountries',
dataType: 'json',
success: function (data) {
dropDownOptions = data;
}
});
}
function SetdropDownData(sender,
args) {
if (dropDownOptions != null)
UpdateDropDown(dropDownOptions);
}
function UpdateDropDown(data) {
$('#ShipCountry').empty();
$.each(data, function (index, val)
{
var optionTag =
$('<option></option>');
$(optionTag).val(val.Value).text(val.Text);
$('#ShipCountry').append(optionTag);
});
}
</script>
Step #3: Populate external country list dropdown values.
[Controller]
public IEnumerable<SelectListItem> CountryList
{
get
{
List<SelectListItem> type = new List<SelectListItem>();
type.Add(new SelectListItem
{
Selected = true,
Text = "Switzerland",
Value = "Switzerland"
});
type.Add(new SelectListItem
{
Text = "Brazil",
Value = "Brazil"
});
type.Add(new SelectListItem
{
Text = "Germany",
Value = "Germany"
});
return type;
}
}
public ActionResult GetCountries()
{
return Json(CountryList, JsonRequestBehavior.AllowGet);
}
For your convenience , we have prepared the sample and the same can be downloaded from the following link:
http://www.syncfusion.com/downloads/Support/DirectTrac/95502/Sample1116395137.zip
Please try this and let us know if you have any other queries.
Regards,
Eswari.S
Hi Anthony,
Thanks for the update.
Query #1: Can you please update the sample for version 10.3.0.43 (the latest). I'm having a trouble running it with the latest version.
We have modified the sample for latest version and the same can be downloaded from the following link:
http://www.syncfusion.com/downloads/Support/DirectTrac/97663/Sample1201781218.zip
We suspect that the cause of the error which you posted would be, MVC4 and MVC3 conflict. Please refer to the following link:
Query #2: Additional questions. Can the same approach may be used with: .ActionMode(ActionMode.Server) ? .EditMode(GridEditMode.Normal) ?
We have prepared the sample for your requirement and the same can be downloaded from the following link:
http://www.syncfusion.com/downloads/Support/DirectTrac/97663/Sample-Normal Editing-159064718.zip
In server mode , for updating dropdown we need to bind the events “OnActionBegin” and “OnActionSuccess”.Please refer to the following code snippets:
@{Html.Syncfusion().Grid<EditableOrder>("SampleGrid")
. . . . . .
.ClientSideEvents(events =>
{
events.OnActionSuccess("SetdropDownData"); //Updating dropdown values
events.OnActionBegin("GetdropDownData"); //Obtaining the dropdownlist values
})}
Please try this and let us know if you have any other queries.
Regards,
Eswari.S
