Good afternoon,
1. Return false from the
BeforeDeselect handler of the
CheckboxSelectionModel to prevent a selection checkbox to be unchecked once checked.
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" ID="CheckboxSelectionModel1" Mode="Multi">
<Listeners>
<BeforeDeselect Handler="return false;" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
2. Return false from the
BeforeEdit handler of the editing plugin if the row is selected to prevent editing of cell values.
<script>
var beforeEdit = function (editor, e) {
return !(e.record.index in App.GridPanel1.getSelectionMemory().selectedIds);
}
</script>
<Plugins>
<ext:CellEditing runat="server">
<Listeners>
<BeforeEdit Fn="beforeEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
Whole example:
<%@ Page Language="C#" %>
<%@ 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)
{
this.Store1.DataSource = new List<Company>
{
new Company(0, "3m Co", 71.72, 0.02, 0.03),
new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
new Company(3, "American Express Company", 52.55, 0.01, 0.02),
new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54)
};
if (!this.IsPostBack)
{
RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
sm.SelectedRows.Add(new SelectedRow(2));
}
}
}
public class Company
{
public Company(int id, string name, double price, double change, double pctChange)
{
this.ID = id;
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
}
public int ID { get; set; }
public string Name { get; set; }
public double Price { get;set; }
public double Change { get;set; }
public double PctChange { get;set; }
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
var beforeEdit = function (editor, e) {
return !(e.record.index in App.GridPanel1.getSelectionMemory().selectedIds);
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>GridPanel with Checkbox Selection Model</h1>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Company List"
Collapsible="true"
Width="600">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="Change" />
<ext:ModelField Name="PctChange" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Company"
Width="160"
DataIndex="Name"
Resizable="false"
MenuDisabled="true"
Flex="1" />
<ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
<Renderer Format="UsMoney" />
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="Change">
<Renderer Fn="change" />
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" ID="CheckboxSelectionModel1" Mode="Multi">
<Listeners>
<BeforeDeselect Handler="return false;" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server">
<Listeners>
<BeforeEdit Fn="beforeEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Hope it helps.
