PDA

View Full Version : [CLOSED] Row Editing Validation



RajivDutt
May 20, 2014, 1:06 PM
Hi,

I am using row editing plugin in Grid Panel.

I am trying to validate the row and I want to stay in edit mode, until validation is not passed.
This is a server side validation.

Reference.
http://mvc.ext.net/#/GridPanel_Update/Restful/

I tried to use the direct events, but no luck.

Please suggest, how can I force edit plugin not to go away, until data is not valid.

Thanks,
Rajiv Dutt

Daniil
May 20, 2014, 2:58 PM
Hi @RajivDutt,


I am trying to validate the row

Please clarify how do you do that?

RajivDutt
May 22, 2014, 7:39 AM
Hi Daniil,


Hi @RajivDutt,



Please clarify how do you do that?

Please check the following code snippets.


@{
var storeEmployee = X.Store()
.ID("storeEmployee")
.AutoLoad(true)
.PageSize(5)
.RemoteSort(true)
.Proxy(X.AjaxProxy().Url(Url.Action("Read")).Reader(X.JsonReader().Root("data")))
.Model(X.Model()
.Fields(
Html.X().ModelField().Name("Id").Mapping("Id"),
Html.X().ModelField().Name("Email").Mapping("Email").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("First").Mapping("First").SortType(Ext.Net.SortTypeMethod.AsUCString),
Html.X().ModelField().Name("Last").Mapping("Last"),
Html.X().ModelField().Name("Salary").Mapping("Salary")
));
}
@(
Html.X().GridPanel()
.Border(true)
.ColumnLines(true)
.RowLines(true)
.Cls("grid-sample")
.ID("gridEmployee")
.Width(500)
.Store(storeEmployee)
.ColumnModel(
X.Column().ID("col1").DataIndex("Id").Text("Id").Hidden(false).Width(20).TdCls("first-row"),
X.Column().DataIndex("Email").Width(150).Text("Email").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVty pe(ValidationType.Email)
.SelectOnFocus(true)
),
X.Column().DataIndex("First").Text("First").Sortable(true).MenuDisabled(true).Draggable(fals e)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(true)
),
X.Column().DataIndex("Last").Text("Last").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
),
X.Column().DataIndex("Salary").Text("Salary").Sortable(true).MenuDisabled(true).Draggable(fals e).Disabled(false)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(false)
)
)
.SelectionModel(Html.X().CellSelectionModel().Auto DataBind(true).AllowDeselect(true).Clear().EnableK eyNav(true).Listeners(s => s.Select.Handler = "selectMe()"))
.BottomBar(
Html.X().PagingToolbar().ID("editList"))
.Plugins(
Html.X().RowEditing().AutoCancel(false).ErrorSumma ry(false)
.DirectEvents(de =>
{
de.Edit.Before = "return FieldValidation(el,type,action,extraParams,o)";
de.Edit.Url = Url.Action("SaveEmployee");
de.Edit.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "getData()",
Mode = ParameterMode.Raw,
Encode = true
});
de.Edit.Method = HttpMethod.POST;
de.Edit.Success = "displayResult(result)";
de.Edit.Failure = "displayErrorResult(result)";
})
.Listeners(l =>
{
l.CancelEdit.Handler = "if(e.record.phantom){e.store.remove(e.record);} cancelEdit();";
//l.ValidateEdit.Handler = "v";
l.BeforeEdit.Handler = "beforeEdit();";
l.Edit.Handler = "Edit();";
})
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("this.up('grid').store.insert(0, new LoadTestPerson());this.up('grid').store.commitChan ges();"),

Html.X().Button()
.ItemID("btnRemove")
.Text("Delete")
.Icon(Icon.Exclamation)
.Handler("this.up('grid').deleteSelected();")
)
)
)
<script type="text/javascript">
var selectedRow = 0;
var personID = 100;
function fetchID()
{
personID = personID + 1;
return personID;
}

