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.
| @(Html.EJ().Grid<object>("FlatGrid") .Columns(col => })) <script type="text/javascript"> function create() { return $("<input>"); }
function write(args) { obj = $('#FlatGrid').ejGrid('instance'); var data = []; $.ajax({ //get the data for the autoComplete control type: "GET", url: "/Grid/BatchDataSource", success: function (data, status, xhr) { var data1 = ej.DataManager(data.result).executeLocal(new ej.Query().select("CustomerID")); args.element.ejAutocomplete({ width: "100%", dataSource: data1, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); } }); }
function read(args) { args.ejAutocomplete('suggestionList').css('display', 'none'); return args.ejAutocomplete("getValue"); } $("#FlatGrid").keyup(function (e) { if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) { var autocomp = $("#EdittemplateEmployeeID").ejAutocomplete("instance") if (autocomp._getActiveText() != "No suggestions") $(e.target).val(autocomp._getActiveText()); } }); </script> |
Primary Data
|
CourseRegistration |
|
StudentID |
|
CourseID |
Secondary Data (Related Data)
|
Course |
|
CourseID |
|
CourseName |
| @(Html.EJ().Grid<object>("Editing") .Datasource(ds => ds.URL("/Home/BatchDataSource").BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)) .AllowPaging() .ClientSideEvents(eve => eve.CellEdit("cellEdit").CellSave("cellSave")) .Columns(col => { col.Field("OrderID").IsPrimaryKey(true).Add(); col.Field("EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource(ViewBag.datasource).Add(); . . . . . }) ) <script> function cellEdit(args) { if (args.columnName == "EmployeeID") { args.columnObject.dataSource = undefined; args.columnObject.editParams = { enableFilterSearch: true }; } } function cellSave(args){ this.model.columns[1].dataSource = @Html.Raw(Json.Encode(ViewBag.datasource));//EmployeeID column } |
| @(Html.EJ().Grid<object>("Editing") .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).InsertURL("/Home/Insert").UpdateURL("/Home/Update").RemoveURL("/Home/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor)) .AllowPaging() . .. . . . . .Columns(col => { col.Field("OrderID").HeaderText("Order ID").Add(); . . . . . col.Field("FirstName").EditTemplate(temp => { temp.Create("create").Read("read").Write("write"); }).Add();//Virtual column }) .ClientSideEvents(evt => evt.Load("onLoad")) ) <script> var data = @Html.Raw(Json.Encode(ViewBag.datasource1)); var arr =[{ dataSource: data, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName" }];
function onLoad(args) { this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(arr,"remoteSaveAdaptor"); } function create() { return "<input>"; } function read(args) { args.ejAutocomplete('suggestionList').css('display', 'none'); return args.ejAutocomplete("getValue"); } function write(args) { var data1 = ej.DataManager(data).executeLocal(new ej.Query().select("FirstName")); args.element.ejAutocomplete({ width: "100%", dataSource: data1, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["FirstName"] : "" }); } $("#Editing").keyup(function (e) { if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) { var autocomp = $("#EditingFirstName").ejAutocomplete("instance") if (autocomp._getActiveText() != "No suggestions") $(e.target).val(autocomp._getActiveText()); } }); |
| .Columns(col => { col.Field("EmployeeID").HeaderText("FirstName").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").Add(); . . .. . }) |
If I click on it individual item then the cell is just empty
Issue Three (check box interaction)
For some reason check box is not working correctly when editing if I try to click on check box while hovering over the check box then I get to see the stop icon
In this case if I click anywhere else within the cell then Check box is updated, but the issue is unpredictable as it doesn’t happen 100% of the time.
Issue Four
Based on check box value on the grid column is it possible to
disable the row so that the row is locked and users aren’t allowed to delete
and individual columns aren’t editable as well.
I have server side validation but client side validation would be nice
(also showing dialog to inform that the records can’t be deleted)
If you could provide some assistance that would be greatly appreciated.
Regards
Prasanth
| @(Html.EJ().Grid<object>("Editing") .Datasource(ds => ds.URL("/Home/BatchDataSource").BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)) .AllowPaging() .ClientSideEvents(eve => eve.CellEdit("cellEdit")) . . . .Columns(col => { . . . col.Field("Verified").HeaderText("Verified").EditType(EditingType.Boolean).Width(80).Add(); }) ) <script> function cellEdit(args) { if(!args.rowData.Verified) args.cancel = true . . .. } </script> |
Hi Prasanthan,
Thanks for using Syncfusion products.
We have provided support for “EditTemplate” which is used to create custom editor (like AutoComplete). Using “EditTemplate” we can render the AutoComplete control as follows,
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource(ds => ds.URL("BatchDataSource").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))
. . . .
. . . .
.Columns(col =>
{
. . . .
col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add();
}))
<script type="text/javascript">
function create() {
return $("");
}
function write(args) {
obj = $('#FlatGrid').ejGrid('instance');
var data = [];
$.ajax({
//get the data for the autoComplete control
type: "GET",
url: "/Grid/BatchDataSource",
success: function (data, status, xhr) {
var data1 = ej.DataManager(data.result).executeLocal(new ej.Query().select("CustomerID"));
args.element.ejAutocomplete({ width: "100%", dataSource: data1, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
}
});
}
function read(args) {
args.ejAutocomplete('suggestionList').css('display', 'none');
return args.ejAutocomplete("getValue");
}
$("#FlatGrid").keyup(function (e) {
if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {
var autocomp = $("#EdittemplateEmployeeID").ejAutocomplete("instance")
if (autocomp._getActiveText() != "No suggestions")
$(e.target).val(autocomp._getActiveText());
}
});
script>
Refer to the below link for more clarification about EditTemplate,
http://help.syncfusion.com/aspnetmvc/grid/editing#cell-edit-template
http://mvc.syncfusion.com/demos/web/grid/edittemplate
Regards,
Gowthami V.
$("#autocomplete").ejAutocomplete({
popupWidth: '152px'
});
