PDA

View Full Version : [CLOSED] problem layout grid panel group after edit cell



marco.morreale
May 22, 2014, 8:01 AM
Good morning
I have a problem with grid panel group.
when I edit a cell, I lose the layout of the grouping as in the attached image.
how can I solve my problem?

This is an example of my code.


@using Ext.Net;
@using Ext.Net.MVC;

@model List<It.Alterna.EBilling.Models.VRIGHE_PDO_GIORNIModel>


@{
ViewBag.Title = "Elior - EBilling - PDOs ";
Layout = "~/Views/Shared/_Layout.cshtml";
var X = Html.X();
}

@section headtag
{
<script>
var prepareGroupToolbar = function (grid, toolbar, groupId, records) {
// you can prepare ready toolbar
};

var onGroupCommand = function (column, command, group) {
if (command === 'SelectGroup') {
column.grid.getSelectionModel().select(group.child ren, true);
return;
}

Ext.Msg.alert(command, 'Group name: ' + group.name + '<br/>Count - ' + group.children.length);
};

var getAdditionalData = function (data, idx, record, orig) {
return {
rowBodyColspan: record.fields.getCount(),
rowBody: Ext.String.format('<div style=\'padding:0 5px 5px 5px;\'>The {0} [{1}] requires light conditions of <i>{2}</i>.<br /><b>Price: {3}</b></div>', data.Common, data.Botanical, data.Light, Ext.util.Format.usMoney(data.Price))
};
};

var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:

grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/

// Call DirectMethod
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
Ext.net.DirectMethod.request({
url: '@(Url.Action("Update"))',
params: {
pk : e.record.data.pk,
totale : e.record.data.TOTALE,
cod_pdo: e.record.data.COD_PDO,
art: e.record.data.ART,
field: e.field,
oldValue: e.originalValue,
newValue: e.value,
customer: e.record.data
}
});
}
};
</script>
}

@section container
{
@(Html.X().GridPanel()
.ID("gridPDO")
//.Frame(true)
.Collapsible(true)
.ForceFit(true)
.TopBar(Html.X().Toolbar()
.Items(Html.X().LinkButton()
.Text(ViewBag.Mese)
.CtCls("topbarMonth")
)
)
.Store(Html.X().Store()
//.ShowWarningOnFailure(false)
.ID("storePdos")
.DataSource(Model)
//.AutoSync(true)

.GroupField("COD_PDO")
.Model(Html.X().Model()
.IDProperty("pk")
.Fields(
new ModelField("pk"),
new ModelField("COD_PDO"),
new ModelField("ART"),
new ModelField("PREZZO"),
new ModelField("C1", ModelFieldType.Int),
new ModelField("C1", ModelFieldType.Int),
new ModelField("C2", ModelFieldType.Int),
new ModelField("C3", ModelFieldType.Int),
new ModelField("C4", ModelFieldType.Int),
new ModelField("C5", ModelFieldType.Int),
new ModelField("C6", ModelFieldType.Int),
new ModelField("C7", ModelFieldType.Int)
)
)

)
.ColumnModel(
Html.X().Column()
.Text("ART")
.DataIndex("ART")
.Flex(1),
Html.X().Column()
.Text("PREZZO ?")
.DataIndex("PREZZO")
.Flex(1)
.Align(Alignment.Right)
.Renderer(RendererFormat.EuroMoney)
,
Html.X().Column()
.Text("1")
.DataIndex("C1")
.Flex(1)
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
,
Html.X().Column()
.Text("2")
.DataIndex("C2")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("3")
.DataIndex("C3")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("4")
.DataIndex("C4")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("5")
.DataIndex("C5")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("6")
.DataIndex("C6")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("7")
.DataIndex("C7")
.Flex(1)
.Align(Alignment.Right)
.Editor(Html.X().NumberField().Step(1).MinValue(0) .AllowBlank(true))

Html.X().CommandColumn()
.Hidden(true)

.GroupCommands(

Html.X().CommandFill(),

Html.X().GridCommand()
.CommandName("TRASMETTIPDO")

.Text("TRASMETTI PDO")
.StandOut(true)

)

.Listeners(ls =>
ls.GroupCommand.Fn = "onGroupCommand"
)
)
.Features(
Html.X().Grouping()
.HideGroupedHeader(false),
Html.X().RowWrap()
)


.Plugins(
Html.X().CellEditing().Listeners(ls => ls.Edit.Fn = "edit")
)
)
}


Thank you

M.

Daniil
May 22, 2014, 10:33 AM
Hi @marco.morreale,

Is the issue reproducible if remove a RowBody feature?

Html.X().RowWrap()

marco.morreale
May 22, 2014, 11:37 AM
Hi Daniil,
unfortunately your solution don't work.

Can you give me another help?

When i change value a cell, I lose a grouped header.

Thanks.

M.

Daniil
May 22, 2014, 2:15 PM
Ok, I need to reproduce it and investigate in details

Please prepare a runnable test case which we can copy, past and run without any changes. Thank you.

marco.morreale
May 23, 2014, 11:57 AM
If you try to change a value of cell (for example change first cell from 100 to 120), you will see the problem.


