PDA

View Full Version : [CLOSED] Multicombo bug ? Unchecking items



CarWise
May 17, 2013, 10:08 AM
Mmm.. why can't I uncheck items in a multicombo anymore ? (in the examples with checkboxes)

Check your own demopage: http://examples2.ext.net/#/Form/ComboBox/MultiCombo/


They dissapear in the combo, but the checkboxes are still checked.

I checked it on Mozilla, Chrome and IE 10


Martin

Daniil
May 17, 2013, 10:21 AM
Hi Martin,

Thank you for the report! But as far as I can remember it has been fixed in SVN already.

CarWise
May 17, 2013, 10:21 AM
Mmm.. why can't I uncheck items in a multicombo anymore ? (in the examples with checkboxes)

Check your own demopage: http://examples2.ext.net/#/Form/ComboBox/MultiCombo/


They dissapear in the combo, but the checkboxes are still checked.

I checked it on Mozilla, Chrome and IE 10


Martin

Sorry Guys..

Just discovered older post. Going to update SVN

Martin

CarWise
May 17, 2013, 10:23 AM
Hi Martin,

Thank you for the report! But as far as I can remember it has been fixed in SVN already.

Don't you need to update your own example site ? :)

Martin

Daniil
May 17, 2013, 10:59 AM
It requires updating dlls. So, we will probably leave it as is till the next release.

CarWise
May 17, 2013, 11:07 AM
It requires updating dlls. So, we will probably leave it as is till the next release.

I understand. You can close the thread :)

gappov
Jun 04, 2013, 4:21 PM
Please post the solution

6317

Daniil
Jun 05, 2013, 5:18 AM
Here you are.

Fix

Ext.net.MultiCombo.override({
getPicker : function () {
if (!this.picker) {
this.listConfig = this.listConfig || {};

if (!this.listConfig.getInnerTpl) {
this.listConfig.getInnerTpl = function (displayField) {
return '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +
'<div class="x-mcombo-text">{' + displayField + '}</div></div>';
};
}

this.listConfig.selModel = {
mode: 'SIMPLE'
};

this.picker = this.createPicker();

this.mon(this.picker.getSelectionModel(), 'select', this.onListSelect, this);
this.mon(this.picker.getSelectionModel(), 'deselect', this.onListDeselect, this);

this.picker.tpl.getItemClass = Ext.Function.bind(function (values) {
var record,
searchValue,
selected;

if (this.selectionMode === "selection") {
return "";
}

Ext.each(this.store.getRange(), function (r) {
// do not replace == by ===
if (r.get(this.valueField) == values[this.valueField]) {
record = r;
return false;
}
}, this);

selected = record ? this.picker.getSelectionModel().isSelected(record) : false;

if (selected) {
return "x-mcombo-item-checked";
}

return "x-mcombo-item-unchecked";

}, this, [], true);


if (this.selectionMode !== "checkbox") {
this.picker.on("render", function () {
this.picker.overItemCls = "x-multi-selected";
}, this);
}

this.picker.on("viewready", this.onViewReady, this, {single:true});
}

return this.picker;
},

onListSelect : function (model, record) {
if(!this.ignoreSelection) {
this.selectRecord(record);
}
},

onListDeselect : function (model, record) {
if(!this.ignoreSelection) {
this.deselectRecord(record);
}
},

reset : function () {
this.callParent(arguments);

if(this.picker && this.picker.rendered) {
this.picker.refresh();
}
}
});

gappov
Jun 05, 2013, 5:27 AM
Everything is working fine! Thank you!

Excellent support! Daniil, I hope that you have the spirit to continue just as well in the future

Daniil
Jun 05, 2013, 5:34 AM
Thank you for the kind words! Enjoy Ext.NET:)

matthew
Sep 18, 2013, 10:59 AM
I can't get it work.
I have the following multicombo:


<ext:MultiCombo ID="aa" runat="server" Width="260">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>

<SelectedItems>
<ext:ListItem Value="2" />
<ext:ListItem Index="4" />
</SelectedItems>

</ext:MultiCombo>


Should I add something to Daniil code or modify it?

Daniil
Sep 18, 2013, 11:57 AM
Should I add something to Daniil code or modify it?

Do you mean the JavaScript fix? I think you should not change it. It should be good enough.

Please demonstrate how you are applying the fix. A full, standalone ASPX page to reproduce the problem would be the best option.

matthew
Sep 18, 2013, 12:17 PM
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Edycja.aspx.cs" Inherits="Edycja" %>

<%@ Register assembly="DevExpress.Web.ASPxEditors.v9.3, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">

Ext.net.MultiCombo.override({
getPicker : function () {
if (!this.aa) {
this.listConfig = this.listConfig || {};

if (!this.listConfig.getInnerTpl) {
this.listConfig.getInnerTpl = function (displayField) {
return '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +
'<div class="x-mcombo-text">{' + displayField + '}</div></div>';
};
}

this.listConfig.selModel = {
mode: 'SIMPLE'
};

this.aa = this.createPicker();

this.mon(this.aa.getSelectionModel(), 'select', this.onListSelect, this);
this.mon(this.aa.getSelectionModel(), 'deselect', this.onListDeselect, this);

this.aa.tpl.getItemClass = Ext.Function.bind(function (values) {
var record,
searchValue,
selected;

if (this.selectionMode === "selection") {
return "";
}

Ext.each(this.store.getRange(), function (r) {
// do not replace == by ===
if (r.get(this.valueField) == values[this.valueField]) {
record = r;
return false;
}
}, this);

selected = record ? this.aa.getSelectionModel().isSelected(record) : false;

if (selected) {
return "x-mcombo-item-checked";
}

return "x-mcombo-item-unchecked";

}, this, [], true);


if (this.selectionMode !== "checkbox")
{
this.aa.on("render", function ()
{
this.aa.overItemCls = "x-multi-selected";
}, this);
}

this.aa.on("viewready", this.onViewReady, this, {single:true});
}

return this.aa;
},

onListSelect : function (model, record) {
if(!this.ignoreSelection) {
this.selectRecord(record);
}
},

onListDeselect : function (model, record) {
if(!this.ignoreSelection) {
this.deselectRecord(record);
}
},

reset : function () {
this.callParent(arguments);

if(this.aa && this.aa.rendered) {
this.aa.refresh();
}
}
});
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body style="height: 234px">
<form id="form1" runat="server">
<div>

