Hi ,
I need your Help i try to convert "GridPanel with RowEditor Plugin" to Razor Engine but there is some function does not work like Add Employee :
-This is My Code Sorce :
@using (Html.BeginForm())
{
@Html.X().ResourceManager()
@(Html.X().GridPanel()
.Title("List Of Members ")
.Height(500)
.Width(1000)
.ID("GridPanel1")
.Store(store => store.Add(Html.X().Store()
.PageSize(20)
.Buffered(true)
.AutoLoad(true)
.ID("dsMembers")
.RemoteSort(false)
.Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
.Url("/Data/GetMembers/")
.Reader(reader => reader.Add(Html.X().JsonReader()
.Root("data")
.TotalProperty("total")
.IDProperty("MemberID")
))
))
.Model(model => model.Add(Html.X().Model()
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("MemberID"));
fields.Add(Html.X().ModelField().Name("FirstName"));
fields.Add(Html.X().ModelField().Name("LastName"));
fields.Add(Html.X().ModelField().Name("Email"));
fields.Add(Html.X().ModelField().Name("Password"));
fields.Add(Html.X().ModelField().Name("Title"));
})))))
.Plugins(plug => plug.Add(Html.X().RowEditing().ClicksToMoveEditor(1).AutoCancel(false)))
.TopBar(tob => tob.Add(Html.X().Toolbar().Items(item =>
{
item.Add(Html.X().Button().Text("Add Member").Icon(Icon.UserAdd).Listeners(listn =>
listn.Click.Fn = "addEmployee"));
item.Add(Html.X().Button().Text("Remove Employee").Icon(Icon.UserDelete).Disable(true).ID("btnRemoveEmployee").Listeners(
listn =>
listn.Click.Fn = "removeEmployee"));
}
)))
.ColumnModel(columnModel =>
{
columnModel.Columns.Add(Html.X().Column().Text("MemberID").DataIndex("MemberID").Flex(1));
columnModel.Columns.Add(Html.X().Column().Text("FirstName").DataIndex("FirstName").Flex(1).Editor(item => item.Add(Html.X().TextField().AllowBlank(false))));
columnModel.Columns.Add(Html.X().Column().Text("LastName").DataIndex("LastName").Flex(1).Editor(item => item.Add(Html.X().TextField().AllowBlank(false))));
columnModel.Columns.Add(Html.X().Column().Text("Email").DataIndex("Email").Flex(1).Editor(item => item.Add(Html.X().TextField().Vtype("email").AllowBlank(false))));
columnModel.Columns.Add(Html.X().Column().Text("Password").DataIndex("Password").Flex(1).Editor(item => item.Add(Html.X().TextField().Vtype("password").AllowBlank(false))));
columnModel.Columns.Add(Html.X().Column().Text("Title").DataIndex("Title").Flex(1).Editor(item => item.Add(Html.X().TextField().AllowBlank(false))));
})
.Listeners(listen => listen.SelectionChange.Handler = "App.btnRemoveEmployee.setDisabled(!selected.length);")
.BottomBar(bar => bar.Add(Html.X().PagingToolbar()
.DisplayInfo(true)
.DisplayMsg("Displaying customers {0} - {1} of {2}")))
.View(view => view.Add(Html.X().GridView())))
}
And the code of Javascript is :
<script type="text/javascript">
var addEmployee = function () {
var grid = App.GridPanel1;
grid.editingPlugin.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
MemberID: '-1',
FirstName: 'New Member',
LastName: 'New Member',
Email: 'new@object.net',
Password: '*******',
Title: 'Mr'
}, 'Employee');
grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
}
var removeEmployee = function () {
var grid = App.GridPanel1,
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
}
</script>
I try to insert the javascript Code in XScript via Razor Engine but didn't know How ?
Please give me Help.