function LoadTestPerson()
{
this.Id = fetchID();
this.Email = "";
this.First = "";
this.Last = "";
this.Salary = 0.00;
}

function selectMe()
{
if (App.gridEmployee.getSelectionSubmit().selModel.se lected.length > 0)
{
//App.gridEmployee.getSelectionSubmit().selModel.sel ected.items[0].index;
selectedRow = App.gridEmployee.getStore().indexOf(App.gridEmploy ee.getSelectionSubmit().selModel.selected.items[0]);
//var currentPage = App.store1.currentPage;
var pageSize = App.storeEmployee.pageSize;
selectedRow = (selectedRow % pageSize);// * currentPage) + (selectedRow - pageSize);
}
else
selectedRow = 0;

$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
var firstCell = App.gridEmployee.getView().getCell(App.gridEmploye e.store.getAt(selectedRow), App.gridEmployee.columns[0]);
$(firstCell.dom).addClass("selected-grid-cell");

var selectedCell = App.gridEmployee.view.getCellByPosition(App.gridEm ployee.getSelectionModel().getCurrentPosition());
if (selectedCell)
{
selectedCell.addCls('x-grid-cell-selected');
}
}

function beforeEdit()
{
//switchGridSort(false);
//switchGridPaging(true);
App.gridEmployee.getSelectionSubmit().selModel.des electAll();
$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
App.gridEmployee.getSelectionModel().setLocked(tru e);
}

function GridEditComplete(grid)
{
grid.editingPlugin.completeEdit();
}

function Edit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
//GridEditComplete(grid);
//grid.getSelectionModel().select(selectedRow);
//Grid.getSelectionModel().select(selectedRow);
}

function cancelEdit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
//setSelectedRow(App.gridEmployee);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
}

var FieldValidation = function (el, type, action, extraParams, o)
{
if (!App.storeEmployee.isDirty())
{
//selectedRow++;

var Grid = App.gridEmployee;
var GridStore = Grid.store;

//if (selectedRow >= GridStore.pageSize || selectedRow >= GridStore.data.length)
// selectedRow = 0;
Grid.getView().focusRow(selectedRow);
Grid.getSelectionModel().select(selectedRow);

return false;
}
}
function getData()
{
return Ext.StoreMgr.getByKey('storeEmployee').getChangedD ata();
}

function displayResult(result)
{
Ext.net.Notification.show({ title: 'Update successful', html: result.message });
}

// Do not close the Row Over Editor and do not allow other rows to be edited
function displayErrorResult(result)
{
Ext.net.Notification.show({ title: 'Update Failed', html: result.message });
}

Ext.grid.RowEditor.override({
beforeEdit: function (e)
{
//console.log(this.context.rowIdx);
var me = this;//, scrollDelta;
//if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
if (me.isVisible() && !me.autoCancel && me.isDirty())
{
//scrollDelta = me.getScrollDelta();
//if (scrollDelta)
//{
// me.scrollingViewEl.scrollBy(0, scrollDelta, true)
//}
//me.showToolTip();
return false;
}
}
});
</script>
<style type="text/css">
.selected-grid-cell {
background-color: #0096FF !important;
}

.grid-sample .x-grid-cell-selected {
background-color: #ffffff !important;
border: #0096ff 1px solid !important;
}


.grid-sample .x-grid-cell-selected:focus {
background-color: #0096ff!important;
}


.grid-sample .x-grid-view {
overflow: hidden !important;
}

.first-row .x-item-disabled {
border: 0px !important;
}

.grid-sample .x-btn-default-small-noicon .x-btn-inner {
line-height: 18px !important;
}

.grid-sample .x-grid-cell-inner {
padding: 3px 6px 4px !important;
}

.selected-grid-cell {
background-color: #0096FF !important;
}
</style>

