PDA

View Full Version : [CLOSED] InvalidateScrollerOnRefresh is not working if we use a CommandColumn in the grid



UnifyEducation
Mar 16, 2015, 8:22 AM
Hi Guys,

I come back to you again for the same problem of gridpanel auto scroll jumping: http://forums.ext.net/showthread.php?27137-CLOSED-MVC-GridPanel-autoscroll-up-after-editing

When I add a CommandColumn to the gridpanel , InvalidateScrollerOnRefresh stop working and the gridpanel auto scroll jump up again.
Can you please help me with this problem?

Thanks in advance,




@model dynamic

@{
Layout = null;
}

@Html.X().ResourceManager()

@(Html.X().Window().Height(200).Width(500).Layout( LayoutType.Fit)
.Items(Html.X().GridPanel().AutoScroll(true).Inval idateScrollerOnRefresh(false)
.Store(Html.X().Store().AutoSync(true)
.Proxy(Html.X().AjaxProxy()
.Reader(Html.X().JsonReader().Root("data"))
.Writer(
w =>
w.Add(Html.X().JsonWriter().Root("data").Encode(true)))
.API(api =>
{
api.Read = Url.Action("Read");
api.Update = Url.Action("Update");
}))
.Model(Html.X().Model()
.Fields(f =>
{
f.Add(Html.X().ModelField().Name("Id"));
f.Add(Html.X().ModelField().Name("Email"));
f.Add(Html.X().ModelField().Name("First"));
f.Add(Html.X().ModelField().Name("Last"));
}))
)

.ColumnModel(
Html.X().Column().DataIndex("Id")
.Width(40),

Html.X().Column().DataIndex("Email")
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false).StandardVty pe(ValidationType.Email)
),

Html.X().Column().DataIndex("First")
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false)
),

Html.X().Column().DataIndex("Last")
.Flex(1)
.Editor(
Html.X().TextField().AllowBlank(false)
),
Html.X().CommandColumn().Flex(1)
.Commands(X.GridCommand().Text("Delete")
.Icon(Icon.Delete).CommandName("delete"))
)
.Plugins(
Html.X().CellEditing().ClicksToEdit(1)
)

))





public ActionResult Index()
{
return View();
}

public StoreResult Read()
{
var data = new List<object>
{
new {Id = 1, Email = "fred@flintstone.com", First = "Fred", Last = "Flintstone"},
new {Id = 2, Email = "wilma@flintstone.com", First = "Wilma", Last = "Flintstone"},
new {Id = 3, Email = "pebbles@flintstone.com", First = "Pebbles", Last = "Flintstone"},
new {Id = 4, Email = "barney@rubble.com", First = "Barney", Last = "Rubble"},
new {Id = 5, Email = "betty@rubble.com", First = "Betty", Last = "Rubble"},
new {Id = 6, Email = "bambam@rubble.com", First = "BamBam", Last = "Rubble"},
new {Id = 7, Email = "fred@flintstone.com", First = "Fred", Last = "Flintstone"},
new {Id = 8, Email = "wilma@flintstone.com", First = "Wilma", Last = "Flintstone"},
new {Id = 9, Email = "pebbles@flintstone.com", First = "Pebbles", Last = "Flintstone"},
new {Id = 10, Email = "barney@rubble.com", First = "Barney", Last = "Rubble"},
new {Id = 11, Email = "betty@rubble.com", First = "Betty", Last = "Rubble"},
new {Id = 12, Email = "bambam@rubble.com", First = "BamBam", Last = "Rubble"}
};
return this.Store(data);
}

public ActionResult Update()
{
return new EmptyResult();
}

Daniil
Mar 16, 2015, 2:43 PM
Hi @UnifyEducation,


I come back to you again for the same problem of gridpanel auto scroll jumping.

The link to the related discussion might help a lot to find a solution for this problem.

UnifyEducation
Mar 16, 2015, 3:14 PM
Hi Daniil,

You can find the related discussion in the following link: http://forums.ext.net/showthread.php?27137-CLOSED-MVC-GridPanel-autoscroll-up-after-editing

Daniil
Mar 17, 2015, 1:24 PM
Thank you.

I've reproduced. I tried to get it working with a CommandColumn without success. There are some technical reasons of that behavior.

Personally, I would highly recommend to switch to ImageCommandColumn instead of CommandColumn. It is much more lightweight (i.e. better performance) and behaves better in such scenarios.

Html.X().ImageCommandColumn()
.Flex(1)
.Commands(X.ImageCommand()
.Text("Delete")
.Icon(Icon.Delete)
.CommandName("delete")
)
)

UnifyEducation
Mar 18, 2015, 9:15 AM
Thanks Daniil, i did it as you told me and it works.