PDA

View Full Version : [CLOSED] Nested Grid



PriceRightHTML5team
Apr 07, 2014, 12:55 PM
Hi,
I am using Asp.net Mvc

http://mvc.ext.net/#/GridPanel_RowExpander/Dynamic_View/

I have tried same example from this link. It works fine when I set height to GridPanel.

Scenarios when issue comes :
a) Remove height from Outer GridPanel
b) Expand inner GridPanel with no data
c) Collapse inner grid
All records disappears from Outer GridPanel
Attaching images with scenarios sequence.

9521

9531

9541


I don't want to set Height to gridPanel.

Outer Grid (partial view)

<script>
var girdLayout = function () {
Ext.getCmp('ActivePackGridView').doLayout();
doLayoutCreateWindows('PanelActivePack');
};
</script>

Html.X().Panel().ID("PanelActivePack").Title(Master.ActivePackTitle).Collapsible(true). Collapsed(false).AutoShow(true).StyleSpec("margin-top:7px")
.Items(
Html.X().FormPanel()
.Border(true)
.Padding(0)
.BodyStyle("border-width:0px 0px 1px 0px !important")
.BottomBarItem(
Html.X().Button()
.Scale(ButtonScale.Small)
.Icon(Icon.Add)
.Type(ButtonType.Button)
.Text(Master.AddPack)
.ID("btnAddPack")
.Listeners(ls => ls.Click.Fn = "AddNewPack")
.StyleSpec("margin-right:5px")
)// End FormPanel
,
Html.X().GridPanel().ID("ActivePackGridView")
.Border(false)
.ColumnLines(true)
.Store(Html.X().Store().ID("StoreActivePack")
.AutoLoad(false)
.PageSize(Convert.ToInt32(PriceRight.Settings.Prop ertyReader.GetProperty("GRID_PAGE_SIZE")))
.RemoteSort(true)
.Model(Html.X().Model()
.Fields(
new ModelField("PACK_CD", ModelFieldType.String)
, new ModelField("PACK_OBJECT_CD", ModelFieldType.String)
, new ModelField("PACK_DESC", ModelFieldType.String)
, new ModelField("PRESENTATION_DESC", ModelFieldType.String)

)
)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetAllActivePackByProductGroup"))
.ActionMethods(actions =>
{
actions.Read = HttpMethod.POST;
})
.Reader(Html.X().JsonReader().Root("data"))
.Listeners(l => l.Exception.Handler = "Error()")
)
.Parameters(ps => { ps.Add(new StoreParameter("productGroupId", "App.comboProductGroup.getValue()", ParameterMode.Raw)); })
)
.ColumnModel(
Html.X().Column().Text(Master.PackDesc).DataIndex("PACK_DESC").Flex(3),
Html.X().Column().Text(Master.PresentationDesc).Da taIndex("PRESENTATION_DESC").Flex(3),
Html.X().CommandColumn().Text(Master.ToolbarCmds)
.Align(Alignment.Left)
.Width(150)
.Commands(
Html.X().GridCommand()
.Icon(Icon.NoteEdit)
.CommandName("Edit")
.ToolTip(t => t.Title = "Edit"),
Html.X().CommandSeparator(),

Html.X().GridCommand()
.Icon(Icon.Delete)
.CommandName("Delete")
.ToolTip(t => t.Title = "Delete"),

Html.X().CommandSeparator(),
Html.X().GridCommand()
.Icon(Icon.Disconnect)
.CommandName("Discontinue")
.ToolTip(t => t.Title = "Discontinue"),

Html.X().CommandSeparator(),
Html.X().GridCommand()
.Icon(Icon.Add)
.CommandName("Add")
.ToolTip(t => t.Title = "Add Country")
)
.Listeners(ls => ls.Command.Fn = "EditPack"),
Html.X().Column().Width(0)
)
.BottomBar(Html.X().PagingToolbar()
.ID("ActivePageBarFU")
.HideRefresh(true)
.FirstText(PR.Resources.Common.Common.PagingFirst)
.PrevText(PR.Resources.Common.Common.PagingPreviou s)
.NextText(PR.Resources.Common.Common.PagingNext)
.LastText(PR.Resources.Common.Common.PagingLast)
.DisplayMsg(PR.Resources.Common.Common.PagingDispl ayMsg)
.AfterPageText(PR.Resources.Common.Common.PaggingA fterPageText)
.BeforePageText(PR.Resources.Common.Common.Pagging BeforePageText)
.EmptyMsg(PR.Resources.Common.Common.PaggingEmptyM sg)
)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("GetPackCountry"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(new { packDesc = JRawValue.From("this.record.data['PACK_DESC']"), ifs = JRawValue.From("this.record.data['PACK_DESC']") })
)
.Listeners(events =>
{
events.Expand.Handler = "girdLayout();";
events.Collapse.Handler = "girdLayout();";
})
)
)//End Items PanelActive

Inner grid (PartialView)