Model
public class TestPerson
{
[ModelField(IDProperty = true, UseNull = true)]
[Field(Ignore = true)]
public int? Id
{
get;
set;
}

[EmailValidation]
[PresenceValidation]
public string Email
{
get;
set;
}

[PresenceValidation]
public string First
{
get;
set;
}

[PresenceValidation]
public string Last
{
get;
set;
}

[PresenceValidation]
public DateTime DateOfBirth
{
get;
set;
}

[PresenceValidation]
public double Salary
{
get;
set;
}

[PresenceValidation]
public string countries
{
get;
set;
}

private static int curId = 7;
private static object lockObj = new object();

private static int NewId
{
get
{
return System.Threading.Interlocked.Increment(ref curId);
}
}

public static List<TestPerson> TestData
{
get
{
return new List<TestPerson>
{
new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06), Salary=654560.00,countries= "2"},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06),Salary=50565.59,countries= "3"},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06), Salary=50565.59, countries= "5"},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=46565.09,countries= "2"},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=57567.59,countries= "4"},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=2000.5798,countries= "4"},
new TestPerson{Id=7, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone", DateOfBirth = new DateTime(1965, 10, 06),Salary=2000.5454,countries= "1"},
new TestPerson{Id=8, Email="barney@rubble.com", First="Barney", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06),Salary=442000.00,countries= "3"},
new TestPerson{Id=9, Email="betty@rubble.com", First="Betty", Last="Rubble",DateOfBirth = new DateTime(1965, 10, 06), Salary=5400.00,countries= "5"},
new TestPerson{Id=10, Email="bambam@rubble.com", First="BamBam", Last="Rubble", DateOfBirth = new DateTime(1965, 10, 06), countries= "4"},
};
}

}

public static List<TestPerson> Storage
{
get
{
var persons = HttpContext.Current.Session["TestPersons"];

if (persons == null)
{
persons = TestPerson.TestData;
HttpContext.Current.Session["TestPersons"] = persons;
}

return (List<TestPerson>)persons;
}
set
{
HttpContext.Current.Session["TestPersons"] = value;
}
}

public static void Clear1()
{
TestPerson.Storage = null;
}

public static void UpdatePerson(TestPerson person)
{
lock (lockObj)
{
var persons = TestPerson.Storage;
TestPerson updatingPerson = null;

foreach (TestPerson p in persons)
{
if (p.Id == person.Id)
{
updatingPerson = p;
break;
}
}

if (updatingPerson == null)
{
throw new Exception("TestPerson not found");
}

updatingPerson.Email = person.Email;
updatingPerson.Last = person.Last;
updatingPerson.First = person.First;

TestPerson.Storage = persons;
}
}



public static Paging<TestPerson> PlantsPaging(StoreRequestParameters parameters)
{
return TestPerson.PlantsPaging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}

public static Paging<TestPerson> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<TestPerson> plants = TestPerson.Storage;
var pagedPersons = plants.Skip(start).Take(limit).ToList();

return new Paging<TestPerson>(pagedPersons, 10);
}
}

Conroller

public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(TestPerson.PlantsPaging(parameters));
}
[HttpPost]
public RestResult SaveEmployee(StoreDataHandler changedData)
{
// Validations to be added later.
return new RestResult
{
Success = false,
Message = "Person could not be updated."
};
}



As you can see we are using a Direct event to validate the row data and returns the status as success/error details.
In case of an error, the row over editor should not be cancelled nor the user should be allowed to edit the other rows as well.

Please suggest, how can I force edit plugin not to go away, until data is not valid.


Thanks,
Rajiv Dutt

Daniil
May 22, 2014, 5:47 PM
If you want validation when a user clicks the Update button, it is a way to go:
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor_Remote/

I don't think there are other options.

RajivDutt
May 23, 2014, 11:33 AM
Hi @danill

Thanks for reply.


If you want validation when a user clicks the Update button, it is a way to go:
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor_Remote/

I don't think there are other options.

This example is using "App.direct" to access the remote methods.

I've made changes in plugin section of the grid by replacing the directEvents and listeners with the SaveHandler.



