PDA

View Full Version : [CLOSED] Checkbox Slider bug



pawangyanwali
Jun 26, 2013, 5:15 AM
Hi,

The slider that I have modified is working fine except in the row expander's form panel. It is not rendered as checked though the value is true.



@model System.Collections.IEnumerable

@{
ViewBag.Title = "RowExpander with FormPanel Detail";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
<style>
#sliderLabel {
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
height: 20px;
margin: -5px 3px;
overflow: hidden;
position: relative;
width: 60px;
}
#sliderLabel input{
display: none;
}

#sliderLabel input:checked + #slider{
left: 0px;
}

#slider {
left: -50px;
position: absolute;
top: 0px;
-moz-transition: left .25s ease-out;
-webkit-transition: left .25s ease-out;
-o-transition: left .25s ease-out;
transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff {
display: block;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:10px;
height: 20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0px;
}
#sliderOn {
background: #3269aa;
background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3269aa), color-stop(100%, #82b3f4));
background: -webkit-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -o-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -ms-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: linear-gradient(top, #3269aa 0%, #82b3f4 100%);
color: white;
left: 0px;
width: 30px;
}
#sliderBlock {
background: #d9d9d8;
background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d8), color-stop(100%, #fcfcfc));
background: -webkit-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -o-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -ms-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 28px;
left: 30px;
width: 45px;
}
#sliderOff {
background: #f2f3f2;
background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b8c8b), color-stop(50%, #f2f3f2));
background: -webkit-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -o-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -ms-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
color: #8b8b8b;
left: 65px;
width: 50px;
}

.white-footer .x-toolbar-footer{
background-color: white !important;
}
</style>

<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 + "%");
};
Ext.override(Ext.form.field.Checkbox, {

fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'{boxLabel} <label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"

'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}{boxLabel}',
'</tpl>',

'<tpl if="boxLabel== undefined">',

'<label id="sliderLabel" for="{id}">',

'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',

'</tpl>',

{
disableFormats: true,
compiled: true
}

]
});
</script>
}

@section example
{
<h1>RowExpander Plugin with FormPanel Detail</h1>

@(
Html.X().GridPanel()
.Title("Expander Rows with control")
.Icon(Icon.Table)
.Width(600)
.Height(350)
.Store(Html.X().Store()
.DataSource(Model)
.PageSize(10)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("price").Type(ModelFieldType.Float),
Html.X().ModelField().Name("change").Type(ModelFieldType.Float),
Html.X().ModelField().Name("pctChange").Type(ModelFieldType.Float),
Html.X().ModelField().Name("lastChange").Type(ModelFieldType.Date).DateFormat("M/d hh:mmtt"),
Html.X().ModelField().Name("industry"),
Html.X().ModelField().Name("status").Type(ModelFieldType.Boolean)
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1),
Html.X().Column().DataIndex("price").Text("Price").Renderer(RendererFormat.UsMoney),
Html.X().Column().DataIndex("change").Text("Change").Renderer("change"),
Html.X().Column().DataIndex("pctChange").Text("Change").Renderer("pctChange"),
Html.X().DateColumn().DataIndex("lastChange").Text("Last Updated"),
Html.X().CheckColumn().DataIndex("status").Text("Status")
)
.BottomBar(Html.X().PagingToolbar().HideRefresh(tr ue))
.Plugins(
Html.X().RowExpander()
.SingleExpand(false)
.Component(
Html.X().FormPanel()
.BodyPadding(6)
.Height(250)
.Border(false)
.DefaultAnchor("-5")
.Cls("white-footer")
.Items(
Html.X().TextField().Name("company").FieldLabel("Company"),
Html.X().NumberField().Name("price").FieldLabel("Price"),
Html.X().NumberField().Name("change").FieldLabel("Change"),
Html.X().NumberField().Name("pctChange").FieldLabel("% Change"),
Html.X().DateField().Name("lastChange").FieldLabel("Last Updated"),
Html.X().Checkbox().Name("status").FieldLabel("Status")
)
.Buttons(
Html.X().Button()
.Text("Save")
.Icon(Icon.Disk)
.Handler(@"
var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));
form.getForm().updateRecord(form.record);
"),

Html.X().Button()
.Text("Cancel")
.Icon(Icon.Decline)
.Handler(@"
var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));
")
)
.Listeners(l =>
{
l.AfterRender.Handler = "this.getForm().loadRecord(this.record);";
})
)
)
)
}


