PDA

View Full Version : [CLOSED] editingPlugin is undefined with GridLock



IMehl
Feb 05, 2015, 12:25 PM
Hi,

i have an TreeGrid with CellEditing plugin and GridLock.

With an active gridlock i cannot use the editingPlugin for access to the records.
I get the Message: TypeError: App.TreeGrid1.editingPlugin is undefined

The problem is the locked columns (Locked="true") if you remove this line, everything is fine.
Can you fix this?




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

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>TreeGrid - Ext.NET Examples</title>

<script runat="server">

private object Data1
{
get
{
return new object[]
{
new object[] { "1", "Peter" },
new object[] { "2", "Paul" },
new object[] { "3", "John" },
};
}
}

private object Data2
{
get
{
return new object[]
{
new object[] { "1", "Marie" },
new object[] { "2", "Kitty" }
};
}
}

protected void OpenURL(object sender, DirectEventArgs e)
{
// Do something
}

protected void cboUser_BeforeQuery(object sender, DirectEventArgs e)
{

if (e.ExtraParams["Param1"] == "Kitchen supplies")
{

System.Data.DataTable dt = new System.Data.DataTable();
dt.Clear();
dt.Columns.Add("ID");
dt.Columns.Add("Name");
System.Data.DataRow row = dt.NewRow();
row["ID"] = "1";
row["Name"] = "Peter";
dt.Rows.Add(row);
row = dt.NewRow();
row["ID"] = "2";
row["Name"] = "Paul";
dt.Rows.Add(row);


cboStore1.DataSource = dt;
cboStore1.DataBind();
}
else
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Clear();
dt.Columns.Add("ID");
dt.Columns.Add("Name");
System.Data.DataRow row = dt.NewRow();
row["ID"] = "1";
row["Name"] = "Marie";
dt.Rows.Add(row);
row = dt.NewRow();
row["ID"] = "2";
row["Name"] = "Kitty";
dt.Rows.Add(row);


cboStore1.DataSource = dt;
cboStore1.DataBind();
}

}

</script>

<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var formatHours = function (v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};

var handler = function (grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
};

var showContextMenu = function (view, cell, cellIndex, record, row, rowIndex, e) {

var menu = App.CalcContextMenu;
menu.Node_TASK = record.get("task");

menu.showAt([e.getXY()[0], e.getXY()[1]]);
e.stopEvent();
}

var beforeCellEditHandler = function (e) {

if (e.column.dataIndex == "user") {
return true;
}
else {
return false;
}

}

</script>
</head>
<body>
<form runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

<ext:ResourceManager runat="server" />

<ext:Menu ID="CalcContextMenu" runat="server">
<Items>
<ext:Label ID="Node_TASK" runat="server" Hidden="true" />
<ext:MenuSeparator Hidden="true" />
<ext:MenuItem runat="server" Text="Do Action" Icon="Accept">
<DirectEvents>
<Click OnEvent="OpenURL" />
</DirectEvents>
</ext:MenuItem>
</Items>
</ext:Menu>

<ext:TreePanel DisableSelection="true" SortableColumns="false"
runat="server"
ID="TreeGrid1"
Title="Project Calculator"
Flex="0"
Width="300"
AutoScroll="true"
Animate="true"
UseArrows="true"
RootVisible="false"
MultiSelect="false"
Border="false"
SingleExpand="false"
FolderSort="false">
<Store>
<ext:TreeStore runat="server" ID="Store1">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="_ID" Name="Model1" ClientIdProperty="_ID">
<Fields>
<ext:ModelField Name="task" />
<ext:ModelField Name="user" />
<ext:ModelField Name="duration" />
<ext:ModelField Name="done" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<BeforeEdit Handler="return beforeCellEditHandler(e);"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
<View>
<ext:TreeView runat="server" StripeRows="true" TrackOver="true">
<Listeners>
<CellContextMenu Fn="showContextMenu" StopEvent="true" PreventDefault="false" />
</Listeners>
</ext:TreeView>
</View>
<SelectionModel>
<ext:TreeSelectionModel runat="server" Mode="Single">
</ext:TreeSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:TreeColumn
runat="server"
Lockable="true"
Locked="true"
Text="Task"
Width="200"
Sortable="true"
DataIndex="task" />
<ext:TemplateColumn
runat="server"
Text="Duration"
Flex="1"
Sortable="true"
DataIndex="duration"
Align="Center">
<Template runat="server">
<Html>
{duration:this.formatHours}
</Html>
<Functions>
<ext:JFunction Name="formatHours" Fn="formatHours" />
</Functions>
</Template>
</ext:TemplateColumn>
<ext:Column runat="server" ID="cUser" Text="User" DataIndex="user" Width="100">
<Editor>
<ext:ComboBox runat="server" ID="edtPM" DisplayField="Name" ValueField="Name" >
<ListConfig LoadingText="Loading..." />
<Store>
<ext:Store runat="server" ID="cboStore1">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<BeforeQuery OnEvent="cboUser_BeforeQuery">
<ExtraParams>
<ext:Parameter Name="Param1" Value="#{TreeGrid1}.editingPlugin.context.record.data.tas k" Mode="Raw" />
</ExtraParams>
</BeforeQuery>
</DirectEvents>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>

</ColumnModel>

<Root>
<ext:Node Text="Tasks">
<Children>
<ext:Node Icon="Folder" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
<ext:ConfigItem Name="duration" Value="13.25" />
<ext:ConfigItem Name="user" Value="Clark" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Icon="Folder" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.25" />
<ext:ConfigItem Name="user" Value="Kitty" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Paul" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Groceries" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.4" />
<ext:ConfigItem Name="user" Value="Clark" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Cleaning supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.4" />
<ext:ConfigItem Name="user" Value="Clark" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Office supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.2" />
<ext:ConfigItem Name="user" Value="Clark" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</form>
</body>
</html>



best regards
I.

fabricio.murta
Feb 06, 2015, 12:39 AM
Hello, @IMerhl

When you enable locking grid, you can access the editingPlugin from either:


App.TreeGrid1.normalGrid.editingPlugin


or



App.TreeGrid1.lockedGrid.editingPlugin


So it is just a matter of testing if there's a App.TreeGrid1.lockedGrid defined, and then using normalGrid or lockedGrid depending on the desired column's status.

I believe this helps you sort your issue. Am I right? Please let me know if this does not help.

IMehl
Feb 06, 2015, 4:46 AM
Hi @fabricio.murta,

thanks, this solves the problem. But open an other ;)

how can i check which locked status the column has and then change the extra parameter dynamically between normalGrid andf lockedGrid?

thanks
I.

fabricio.murta
Feb 06, 2015, 6:16 AM
Great that we are advancing! Are you able to fetch the column at the time of your event? Or know its name/ID beforehand?

If so, you just assign an ID to the column and then test it.

For example, say you are sorting by column task; give it an ID, say column_task and then test it against locked:

App.column_task.isLocked()

Or maybe you don't need to choose between normalGrid or lockedGrid, their editingPlugin might be but an alias of each other!.. Have you tried using just normalGrid.editingPlugin in both column states?

IMehl
Feb 09, 2015, 12:37 PM
thanks, it works fine.

Please mark this thread as solved!

best regards
I.