// Grid Definition
.Plugins(
Html.X().RowEditing().AutoCancel(false).ErrorSumma ry(false).SaveHandler("validateSave")
)

<script type="text/javascript">
var validateSave = function ()
{
var plugin = this.editingPlugin;
if (this.getForm().isValid())
{ // local validation
App.direct.ValidateSave(plugin.context.record.phan tom, this.getValues(false, false, false, true), {
success: function (resultvalidateSave)
{
if (!result.valid)
{
Ext.Msg.alert("Error", result.msg);
return;
}

plugin.completeEdit();
}
});
}
};
</script>

Controller

[DirectMethod]
public object ValidateSave(bool isPhantom, JsonObject values)
{
if (!isPhantom)
{
return new { valid = true };
}

if (!values.ContainsKey("Salary") || Convert.ToInt32(values["Salary"]) < 1000)
{
return new { valid = false, msg = "Salary must be >=1000 for new employee" };
}

return new { valid = true };
}


After modifying the code and running the application "App.direct" is shown as undefined.

I've also tried using "Ext.net.DirectMethod" instead of "App.direct" but no luck...

Please suggest any idea.

Thanks,
Rajiv Dutt

Daniil
May 23, 2014, 1:38 PM
You should use "App.direct.ActionName".

Is there a DirectController attribute for the controller?

[DirectController]
public class YourController : Controller

RajivDutt
May 23, 2014, 2:00 PM
You should use "App.direct.ActionName".

Is there a DirectController attribute for the controller?

[DirectController]
public class YourController : Controller


Thanks for the prompt reply.

Now I've used the "App.direct.ValidateSave" where ValidateSave is the Action name.

[DirectController] attribute is already there in the controller class.

But if you debug the code a JavaScript error is being thrown :
"0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'ValidateSave': object is null or undefined"

It says "App.direct" is null or undefined. So the problem is in JS code not in controller.

Please help.

Daniil
May 23, 2014, 2:41 PM
It says "App.direct" is null or undefined. So the problem is in JS code not in controller.

If no [DirectController] attribute, then App.direct.ValidateSave won't be rendered to client.

Do you use Areas? Could you, please, post the Page Sources of a rendered page?

RajivDutt
May 23, 2014, 2:54 PM
If no [DirectController] attribute, then App.direct.ValidateSave won't be rendered to client.

Do you use Areas? Could you, please, post the Page Sources of a rendered page?

Thanks for the prompt reply.

Source Code :



<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="/Design.Deal/extjs/resources/ext_theme_gray/ext-theme-gray-all-embedded-css/ext.axd?v=41185" id="ext-theme" />
<link type="text/css" rel="stylesheet" href="/Design.Deal/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=41185" />
<script type="text/javascript" src="/Design.Deal/extjs/ext-all-js/ext.axd?v=41185"></script>
<script type="text/javascript" src="/Design.Deal/extnet/extnet-all-js/ext.axd?v=41185"></script>

<meta charset="utf-8" />
<title>Index Deal Module</title>
<link href="/Design.Deal/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Design.Deal/Content/master.css" rel="stylesheet"/>
<link href="/Design.Deal/Content/jquery.jscrollpane.css" rel="stylesheet"/>
<link href="/Design.Deal/Content/dropdown-menu.css" rel="stylesheet"/>

<link href="/Design.Deal/Content/themes/base/jquery.ui.menu.css" rel="stylesheet"/>
<link href="/Design.Deal/Content/themes/base/jquery.ui.spinner.css" rel="stylesheet"/>
<link href="/Design.Deal/Content/themes/base/jquery.ui.tooltip.css" rel="stylesheet"/>

<script src="/Design.Deal/Scripts/modernizr-2.6.2.js"></script>

<!--[if lt IE 9]>
<script src="/Design.Deal/Scripts/Apps/html5.js"></script>
<![endif]-->

<script src="/Design.Deal/Scripts/jquery-2.0.3.js"></script>
<script src="/Design.Deal/Scripts/jquery.mousewheel.js"></script>