</div>
<br />
<br />
<br />
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="0">VSPHERE </asp:ListItem>
<asp:ListItem Value="1">ESXI</asp:ListItem>
<asp:ListItem Value="2">DOMAIN</asp:ListItem>
<asp:ListItem Value="3">ORACLE</asp:ListItem>
<asp:ListItem Value="4">OP_SYSTEM</asp:ListItem>
<asp:ListItem Value="5">LOCALIZATION</asp:ListItem>
<asp:ListItem Value="6">STORAGE</asp:ListItem>
<asp:ListItem Value="7">DOMAIN_NAME</asp:ListItem>
<asp:ListItem Value="8">PASSWORD_SYS</asp:ListItem>
<asp:ListItem Value="9">PASSWORD_ORASYS</asp:ListItem>

</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<div style="margin-left: 40px">

</div>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"/>
<asp:CheckBox runat="server" />

<ext:ResourceManager runat="server" />

<h2>Simple MultiCombo</h2>

<ext:MultiCombo ID="aa" runat="server" Width="260">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>

<SelectedItems>
<ext:ListItem Value="2" />
<ext:ListItem Index="4" />
</SelectedItems>

</ext:MultiCombo>

</form>
</body>
</html>

Daniil
Sep 18, 2013, 12:24 PM
Please move the script with the fix into the page's <head> section.

matthew
Sep 18, 2013, 12:35 PM
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Edycja.aspx.cs" Inherits="Edycja" %>

<%@ Register assembly="DevExpress.Web.ASPxEditors.v9.3, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">

Ext.net.MultiCombo.override({
getPicker : function () {
if (!this.aa) {
this.listConfig = this.listConfig || {};

if (!this.listConfig.getInnerTpl) {
this.listConfig.getInnerTpl = function (displayField) {
return '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +
'<div class="x-mcombo-text">{' + displayField + '}</div></div>';
};
}

this.listConfig.selModel = {
mode: 'SIMPLE'
};

this.aa = this.createPicker();

this.mon(this.aa.getSelectionModel(), 'select', this.onListSelect, this);
this.mon(this.aa.getSelectionModel(), 'deselect', this.onListDeselect, this);

this.aa.tpl.getItemClass = Ext.Function.bind(function (values) {
var record,
searchValue,
selected;

if (this.selectionMode === "selection") {
return "";
}

Ext.each(this.store.getRange(), function (r) {
// do not replace == by ===
if (r.get(this.valueField) == values[this.valueField]) {
record = r;
return false;
}
}, this);

selected = record ? this.aa.getSelectionModel().isSelected(record) : false;

if (selected) {
return "x-mcombo-item-checked";
}

return "x-mcombo-item-unchecked";

}, this, [], true);


if (this.selectionMode !== "checkbox")
{
this.aa.on("render", function ()
{
this.aa.overItemCls = "x-multi-selected";
}, this);
}

this.aa.on("viewready", this.onViewReady, this, {single:true});
}

return this.aa;
},

onListSelect : function (model, record) {
if(!this.ignoreSelection) {
this.selectRecord(record);
}
},

onListDeselect : function (model, record) {
if(!this.ignoreSelection) {
this.deselectRecord(record);
}
},

reset : function () {
this.callParent(arguments);

if(this.aa && this.aa.rendered) {
this.aa.refresh();
}
}
});
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body style="height: 234px">
<form id="form1" runat="server">
<div>

</div>
<br />
<br />
<br />
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="0">VSPHERE </asp:ListItem>
<asp:ListItem Value="1">ESXI</asp:ListItem>
<asp:ListItem Value="2">DOMAIN</asp:ListItem>
<asp:ListItem Value="3">ORACLE</asp:ListItem>
<asp:ListItem Value="4">OP_SYSTEM</asp:ListItem>
<asp:ListItem Value="5">LOCALIZATION</asp:ListItem>
<asp:ListItem Value="6">STORAGE</asp:ListItem>
<asp:ListItem Value="7">DOMAIN_NAME</asp:ListItem>
<asp:ListItem Value="8">PASSWORD_SYS</asp:ListItem>
<asp:ListItem Value="9">PASSWORD_ORASYS</asp:ListItem>

</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<div style="margin-left: 40px">

</div>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"/>
<asp:CheckBox runat="server" />

<ext:ResourceManager runat="server" />

<h2>Simple MultiCombo</h2>

<ext:MultiCombo ID="aa" runat="server" Width="260">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>

<SelectedItems>
<ext:ListItem Value="2" />
<ext:ListItem Index="4" />
</SelectedItems>

</ext:MultiCombo>

</form>
</body>
</html>

Daniil
Sep 18, 2013, 1:11 PM
As far as I can see the fix is still out of the <head>.