What's happening here is, though the Status value is true, it is not being displayed as ON.
Can you please have a look at it.

Daniil
Jun 26, 2013, 5:42 AM
Hi Pawan,

Probably, you should override a CheckBox's setValue method.

Ext.override(Ext.form.field.Checkbox, {
setValue: function (value) {
this.callParent(arguments);

// check/uncheck according to the value
}
});

pawangyanwali
Jun 26, 2013, 6:35 AM
I tried your suggestion but it is not working.



Ext.override(Ext.form.field.Checkbox, {
setValue: function (value) {
this.callParent(arguments);

if (value == true) {
checked = true;
}
else {
checked = false;
}
}
});


Did I miss something?

Daniil
Jun 26, 2013, 6:50 AM
Please clarify what should it do?



if (value == true) {
checked = true;
}
else {
checked = false;
}

pawangyanwali
Jun 26, 2013, 7:23 AM
It should the value of the checkbox, and check if it is true or false If the value is true, the checkbox's checked status should be true and and if the value is false it's checked status should be false.

But the problem is, it is not affecting checkbox's checked status. It is showing OFF.

Daniil
Jun 26, 2013, 10:04 AM
Let's forget about an Ext.NET Checkbox for a while.

Could you clarify how to set up initial state for a slider Checkbox (the one that you used as the source for overriding an Ext.NET Checkbox)?

pawangyanwali
Jun 26, 2013, 10:23 AM
The checkbox's UI is implemented using this code where it is rendered without being checked at first.


'<tpl if="boxLabel== undefined">',

'<label id="sliderLabel" for="{id}">',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',

'</tpl>'


Here I have initialized checkbox where 'checked ' is not defined, but. if I use the same code like this...


'<tpl if="boxLabel== undefined">',

'<label id="sliderLabel" for="{id}">',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" checked/>',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',

'</tpl>'

It appears with checked state. Here I have added just 'checked' at the end of input tag.

Daniil
Jun 26, 2013, 11:19 AM
So, within the setValue method you should set/reset an input's checked attribute.

pawangyanwali
Jun 26, 2013, 11:55 AM
That is exactly what I have done as you have said. You can see that, the checked status of checkbox is set to true.

6454

The problem is even after setting the checkbox's checked property to true, ON is not being displayed.

6455

Daniil
Jun 26, 2013, 2:30 PM
Well, this doesn't do anything.

checked = true;

You should update an attribute of a rendered HTML input element.

Also you should take into account a Checkbox's checked config.

It can look something like this.

Example

Ext.override(Ext.form.field.Checkbox, {
fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'{boxLabel} <label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"

'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}{boxLabel}',
'</tpl>',

'<tpl if="boxLabel== undefined">',

'<label id="sliderLabel" for="{id}">',

'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="checked">checked</tpl>', // added
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',

'</tpl>',

{
disableFormats: true,
compiled: true
}

],

getSubTplData: function() {
var me = this;
return Ext.apply(me.callParent(), {
disabled : me.readOnly || me.disabled,
boxLabel : me.boxLabel,
boxLabelCls : me.boxLabelCls,
boxLabelAlign : me.boxLabelAlign,
inputTypeAttr : me.inputTypeAttr,
checked : me.checked
});
},

setValue: function (value) {
var me = this;

me.callParent(arguments);

if (me.rendered) {
if (value) {
me.inputEl.set({
checked: true
});
} else {
me.inputEl.dom.removeAttribute("checked");
}
} else {
me.checked = value;
}
}
});

pawangyanwali
Jun 27, 2013, 5:41 AM
Thank You so much for your solution. Please close this thread.