@(Html.X().GridPanel()
.Border(true)
.MaxHeight(280)
.Listeners(li=>li.AfterRender.Handler="doLayoutCreateWindow();")
.EmptyText("No data found")
.Store(Html.X().Store()
.Listeners(li=>li.Load.Handler="girdLayout();")
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
new ModelField("PACK_CD", ModelFieldType.String)
, new ModelField("COUNTRY_DESC", ModelFieldType.String)
, new ModelField("MARKETING_STATUS_DESC", ModelFieldType.String)
, new ModelField("INDICATION_DESC", ModelFieldType.String)
, new ModelField("MARKETING_AUTHORITY_DESC", ModelFieldType.String)
, new ModelField("COMBINATION_MOLECULE", ModelFieldType.String)
, new ModelField("COMPANY_DESC", ModelFieldType.String)

)
)
)
.ColumnModel(
Html.X().Column().Text("Country").DataIndex("COUNTRY_DESC"),
Html.X().Column().Text("Marketing Status").DataIndex("MARKETING_STATUS_DESC"),
Html.X().Column().Text("Indication").DataIndex("INDICATION_DESC"),
Html.X().Column().Text("MARKETING AUTHORITY").DataIndex("MARKETING_AUTHORITY_DESC"),
Html.X().Column().Text("COMBINATION MOLECULE").DataIndex("COMBINATION_MOLECULE"),
Html.X().Column().Text("Company").DataIndex("COMPANY_DESC").Flex(2),
Html.X().CommandColumn().Text(Master.ToolbarCmds)
.Align(Alignment.Left)
.Width(150)
.Commands(
Html.X().GridCommand()
.Icon(Icon.NoteEdit)
.CommandName("Edit")
.Text(Master.Edit),
Html.X().CommandSeparator(),
Html.X().GridCommand()
.Icon(Icon.Delete)
.CommandName("Delete")
.Text(Master.Delete)
)
.Listeners(ls => ls.Command.Fn = "EditPack"),
Html.X().Column().Width(0)
)
)

All code written by me works fine if there is data in inner Gird . Needs to work when there is no data in Inner grid

Daniil
Apr 07, 2014, 5:41 PM
Hi @PriceRightHTML5team,

I cannot reproduce it with this example applying the changes that you described.
http://mvc.ext.net/#/GridPanel_RowExpander/Dynamic_View/

Please provide a full example to copy, paste and run without any changes.

PriceRightHTML5team
Apr 08, 2014, 10:16 AM
Issue resolved.

While doing trail and error I removed EmptyText("No data found ") function of inner grid and it worked.

I don't know what difference adding empty text function makes.

If i wants to use this function then how can i use it.

Daniil
Apr 08, 2014, 5:24 PM
If i wants to use this function then how can i use it.

This is still actual:

Please provide a full example to copy, paste and run without any changes.

PriceRightHTML5team
Apr 09, 2014, 6:01 AM
Sending code with Dummy data

Controller And Class



public class Dynamic_ViewController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult GetAllActivePackByProductGroup(StoreRequestParamet ers parameters, int productGroupId)
{
List<PackDTO> packs = new List<PackDTO>();

if (productGroupId == 1)
{
packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 1,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 29741",
PRESENTATION_DESC = "DEPAS CAPSULES 1 MG"
});
packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 2,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 29742",
PRESENTATION_DESC = "DEPAS CAPSULES 0.5 MG"
});

packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 3,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 29743",
PRESENTATION_DESC = "DEPAS CAPSULES 0.5 MG"
});
}
else
{
packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 4,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 29744",
PRESENTATION_DESC = "DEPAS CAPSULES 0.5 MG"
});
packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 5,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 29745",
PRESENTATION_DESC = "DEPAS CAPSULES 0.5 MG"
});
packs.Add(new PackDTO()
{
PACK_OBJECT_CD = 6,
PACK_DESC = "DEPAS CAPSULES 1 PACK 30 CAPS 0.5 MG 297416",
PRESENTATION_DESC = "DEPAS CAPSULES 0.5 MG"
});
}

// return this.Store(new Paging<PackDTO>().Page(packs, parameters, packs.Count));
return this.Store(packs);

}
public ActionResult GetGrid(string id)
{
List<PackCountryDTO> packCountries = new List<PackCountryDTO>();

if (id == "1")
{
packCountries.Add(new PackCountryDTO()
{
PACK_CD = 1,
COUNTRY_DESC = "Argentina",
MARKETING_STATUS_DESC = "YES"
});
packCountries.Add(new PackCountryDTO()
{
PACK_CD = 2,
COUNTRY_DESC = "Colombia",
MARKETING_STATUS_DESC = "NO"
});
}
else if (id == "2")
{
packCountries.Add(new PackCountryDTO()
{
PACK_CD = 3,
COUNTRY_DESC = "Colombia3",
MARKETING_STATUS_DESC = "NO"
});
packCountries.Add(new PackCountryDTO()
{
PACK_CD = 4,
COUNTRY_DESC = "Colombia",
MARKETING_STATUS_DESC = "NO"
});
packCountries.Add(new PackCountryDTO()
{
PACK_CD = 5
});
}
return this.ComponentConfig("InnerGrid", packCountries);
}

