PDA

View Full Version : [CLOSED] Ext.Net : How can I disable check one specific node in a treepanel?



AdminAISN
Nov 07, 2013, 7:30 PM
Hi!
I am developping a software and i have to make some chechnodes always checked. SO i would like to disable checked change on thoose nodes.
Some can help me do so?
Best Regards!

Baidaly
Nov 07, 2013, 10:36 PM
Hello!

By default, it's not possible. However, we can add this functionality using the overriding:


Ext.override(Ext.tree.View, {
onCheckboxChange: function (e, t) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl());

if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
return;

if (item) {
me.onCheckChange(me.getRecord(item));
}
}
});

Full sample:


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

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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<script>
Ext.override(Ext.tree.View, {
onCheckboxChange: function (e, t) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl());

if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
return;

if (item) {
me.onCheckChange(me.getRecord(item));
}
}
});

var myBeforeCheckboxChange = function (item) {
if (this.getRecord(item).data.text == "Clean house")
return false;
else
return true;
}
</script>

<ext:TreePanel
ID="TreePanel1"
runat="server"
Title="My Task List"
Icon="Accept"
Height="400"
Width="250"
UseArrows="true"
AutoScroll="true"
Animate="true"
RootVisible="false">
<Listeners>
<BeforeSelect Handler="return false;" />
</Listeners>
<Root>
<ext:Node>
<Children>
<ext:Node Text="To Do" Icon="Folder">
<Children>
<ext:Node Text="Go jogging" Leaf="true" Checked="False" />
<ext:Node Text="Take a nap" Leaf="true" Checked="False" />
<ext:Node Text="Clean house" Leaf="true" Checked="False">
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Grocery List" Icon="Folder">
<Children>
<ext:Node Text="Bananas" Leaf="true" Checked="False" />
<ext:Node Text="Milk" Leaf="true" Checked="False" />
<ext:Node Text="Cereal" Leaf="true" Checked="False" />

<ext:Node Text="Energy foods" Icon="Folder">
<Children>
<ext:Node Text="Coffee" Leaf="true" Checked="False" />
<ext:Node Text="Red Bull" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Kitchen Remodel" Icon="Folder">
<Children>
<ext:Node Text="Finish the budget" Leaf="true" />
<ext:Node Text="Call contractors" Leaf="true" Checked="False" />
<ext:Node Text="Choose design" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>

<Listeners>
<BeforeItemClick Handler="return false" />
<Render Handler="this.getRootNode().expand(true);" Delay="50" />
</Listeners>
<View>
<ext:TreeView runat="server">
<CustomConfig>
<ext:ConfigItem Name="beforeCheckboxChange" Value="myBeforeCheckboxChange" Mode="Raw" />
</CustomConfig>
</ext:TreeView>
</View>
</ext:TreePanel>
</form>
</body>
</html>

AdminAISN
Nov 08, 2013, 2:49 PM
Hello!

By default, it's not possible. However, we can add this functionality using the overriding:


Ext.override(Ext.tree.View, {
onCheckboxChange: function (e, t) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl());

if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
return;

if (item) {
me.onCheckChange(me.getRecord(item));
}
}
});

Full sample:


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

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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<script>
Ext.override(Ext.tree.View, {
onCheckboxChange: function (e, t) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl());

if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
return;

if (item) {
me.onCheckChange(me.getRecord(item));
}
}
});

var myBeforeCheckboxChange = function (item) {
if (this.getRecord(item).data.text == "Clean house")
return false;
else
return true;
}
</script>

<ext:TreePanel
ID="TreePanel1"
runat="server"
Title="My Task List"
Icon="Accept"
Height="400"
Width="250"
UseArrows="true"
AutoScroll="true"
Animate="true"
RootVisible="false">
<Listeners>
<BeforeSelect Handler="return false;" />
</Listeners>
<Root>
<ext:Node>
<Children>
<ext:Node Text="To Do" Icon="Folder">
<Children>
<ext:Node Text="Go jogging" Leaf="true" Checked="False" />
<ext:Node Text="Take a nap" Leaf="true" Checked="False" />
<ext:Node Text="Clean house" Leaf="true" Checked="False">
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Grocery List" Icon="Folder">
<Children>
<ext:Node Text="Bananas" Leaf="true" Checked="False" />
<ext:Node Text="Milk" Leaf="true" Checked="False" />
<ext:Node Text="Cereal" Leaf="true" Checked="False" />

<ext:Node Text="Energy foods" Icon="Folder">
<Children>
<ext:Node Text="Coffee" Leaf="true" Checked="False" />
<ext:Node Text="Red Bull" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Kitchen Remodel" Icon="Folder">
<Children>
<ext:Node Text="Finish the budget" Leaf="true" />
<ext:Node Text="Call contractors" Leaf="true" Checked="False" />
<ext:Node Text="Choose design" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>

<Listeners>
<BeforeItemClick Handler="return false" />
<Render Handler="this.getRootNode().expand(true);" Delay="50" />
</Listeners>
<View>
<ext:TreeView runat="server">
<CustomConfig>
<ext:ConfigItem Name="beforeCheckboxChange" Value="myBeforeCheckboxChange" Mode="Raw" />
</CustomConfig>
</ext:TreeView>
</View>
</ext:TreePanel>
</form>
</body>
</html>

I would like it to be done in Codebehind. Is there a way to do so?

Daniil
Nov 08, 2013, 3:38 PM
I don't think it is possible to avoid JavaScript here. What exactly would you like to do in code behind?

You could bind some flag to the tree nodes like "DisableUncheck" via CustomAttributes and use it in this condition:

if (this.getRecord(item).data.text == "Clean house")