<script src="/Design.Deal/Scripts/jquery-ui-1.10.3.js"></script>

<script src="/Design.Deal/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Design.Deal/Scripts/jquery.validate.js"></script>
<script src="/Design.Deal/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Design.Deal/Scripts/jqueryjscrollpane.min.js"></script>


<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({isMVC:true,theme:"gray",appName:"Design.Deal"});Ext.onReady(function(){Ext.create("Ext.grid.Panel",{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"Id",mapping:"Id"},{name:"Email",mapping:"Email",sortType:"asUCString"},{name:"First",mapping:"First",sortType:"asUCString"},{name:"Last",mapping:"Last"},{name:"Salary",mapping:"Salary"}] }),storeId:"storeEmployee",autoLoad:true,proxy:{type:"ajax",reader:{type:"json",root:"data"},url:"/Design.Deal/GridSample/Grid/Read"},pageSize:5,remoteSort:true},id:"gridEmployee",border:true,cls:"grid-sample",plugins:[{ptype:"rowediting",autoCancel:false,errorSummary:false,saveHandler:v alidateSave}],renderTo:"App.gridEmployee_Container",width:500,bbar:{id:"editList",xtype:"pagingtoolbar",displayInfo:true,store:"storeEmployee"},tbar:{xtype:"toolbar",items:[{handler:function(){this.up('grid').store.insert(0 , new LoadTestPerson());this.up('grid').store.commitChan ges();},iconCls:"#Add",text:"Add"},{itemId:"btnRemove",handler:function(){this.up('grid').deleteSelected ();},iconCls:"#Exclamation",text:"Delete"}]},columnLines:true,columns:{items:[{id:"col1",width:20,dataIndex:"Id",tdCls:"first-row",text:"Id"},{width:150,draggable:false,dataIndex:"Email",editor:{xtype:"textfield",vtype:"email",allowBlank:false,selectOnFocus:true},menuDisabled :true,sortable:true,text:"Email"},{draggable:false,dataIndex:"First",editor:{disabled:true,xtype:"textfield",allowBlank:false,selectOnFocus:true},menuDisabled :true,sortable:true,text:"First"},{draggable:false,dataIndex:"Last",editor:{xtype:"textfield",allowBlank:false,selectOnFocus:true},menuDisabled :true,sortable:true,text:"Last"},{draggable:false,dataIndex:"Salary",editor:{xtype:"textfield",allowBlank:false,selectOnFocus:true},menuDisabled :true,sortable:true,text:"Salary"}]},selModel:Ext.create("Ext.selection.CellModel",{selType:"cellmodel",allowDeselect:true,listeners:{select:{fn:function (item,record,row,column){selectMe()}}}})});Ext.cre ate("Ext.button.Button",{renderTo:"App.id7512c794a5d7cdb6_Container",handler:function(){Ext.net.DirectMethod.SetTimeSt amp();},iconCls:"#Lightning",text:"Click Me"});Ext.net.ResourceMgr.registerIcon(["Add","Exclamation","Lightning"]);});
//]]>
</script>
</head>
<body>

<!-- Container Start Here -->
<div class="container">
<!-- Header Start Here -->

<header>
<!-- Nav Start Here -->

<!-- Nav End Here -->
<!-- Progress Bar Start Here -->
<div class="progress-bar">&nbsp;</div>
<!-- Progress Bar End Here -->
<!-- Breadcrumb Start Here -->


<div class="clear"></div>
<!-- Breadcrumb End Here -->
</header>

<!-- Header End Here -->

<div class="mid-container">



<div class="sidebar-left fleft scroll-pane-left">
<div class="grid_2 omega1">

</div>
</div>

<div class="sidebar-right fright scroll-pane-right">
<div class="grid_2 alpha1">
</div>
</div>



<h1>RESTful Store</h1>
<div class="content clear-sidebar-both scroll-pane-content horizontal-only" id="abc">