This is Controller




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Commands.Grou p_Command.Controllers
{
public class Group_CommandController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult GetPlants()
{
return this.Store(datiModel.TestData);
}

public DirectResult Update(string cod_pdo, string field, string oldValue, string newValue, object customer)
{
try
{


//update


}
catch (Exception e)
{
return new DirectResult
{
ErrorMessage = e.Message,
};
}
return this.Direct();
}


}
}


this is model



using System;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Globalization;
using System.Xml;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Commands.Grou p_Command
{
public class datiModel
{
public datiModel(string cod_pdo, int? c1, int? c2,int? c3,int? c4)
{
this.COD_PDO = cod_pdo;
this.C1 = c1;
this.C2 = c2;
this.C3 = c3;
this.C4 = c4;

}

public datiModel()
{
}

public string COD_PDO { get; set; }

public int? C1 { get; set; }

public int? C2 { get; set; }

public int? C3 { get; set; }

public int? C4 { get; set; }


public static List<datiModel> TestData
{
get
{
List<datiModel> data = new List<datiModel>();

datiModel model = new datiModel();

model.C1 = 100;
model.C2 = 35;
model.C3 = 45;
model.C4 = 60;
model.COD_PDO = "XXX";


data.Add(model);

model = new datiModel();

model.C1 = 120;
model.C2 = 40;
model.C3 = 70;
model.C4 = 55;
model.COD_PDO = "YYY";

data.Add(model);
//}

return data;
}
}
}
}



this is view




@{
ViewBag.Title = "Group Commands - Ext.NET MVC Examples";
}

@Html.X().ResourceManager()
<script>
var prepareGroupToolbar = function (grid, toolbar, groupId, records) {
// you can prepare ready toolbar
};

var onGroupCommand = function (column, command, group) {
if (command === 'SelectGroup') {
column.grid.getSelectionModel().select(group.child ren, true);
return;
}

Ext.Msg.alert(command, 'Group name: ' + group.name + '<br/>Count - ' + group.children.length);
};

var edit = function (editor, e) {

// Call DirectMethod
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
Ext.net.DirectMethod.request({
url: '@(Url.Action("Update"))',
params: {
cod_pdo: e.record.data.COD_PDO,
field: e.field,
oldValue: e.originalValue,
newValue: e.value,
customer: e.record.data
}
});
}


};

</script>



@(Html.X().GridPanel()
.Title("Plants")
.Width(600)
.Height(350)
.Frame(true)
.Collapsible(true)
.ForceFit(true)
.Store(Html.X().Store()
.GroupField("COD_PDO")
.Model(Html.X().Model()
.Fields(
new ModelField("COD_PDO", ModelFieldType.String),
new ModelField("C1", ModelFieldType.Int),
new ModelField("C2", ModelFieldType.Int),
new ModelField("C3", ModelFieldType.Int),
new ModelField("C4", ModelFieldType.Int)

)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetPlants"))
.ActionMethods(ams =>
ams.Read = HttpMethod.POST
)
.Reader(Html.X().JsonReader().Root("data"))
)

)
.ColumnModel(
Html.X().SummaryColumn()
.Text("1")
.DataIndex("C1")
.Flex(1)
.Align(Alignment.Right)
.Editor(Html.X().NumberField().HideTrigger(true).M inValue(0).AllowBlank(true))
.SummaryType(SummaryType.Sum)
.SummaryRenderer(new Renderer() { Fn = "Ext.util.Format.numberRenderer('0.000/i')" })
,
Html.X().Column()
.Text("2")
.DataIndex("C2")
.Align(Alignment.Right)
.Editor(Html.X().NumberField().HideTrigger(true).M inValue(0).AllowBlank(true))
.SummaryType(SummaryType.Sum)
.SummaryRenderer(new Renderer() { Fn = "Ext.util.Format.numberRenderer('0.000/i')" })

.Flex(1),
Html.X().Column()
.Text("3")
.DataIndex("C3")
.Align(Alignment.Right)
.SummaryType(SummaryType.Sum)
.SummaryRenderer(new Renderer() { Fn = "Ext.util.Format.numberRenderer('0.000/i')" })

.Editor(Html.X().NumberField().HideTrigger(true).M inValue(0).AllowBlank(true))
.Flex(1),
Html.X().Column()
.Text("4")
.DataIndex("C4")
.Align(Alignment.Right)
.SummaryType(SummaryType.Sum)
.SummaryRenderer(new Renderer() { Fn = "Ext.util.Format.numberRenderer('0.000/i')" })

.Editor(Html.X().NumberField().HideTrigger(true).M inValue(0).AllowBlank(true))
.Flex(1),

Html.X().CommandColumn()
.Hidden(true)
.GroupCommands(

Html.X().CommandFill(),

Html.X().GridCommand()
.Text("SEND")

)
.Listeners(ls =>
ls.GroupCommand.Fn = "onGroupCommand"
)
)
.Features(
Html.X().Grouping()
.HideGroupedHeader(true)


)
.Plugins(Html.X().CellEditing().Listeners(ls => ls.Edit.Fn = "edit"))
)



Thank you
M.

Daniil
May 23, 2014, 2:23 PM
I can suggest the following solution.

var edit = function (editor, e) {
e.grid.getView().refresh();
/* the rest code */
};