PDA

View Full Version : [CLOSED] Grid Panel - CellSelectionModel with RowEditing Plugin



RajivDutt
Apr 16, 2014, 1:39 PM
Hi

I am trying to mix 2 things here... I want to implement the row editing plugin.
But I want user to navigate within cells while in view mode (non-edit). So I have merged the rowediting with cell selection model.

But now, while I am editing a row, I am able to select cells from non-editable rows.
Screenshot attached.

http://forums.ext.net/attachment.php?attachmentid=9961&stc=1

How can I stop cell selection during row editing mode?

Code given


Html.X().GridPanel()
.Cls("channel4-custom-grid grid-border-highlighted")
.Border(true)
.ColumnLines(true)
.RowLines(true)
.ID("myGrid")
//.Height(400)
.Width(500)
.Store(
Html.X().StoreForModel().PageSize(5).Control(s =>
{
s.AutoSync = true;
s.Proxy.Add(
new RestProxy
{
AppendAction = false,
Reader = {
new JsonReader {
Root = "data",
MessageProperty = "message"
}
},
API =
{
Read = Url.Action("Read"),
Update = Url.Action("Update"),
Create = Url.Action("Create"),
Destroy = Url.Action("Destroy")
},
Writer = {
new JsonWriter
{
AllowSingle = true
}
}
}
);
s.Listeners.Write.Fn = "onWrite";
})
)

.ColumnModel(
Html.X().Column().Width(20).TdCls("first-row"),
Html.X()

.ColumnFor(Model, m => m.Id)
.ToBuilder<Column.Builder>()
.Width(40),

Html.X().ColumnFor(Model, m => m.Email)
.ToBuilder<Column.Builder>()
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVty pe(ValidationType.Email).SelectOnFocus(true)
.Listeners(l=>
{
l.SpecialKey.Fn = "preventShiftTab";
})


),

Html.X().ColumnFor(Model, m => m.First)
.ToBuilder<Column.Builder>()
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true).Disabled(true)
),

Html.X().ColumnFor(Model, m => m.Last)
.ToBuilder<Column.Builder>()
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false).SelectOnFoc us(true)
.Listeners(l=>
{
l.SpecialKey.Fn = "preventTab";
})
)
)

.SelectionModel(Html.X().CellSelectionModel())
.BottomBar(
Html.X().PagingToolbar())
.Plugins(
Html.X().RowEditing().AutoCancel(false)

.Listeners(l => {
l.CancelEdit.Handler = "if(e.record.phantom){e.store.remove(e.record);}";
l.ValidateEdit.Handler = "v";
})
)

Daniil
Apr 16, 2014, 5:08 PM
Hi @RajivDutt,

I would try the following listeners for the RowEditing plugin.

<BeforeEdit Handler="e.grid.getSelectionModel().setLocked(true)" />
<Edit Handler="e.grid.getSelectionModel().setLocked(false);" />
<CancelEdit Handler="e.grid.getSelectionModel().setLocked(false);" />

RajivDutt
Apr 21, 2014, 2:45 PM
Hi @RajivDutt,

I would try the following listeners for the RowEditing plugin.

<BeforeEdit Handler="e.grid.getSelectionModel().setLocked(true)" />
<Edit Handler="e.grid.getSelectionModel().setLocked(false);" />
<CancelEdit Handler="e.grid.getSelectionModel().setLocked(false);" />


Thanks for your response.
I want to stop the paging & sorting, while I am editing a row. When I click on the column to sort or click on the next button, it looses the data on the page.

Is there any way to prevent that?

Thanks,
Rajiv Dutt

Vladimir
Apr 22, 2014, 11:36 AM
What about to mask all except grid view element
Please see the following sample


<%@ Page Language="C#" %>


<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

store.DataSource = new List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};

store.DataBind();
}
}
</script>


<!DOCTYPE html>

<html>
<head runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<ext:XScript runat="server">
<script>
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();


// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
}, 'Employee');


grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};

var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();


grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />

<h1>GridPanel with RowEditor Plugin</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="400"
Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="2">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false">
<Listeners>
<BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el);" />
<Edit Handler="#{Spot1}.hide();" />
<CancelEdit Handler="#{Spot1}.hide();" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="25" />
<ext:Column runat="server"
Text="Name"
DataIndex="name"
Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server"
Text="Start Date"
DataIndex="start"
Format="MM/dd/yyyy"
Width="100">
<Editor>
<ext:DateField
runat="server"
AllowBlank="false"
Format="MM/dd/yyyy"
MinDate="01.01.2006"
MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>"
AutoDataBind="true"
/>
</Editor>
</ext:DateColumn>
<ext:NumberColumn
runat="server"
Text="Salary"
DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField
runat="server"
AllowBlank="false"
MinValue="1"
MaxValue="150000"
/>
</Editor>
</ext:NumberColumn>
<ext:CheckColumn
runat="server"
Text="Active?"
DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length) ;" />
</Listeners>
</ext:GridPanel>


<ext:Spotlight ID="Spot1" runat="server" />
</form>
</body>
</html>

RajivDutt
Apr 22, 2014, 2:11 PM
What about to mask all except grid view element
Please see the following sample


<%@ Page Language="C#" %>


<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

store.DataSource = new List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};

store.DataBind();
}
}
</script>


<!DOCTYPE html>

<html>
<head runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<ext:XScript runat="server">
<script>
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();


// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
}, 'Employee');


grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};

var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();


grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />

<h1>GridPanel with RowEditor Plugin</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="400"
Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="2">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false">
<Listeners>
<BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el);" />
<Edit Handler="#{Spot1}.hide();" />
<CancelEdit Handler="#{Spot1}.hide();" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="25" />
<ext:Column runat="server"
Text="Name"
DataIndex="name"
Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server"
Text="Start Date"
DataIndex="start"
Format="MM/dd/yyyy"
Width="100">
<Editor>
<ext:DateField
runat="server"
AllowBlank="false"
Format="MM/dd/yyyy"
MinDate="01.01.2006"
MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>"
AutoDataBind="true"
/>
</Editor>
</ext:DateColumn>
<ext:NumberColumn
runat="server"
Text="Salary"
DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField
runat="server"
AllowBlank="false"
MinValue="1"
MaxValue="150000"
/>
</Editor>
</ext:NumberColumn>
<ext:CheckColumn
runat="server"
Text="Active?"
DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length) ;" />
</Listeners>
</ext:GridPanel>


<ext:Spotlight ID="Spot1" runat="server" />
</form>
</body>
</html>




Thanks, can you provide me a sample how to use spotlight in MVC razor.

Vladimir
Apr 22, 2014, 3:40 PM
Just the same use, add Spotlight to the page using Razor syntax


@Html.X().Spotlight().ID("Spot1")


and use appropriate RowEditing plugin listeners like in my sample


Html.X().RowEditing().Listeners(l => {
l.BeforeEdit.Handler = "#{Spot1}.show(#{GridPanel1}.view.el);";
l.Edit.Handler = "#{Spot1}.hide();";
l.CancelEdit.Handler = "#{Spot1}.hide();";
})