<div id="App.gridEmployee_Container"></div>
<div id="App.id7512c794a5d7cdb6_Container"></div>

</div>

</div>
</div>
<!-- Footer Start Here -->
<div id="divMessageArea" style="display:none;"> </div>
<footer>

<div class="fleft">
</div>

<script type="text/javascript">
var selectedRow = 0;
var personID = 100;
function fetchID()
{
personID = personID + 1;
return personID;
}

function LoadTestPerson()
{
this.Id = fetchID();
this.Email = "";
this.First = "";
this.Last = "";
this.Salary = 0.00;
}

function selectMe()
{
if (App.gridEmployee.getSelectionSubmit().selModel.se lected.length > 0)
{
//App.gridEmployee.getSelectionSubmit().selModel.sel ected.items[0].index;
selectedRow = App.gridEmployee.getStore().indexOf(App.gridEmploy ee.getSelectionSubmit().selModel.selected.items[0]);
//var currentPage = App.store1.currentPage;
var pageSize = App.storeEmployee.pageSize;
selectedRow = (selectedRow % pageSize);// * currentPage) + (selectedRow - pageSize);
}
else
selectedRow = 0;

$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
var firstCell = App.gridEmployee.getView().getCell(App.gridEmploye e.store.getAt(selectedRow), App.gridEmployee.columns[0]);
$(firstCell.dom).addClass("selected-grid-cell");

var selectedCell = App.gridEmployee.view.getCellByPosition(App.gridEm ployee.getSelectionModel().getCurrentPosition());
if (selectedCell)
{
selectedCell.addCls('x-grid-cell-selected');
}
}

function beforeEdit()
{
//switchGridSort(false);
//switchGridPaging(true);
App.gridEmployee.getSelectionSubmit().selModel.des electAll();
$(".selected-grid-cell").removeClass('selected-grid-cell');
$(".x-grid-cell-selected").removeClass('x-grid-cell-selected');
App.gridEmployee.getSelectionModel().setLocked(tru e);
}

function GridEditComplete(grid)
{
grid.editingPlugin.completeEdit();
}

function Edit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
//GridEditComplete(grid);
//grid.getSelectionModel().select(selectedRow);
//Grid.getSelectionModel().select(selectedRow);
}

function cancelEdit()
{
var grid = App.gridEmployee;
//switchGridSort(true);
//switchGridPaging(false);
grid.getSelectionSubmit().selModel.deselectAll();
grid.getSelectionModel().setLocked(false);
//setSelectedRow(App.gridEmployee);
GridEditComplete(grid);
grid.getView().focusRow(selectedRow);
grid.getSelectionModel().select(selectedRow);
//setSelectedRow(App.gridEmployee);
}

var FieldValidation = function (el, type, action, extraParams, o)
{
if (!App.storeEmployee.isDirty())
{
//selectedRow++;

var Grid = App.gridEmployee;
var GridStore = Grid.store;

//if (selectedRow >= GridStore.pageSize || selectedRow >= GridStore.data.length)
// selectedRow = 0;
Grid.getView().focusRow(selectedRow);
Grid.getSelectionModel().select(selectedRow);

return false;
}
}
function getData()
{
return Ext.StoreMgr.getByKey('storeEmployee').getChangedD ata();
}

function displayResult(result)
{
Ext.net.Notification.show({ title: 'Update successful', html: result.message });
}

// Do not close the Row Over Editor and do not allow other rows to be edited
function displayErrorResult(result)
{
Ext.net.Notification.show({ title: 'Update Failed', html: result.message });
}