public ActionResult GetAllActiveProductGroup()
{
List<ProductGroupDTO> productGroups = new List<ProductGroupDTO>();
productGroups.Add(new ProductGroupDTO() { PRODUCT_GROUP_CD = 1, PRODUCT_GROUP_DESC = "ProductGroup 1" });
productGroups.Add(new ProductGroupDTO(){PRODUCT_GROUP_CD = 2,PRODUCT_GROUP_DESC = "ProductGroup 2"});
return this.Store(productGroups);
}


}

public class PackDTO
{
public int PACK_CD
{
get;
set;
}
public int PACK_OBJECT_CD
{
get;
set;
}
public string PACK_DESC
{ get; set; }

public string PRESENTATION_DESC
{
get;
set;
}
}
public class PackCountryDTO : PackDTO
{
public string COUNTRY_DESC { get; set; }
public string MARKETING_STATUS_DESC { get; set; }
}
public class ProductGroupDTO
{
public int PRODUCT_GROUP_CD { get; set; }
public string PRODUCT_GROUP_DESC { get; set; }
}

OuterGrid




@{
ViewBag.Title = "Dynamic View";

}
@Html.X().ResourceManager()


<h1>Row Expander Plugin with View</h1>

@(
Html.X().Panel().ID("PanelPackManagement").Title("New PAck").BodyPadding(5)
.Items(
Html.X().Container().Items(
Html.X().Container().Cls("six columns").Items(Html.X().ComboBox().ID("comboProductGroup")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.DisplayField("PRODUCT_GROUP_DESC")
.ValueField("PRODUCT_GROUP_CD")
.FieldLabel("Product Group")
.EmptyText("-- Select --")
.LabelWidth(100)
.ValueNotFoundText("Loading...")
.Store(Html.X().Store()
.AutoLoad(true)
.Model(Html.X().Model()
.Fields(
new ModelField("PRODUCT_GROUP_CD", ModelFieldType.String) { Mapping = "PRODUCT_GROUP_CD" },
new ModelField("PRODUCT_GROUP_DESC", ModelFieldType.String) { Mapping = "PRODUCT_GROUP_DESC" }
)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetAllActiveProductGroup", "Dynamic_View"))
.Reader(Html.X().JsonReader().Root("data"))
)
)
.Listeners(li => li.Select.Handler = "App.ActivePackGridView.getStore().load();")
)),
Html.X().Panel().ID("PanelActivePack").Title("Pack").Collapsible(true).Collapsed(false).AutoShow(true ).StyleSpec("margin-top:7px")
.Items(
Html.X().GridPanel().ID("ActivePackGridView")
.Title("Expander Rows with GridPanel")
.Icon(Icon.Table)
//.Width(600)
//.Height(450)

.Store(Html.X().Store()
.RemoteSort(true)
.Model(Html.X().Model()
.Fields(
new ModelField("PACK_OBJECT_CD", ModelFieldType.String)
, new ModelField("PACK_DESC", ModelFieldType.String)
, new ModelField("PRESENTATION_DESC", ModelFieldType.String)
)
)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetAllActivePackByProductGroup"))
.ActionMethods(actions =>
{
actions.Read = HttpMethod.POST;
})
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(ps => { ps.Add(new StoreParameter("productGroupId", "App.comboProductGroup.getValue()", ParameterMode.Raw)); })
)
.ColumnModel(
Html.X().Column().Text("PACK_DESC").DataIndex("PACK_DESC").Flex(3),
Html.X().Column().Text("PRESENTATION_DESC").DataIndex("PRESENTATION_DESC").Flex(3)
)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("GetGrid"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(new { id = JRawValue.From("this.record.data['PACK_OBJECT_CD']") })
)
)
)
)
)



InnerGrid



@model System.Collections.IEnumerable
@(
Html.X().GridPanel()
.MaxHeight(280)
.MinHeight(80)
.EmptyText("No data found")
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
new ModelField("PACK_CD", ModelFieldType.String)
, new ModelField("COUNTRY_DESC", ModelFieldType.String)
, new ModelField("MARKETING_STATUS_DESC", ModelFieldType.String)
)
)
)
.ColumnModel(
Html.X().Column().Text("COUNTRY_DESC").DataIndex("COUNTRY_DESC"),
Html.X().Column().Text("Marketing Status").DataIndex("MARKETING_STATUS_DESC")

)
)

Daniil
Apr 09, 2014, 5:50 PM
Thank you for the sample.

We can suggest the following workaround.

Please set up

.CustomConfig(cc => cc.Add(new { EmptyCls = "x-grid-inner-empty" }))
for the inner GridPanel.

The CSS rule is:

<style>
.x-grid-inner-empty {
background-color: #FFFFFF;
color: #808080;
font: 11px tahoma,arial,verdana,sans-serif;
padding: 10px;
}

.x-theme-access .x-grid-inner-empty {
background-color: #232D38;
}

.x-theme-neptune .x-grid-inner-empty {
font: 13px helvetica,arial,verdana,sans-serif;
}
</style>