PDA

View Full Version : [OPEN] [#774] Component Column Editor add row not working properly



matrixwebtech
Dec 21, 2014, 5:03 PM
Hi I do bellow code for add row to grid panel on button click.after click button rows added but TAB key to navigate one cell to another not working properly.add 2-3 rows by click on button.and goto 1st cell of first row and start pressing TAB KEY .please run sample code and assist me how I solve this.


@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
var addPlant = function () {

var r = Ext.create('pr', {
}),
grid = App.GridPanel;
grid.store.insert(0, r);
// grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};
</script>
</head>
<body>
<div>
@Html.X().ResourceManager()
@(Html.X().GridPanel()
.Title("ComponentColumn Editor")
.ID("GridPanel")
.TopBarItem(Html.X().Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add))
.Width(600)
.Height(300)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Name("pr")
.Fields(
new ModelField("IntField", ModelFieldType.Int),
new ModelField("ComboField", ModelFieldType.Int),
new ModelField("TextField", ModelFieldType.String),
new ModelField("DateField", ModelFieldType.Date)
)
)

)
.ColumnModel(
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("IntField")
.Flex(1)
.Text("Integer")
.Component(Html.X().NumberField()),

Html.X().ComponentColumn()
.Editor(true)
.DataIndex("ComboField")
.Flex(1)
.Text("ComboBox")
.Component(Html.X().ComboBox()
.Items(
new ListItem("Item 1", 1),
new ListItem("Item 2", 2)

)
),

Html.X().ComponentColumn()
.Editor(true)
.DataIndex("TextField")
.Flex(1)
.Text("Text")
.Component(Html.X().TextField()),

Html.X().ComponentColumn()
.Editor(true)
.DataIndex("DateField")
.Flex(1)
.Text("Date")
.Component(Html.X().DateField())
)
)

</div>
</body>
</html>

Daniil
Dec 22, 2014, 12:53 PM
Hi @matrixwebtech,

Hmm, very weird behavior. For now I can suggest you this as a workaround.



...
grid.store.insert(0, r);
grid.getView().refresh(); // workaround

matrixwebtech
Dec 22, 2014, 2:18 PM
Hi daniil,thank for reply ,your workaround is working,but I think for the refresh function after adding each row a the gridpanel jerk,which is not looks good.is there any other way?

Update


I use a component column in this gridpanel,please run bellow sample,


@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
var addPlant = function () {

var r = Ext.create('pr', {
}),
grid = App.GridPanel;
grid.store.insert(0, r);
grid.getView().refresh();
// grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};

Ext.util.Format.setValueWithTowDecimal = function (v) {

v = String(v).replace(/[^0-9.\-]/g, "");
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);

var ps = v.split('.'),
whole = ps[0],
sub = ps[1] ? '.' + ps[1] : '.00',
r = /(\d+)(\d{3})/;

//while (r.test(whole)) {

// whole = whole.replace(r, '$1' + ',' + '$2');
//}

return whole + sub;
};

</script>
</head>
<body>
<div>
@Html.X().ResourceManager()
@(Html.X().GridPanel()
.Title("ComponentColumn Editor")
.ID("GridPanel")
.TopBarItem(Html.X().Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add))
.Width(600)
.Height(300)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Name("pr")
.Fields(
new ModelField("IntField", ModelFieldType.Int),
new ModelField("ComboField", ModelFieldType.Int),
new ModelField("TextField", ModelFieldType.String)

)
)

)
.ColumnModel(
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("IntField")
.Flex(1)
.Text("Integer")
.Component(
Html.X().TextField()
.ID("txtLowerRange")
.AllowBlank(true)

.MaskRe(@"/[0-9\$\.]/")
.FieldStyle("text-align:Right")
.SelectOnFocus(true)
.Listeners(l =>
{

l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDe cimal(this.getValue()))";
})

),

Html.X().ComponentColumn()
.Editor(true)
.DataIndex("ComboField")
.Flex(1)
.Text("ComboField")
.Component(
Html.X().TextField()
.ID("txtupperRange")
.AllowBlank(true)

.MaskRe(@"/[0-9\$\.]/")
.FieldStyle("text-align:Right")
.SelectOnFocus(true)
.Listeners(l =>
{

l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDe cimal(this.getValue()))";
})
),

Html.X().ComponentColumn()
.Editor(true)
.DataIndex("TextField")
.Flex(1)
.Text("TextField")
.Component(
Html.X().TextField()
.ID("txtAmount")
.AllowBlank(true)
.MaskRe(@"/[0-9\$\.]/")
.FieldStyle("text-align:Right")
.SelectOnFocus(true)
.Listeners(l =>
{

l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDe cimal(this.getValue()))";

}))
)
)

</div>
</body>
</html>


Steps to reproduce
1.Add a row and fill text box .
2 click add again to add 2nd row.

suppose you put 2 in each cell in first row and its turned in to 2.00 after adding second row all previous formatting gone.

Daniil
Dec 23, 2014, 5:02 PM
your workaround is working,but I think for the refresh function after adding each row a the gridpanel jerk,which is not looks good.is there any other way?

I agree, it is not a nice solution. Though, at the moment I cannot find a better one. Though, I am still struggling with that.


suppose you put 2 in each cell in first row and its turned in to 2.00 after adding second row all previous formatting gone.

Well, it is lost, because the entire row is recreated/rerendered and, respectively, all the ComponentColumns' Components are recreated as well.

I could suggest to try this listener for the TextFields:

l.AfterRender.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDe cimal(this.getValue()))";
l.AfterRender.Delay = 1;

matrixwebtech
Dec 23, 2014, 5:38 PM
I am still struggling with that.
Thanks for your effort.



l.AfterRender.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDe cimal(this.getValue()))";
l.AfterRender.Delay = 1;
for now this is working.please let me know after find a better solution.

matrixwebtech
Jan 07, 2015, 6:58 PM
Hi,Danill are you find any suitable solution for this problem?

Daniil
Jan 08, 2015, 12:05 PM
Unfortunately, no. So far I am unable to find a better solution. I will be trying again.

Created an Issue:
https://github.com/extnet/Ext.NET/issues/774