Ext.grid.RowEditor.override({
beforeEdit: function (e)
{
//console.log(this.context.rowIdx);
var me = this;//, scrollDelta;
//if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
if (me.isVisible() && !me.autoCancel && me.isDirty())
{
//scrollDelta = me.getScrollDelta();
//if (scrollDelta)
//{
// me.scrollingViewEl.scrollBy(0, scrollDelta, true)
//}
//me.showToolTip();
return false;
}
}
});
var validateSave = function ()
{
var plugin = this.editingPlugin;
if (this.getForm().isValid())
{ // local validation
App.direct.ValidateSave(plugin.context.record.phan tom, this.getValues(false, false, false, true), {
success: function (resultvalidateSave)
{
if (!result.valid)
{
Ext.Msg.alert("Error", result.msg);
return;
}

plugin.completeEdit();
}
});
}
};
</script>
<style type="text/css">
.selected-grid-cell {
background-color: #0096FF !important;
}

.grid-sample .x-grid-cell-selected {
background-color: #ffffff !important;
border: #0096ff 1px solid !important;
}


.grid-sample .x-grid-cell-selected:focus {
background-color: #0096ff!important;
}


.grid-sample .x-grid-view {
overflow: hidden !important;
}

.first-row .x-item-disabled {
border: 0px !important;
}

.grid-sample .x-btn-default-small-noicon .x-btn-inner {
line-height: 18px !important;
}

.grid-sample .x-grid-cell-inner {
padding: 3px 6px 4px !important;
}

.selected-grid-cell {
background-color: #0096FF !important;
}
</style>

</footer>
<!-- Footer End Here -->

<!-- Container End Here -->

</body>

</html>

Daniil
May 23, 2014, 3:18 PM
As far as I can see the DirectMethods are not rendered to client.

Please post the controller.

RajivDutt
May 23, 2014, 3:37 PM
As far as I can see the DirectMethods are not rendered to client.

Please post the controller.




[DirectController]
public class GridController : Controller
{

[DirectMethod]
public object ValidateSave(bool isPhantom, JsonObject values)
{
if (!isPhantom)
{
return new { valid = true };
}

if (!values.ContainsKey("salary") || Convert.ToInt32(values["salary"]) < 1000)
{
return new { valid = false, msg = "Salary must be >=1000 for new employee" };
}

return new { valid = true };
}
}

Daniil
May 23, 2014, 4:36 PM
That looks correct.

Could you, please, answer this?

Do you use Areas?

If you use that, you should use an AreaName

[DirectController(AreaName="Events")]
and access a DirectMethod in this way

App.direct.Events.ValidateSave(...)

RajivDutt
May 24, 2014, 7:12 AM
Hi.


That looks correct.

Could you, please, answer this?


If you use that, you should use an AreaName

[DirectController(AreaName="Events")]
and access a DirectMethod in this way

App.direct.Events.ValidateSave(...)

Sorry for the trouble.

I'm using Areas.

Now I've modified he Controller code as:




using Ext.Net;
using Ext.Net.MVC;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Areas.GridSample.Controllers
{
[DirectController(AreaName = "Events")]
public class GridController : Controller
{
public ActionResult GridSelectionModel()
{
return View();
}

public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(TestPerson.PlantsPaging(parameters));
}

[DirectMethod]
public object ValidateSave(bool isPhantom, JsonObject values)
{
if (!isPhantom)
{
return new { valid = true };
}

if (!values.ContainsKey("salary") || Convert.ToInt32(values["salary"]) < 1000)
{
return new { valid = false, msg = "Salary must be >=1000 for new employee" };
}

return new { valid = true };
}
}
}


and the JS function :


var validateSave = function ()
{
var plugin = this.editingPlugin;
if (this.getForm().isValid())
{ // local validation
App.direct.Events.ValidateSave(plugin.context.reco rd.phantom, this.getValues(false, false, false, true), {
success: function (resultvalidateSave)
{
if (!result.valid)
{
Ext.Msg.alert("Error", result.msg);
return;
}

plugin.completeEdit();
}
});
}
};

It still gives a JS error "Cannot read property 'Events' of undefined".

Do we need to define "App.direct" in my application ?

Daniil
May 24, 2014, 9:34 AM
Do we need to define "App.direct" in my application ?

No, you have not.

Please post the Page Sources again with the last change.

[DirectController(AreaName = "Events")]
public class GridController : Controller