PDA

View Full Version : [CLOSED] Component Column - Combobox shows value first and then corresponding text



PriceRightHTML5team
Apr 08, 2014, 12:51 PM
Hi,
Mine is a Asp.Net MVC razor view application.

I have an gridpanel which has component column showing combobox in it.
similar to the example over here http://mvc.ext.net/#/GridPanel_ComponentColumn/Editor/

Gridpanel data is loaded through Ajax proxy and Component column combobox data is loaded through model.

The issue is - on page load in comboboxes first value is shown and then corresponding text. I found same happening in the ext.net example mentioned above.

Is there any way by which on page load directly text is shown in comboboxes instead of value and then text.
Or
How to apply a load mask such that it is remove after text is set in all comboboxes.

Daniil
Apr 08, 2014, 6:09 PM
Hi @PriceRightHTML5team,

Please try to set up the following BeforeRefresh listener for a GridPanel's View

this.panel.hide();
and put this override on the page:

Ext.grid.column.ComponentColumn.override({
insertComponents : function () {
var records = this.view.getViewRange(),
i,
len = (records && records.length) || 0;

for (i = 0; i < len; i++) {
this.insertComponentForRecord(records[i], null, i === (len - 1));
}

this.view.panel.show();
}
});

PriceRightHTML5team
Apr 09, 2014, 6:52 AM
Hi Daniil,
I made your mentioned changes. But no change in output.

Following is my view.



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

<script>

Ext.grid.column.ComponentColumn.override({
insertComponents: function () {
var records = this.view.getViewRange(),
i,
len = (records && records.length) || 0;

for (i = 0; i < len; i++) {
this.insertComponentForRecord(records[i], null, i === (len - 1));
}

this.view.panel.show();
}
});

function ifFnExistsCallIt(fnName) {
fn = window[fnName];
fnExists = typeof fn === 'function';
if (fnExists)
fn(true);
};


@*Global arrays to persist remote custom filter info for multiple columns*@
var functionNames = [];
var paraList = [];
var colNames = [];
var colDataTypes = [];
var objFilters = [];

@*This function is called on click of Filter button in custom filter panel.*@
var remoteFilter = function () {
ApplyFilter();
App.hdnFilters.setValue(JSON.stringify(objFilters) );
var store = Ext.getStore('grdStorePackPriceAttributes');
store.load();
};

var colDataIndex;

var filterImageArray = [];

@*This function is called on click of Filter icon of grid column*@
function ShowGridFilter(columnFilterImageRef) {
var offset = $(columnFilterImageRef).offset();
$('#filterPopup').removeAttr("style");

var filterPopupWidth = parseInt($('#filterPopup').css('width'));
if ($(window).width() > (offset.left + filterPopupWidth)) { $('#filterPopup').css('left', offset.left - 5); }
else { $('#filterPopup').css('left', offset.left - filterPopupWidth); }

$('#filterPopup').css('top', (offset.top) + 12);
$('#filterPopup').css('left', (offset.left) + 6);
@* $('#filterPopup').show();*@
var columnID = columnFilterImageRef.parentNode.id;
$(columnFilterImageRef).attr('id', columnID + '_filterImageID');
filterImageArray.push(columnID + '_filterImageID');
var mainGridRef = App.grdPackPriceAttributes.id;
var filterImageID = columnFilterImageRef.id;

var link = '@(Url.Action("CustomGridFilter", "ExtNet"))';

var objFilters = Ext.getCmp('hdnFilters').getValue();

var filterPPAExtraParam = {
"objFilters": objFilters
};


var paraObj = {
columnID: columnID,
mainGridRef: mainGridRef,
filterImageID: filterImageID,
filterImageArray: filterImageArray.join(),
actionName: 'GetDistinctRecords',
controllerName: 'PackPriceAttribute',
areaName: '',
additionalParam: JSON.stringify(filterPPAExtraParam),
storeId: App.grdPackPriceAttributes.store.storeId
};

Ext.net.Mask.show({ msg: 'Loading...' });
$('#customFilter').load(link, paraObj, function () { $('#filterPopup').slideDown('slow'); });

App.btnClearAllFilter.show();
};




var chkDirty;

var firstload = true;

Ext.onReady(function () {
chkDirty = false;
@*Ext.net.Mask.show({ msg: 'Loading...' });*@
});

var SetDirty = function () {
if (!firstload)
chkDirty = true;
};

var ResetDirty = function () {
@*setInterval(function () { chkDirty = false; Ext.net.Mask.hide(); }, 5000);*@
chkDirty = false;
$('<div />').delay('100').queue(function (next) {
firstload = false;
});
};

var PageChange = function (e) {
if (chkDirty == true) {
var msg = "You have unsaved changes within this gird page. These changes will be lost if you continue. \n\n Do you wish to continue?";

var ans = confirm(msg);

if (ans == true) {
return true;
}
else {
return false;
}
}
};

var Back = function () {
@*var f = App.frmPackPriceAttributes.getForm();*@
if (chkDirty == true) {
var msg = "You have unsaved changes.These changes will be lost if you continue. \n\n Do you wish to continue?";

var ans = confirm(msg);

if (ans == true) {
var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "@PR.Resources.RP.RP.ERRPleaseWait" });
myMask.show();
window.location.href = '@string.Format("{0}/{1}", PR.DTO.Common.PRConfigDictionary.GetDictionary["BASE_URL"].ToString(), PR.DTO.Common.PRConfigDictionary.GetDictionary["HEADER_LINK_ADMIN"].ToString())';
}
}
else {
var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "@PR.Resources.RP.RP.ERRPleaseWait" });
myMask.show();
window.location.href = '@string.Format("{0}/{1}", PR.DTO.Common.PRConfigDictionary.GetDictionary["BASE_URL"].ToString(), PR.DTO.Common.PRConfigDictionary.GetDictionary["HEADER_LINK_ADMIN"].ToString())';
}
};

function RPShowMessage(messagetext, type, outerDivId, innerdivId) {
if (type == "Error") {
$("#" + innerdivId).css('color', 'red')
$("#" + innerdivId).empty();
$("#" + innerdivId).append(messagetext);
$("#" + outerDivId).toggle("Slow");
$("#" + outerDivId).delay(3000);
$("#" + outerDivId).fadeOut("slow");
$("#" + outerDivId).css("height", "45");
}
if (type == "Success") {
$("#" + innerdivId).css('color', '#0000FF');
$("#" + innerdivId).empty();
$("#" + innerdivId).append(messagetext);
$("#" + outerDivId).toggle("Slow");
$("#" + outerDivId).delay(3000);
$("#" + outerDivId).fadeOut("slow");
$("#" + outerDivId).css("height", "45");
}
};


var cmbCPTChange = function (grid, cmp) {
var attributeName = cmp.field;
var cptId = null;
switch (attributeName) {
case "Ex_Factory":
cptId = cmp.record.data.Ex_Factory;
break;
case "End_User_Price":
cptId = cmp.record.data.End_User_Price;
break;
case "Pharmacy_Purchase_Price":
cptId = cmp.record.data.Pharmacy_Purchase_Price
break;
}
var packCd = cmp.record.data.PACK_CD;

Ext.net.directRequest({
url: '@Url.Action("SetPackPriceAttribute")',
extraParams: { UrcId: urcId, RoleId: roleId, PSId: psId, GsId: gsId, UserId: userId, PriceTypeID: priceTypeId },
success: function (form, action) {
var result = action.result;
App.grdUserScopeConfiguration.getStore().reload();
RPShowMessage(action.message, 'Success', 'effect', 'divStatus');
},
failure: function (form, action) {
RPShowMessage(action.message, 'Error', 'effect', 'divStatus');
}
});
};


</script>

<div id="effect" class="ui-widget-content ui-corner-all" style="display: none;">
<a class="ui-dialog-titlebar-close ui-corner-all" style="float: right;" id="divClose" href="#" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
<div id="divStatus"></div>
</div>


<div id="filterPopup" class="filter-popup">
<div id="customFilter"></div>
</div>

@(Html.X().Hidden().ID("hdnFilters"))
@(Html.X().Hidden().ID("hdnExtraParam"))


@Html.X().ResourceManager()

@(Html.X().Panel().ID("pnlMain").Title("Manage Reportable Price Type").Items(
Html.X().Container().StyleSpec("margin-top:7px;").Items(Html.X().DisplayField().Hidden(true)),
Html.X().FormPanel()
.ID("frmPackPriceAttributes")
.TopBarItem(
Html.X().Container().Items(
Html.X().Button().StyleSpec("margin-right:5px;")
.ID("btnSubmit").Scale(ButtonScale.Medium).Icon(Icon.TableSave)
.Text("Save")
//.OnClientClick("doLayoutCreateWindow")
.DirectEvents(de =>
{
de.Click.Url = (Url.Action("HandleChanges"));
de.Click.EventMask.ShowMask = true;
de.Click.Timeout = 50000;
de.Click.FormID = "frmPackPriceAttributes";
de.Click.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "#{grdStorePackPriceAttributes}.getChangedData({ski pIdForPhantomRecords: false})",
Mode = ParameterMode.Raw,
Encode = true
});
}),
Html.X().Button().Scale(ButtonScale.Medium).StyleS pec("margin-right:5px;")
.ID("btnPackDetailsCancel")
.Text("Back").Icon(Icon.PageBack)
//.Listeners(ls => ls.Click.Fn = "packDetailsCancel")
.Handler("Back();")
,
Html.X().Button().ID("btnClearAllFilter").Text("Reset all filters")
.Scale(ButtonScale.Medium)
.IconUrl("~/Images/Icons/filter-before.ico")
.OnClientClick("ifFnExistsCallIt('ClearAllFilter')")
.StyleSpec("margin-left:5px !important; background-image:none !important;")
.Hidden(true)
)
)
.Items(
Html.X().GridPanel().ID("grdPackPriceAttributes")//.StyleSpec("margin-top:7px;")
.Scroll(ScrollMode.Vertical)
.ColumnLines(true)
.EnableColumnHide(false)
.View(Html.X().GridView().Listeners(events => events.BeforeRefresh.Handler = "this.panel.hide();"))
.Store(
X.Store().ID("grdStorePackPriceAttributes").Listeners(ls => { ls.Load.Delay = 1; ls.Load.Fn = "ResetDirty"; }).RemoteSort(true)//.RemoteFilter(true)
.PageSize(
Convert.ToInt32(PriceRight.Settings.PropertyReader .GetProperty("GRID_PAGE_SIZE"))
)
.Model(X.Model().ID("modelPackPriceAttributes")
.Fields(
new ModelField("PRODUCT_GROUP_CD"),
new ModelField("PRODUCT_GROUP_DESC"),
new ModelField("PACK_CD"),
new ModelField("PACK_DESC"),
new ModelField("COUNTRY_CD"),
new ModelField("COUNTRY_DESC"),
new ModelField("Ex_Factory"),
new ModelField("Pharmacy_Purchase_Price"),
new ModelField("End_User_Price"),
new ModelField("Ex_FactoryPPA_CD"),
new ModelField("Pharmacy_Purchase_PricePPA_CD"),
new ModelField("End_User_PricePPA_CD")
)
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetPackPriceAttributes"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Parameters(p =>
{
p.Add(
Html.X().StoreParameter().Name("objFilters").Mode(ParameterMode.Value).Value("Ext.getCmp('hdnFilters').getValue()")
);
})
)
.ColumnModel(
X.Column().Text("Product").ID("PRODUCT_GROUP_CD").DataIndex("PRODUCT_GROUP_CD").Hidden(true),
X.Column().Text("Product").ID("PRODUCT_GROUP_DESC").DataIndex("PRODUCT_GROUP_DESC").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>"),
X.Column().Text("Pack").ID("PACK_CD").DataIndex("PACK_CD").Hidden(true),
X.Column().Text("Pack Description").ID("PACK_DESC").DataIndex("PACK_DESC").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(1),
X.Column().Text("Country").ID("COUNTRY_DESC").DataIndex("COUNTRY_DESC").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(1),
X.Column().Text("Ex_FactoryPPA_CD").ID("Ex_FactoryPPA_CD").DataIndex("Ex_FactoryPPA_CD").Hidden(true),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("Ex_Factory")
.Flex(1)
//.Listeners(ls => ls.Edit.Fn = "cmbCPTChange")
.Text("Ex Factory")
.Component(Html.X().ComboBox()
.ValueField("CHANNEL_PRICE_TYPE_CD")
.DisplayField("CHANNEL_PRICE_TYPE_DESC")
.EmptyText("Select Channel - Price Type")
.Editable(false)
.Listeners(ls => ls.Change.Fn = "SetDirty")
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("CHANNEL_PRICE_TYPE_CD", ModelFieldType.String),
new ModelField("CHANNEL_PRICE_TYPE_DESC", ModelFieldType.String)
)
)
.DataSource(ViewBag.ChannelPriceTypes)
)

),
X.Column().Text("Pharmacy_Purchase_PricePPA_CD").ID("Pharmacy_Purchase_PricePPA_CD").DataIndex("Pharmacy_Purchase_PricePPA_CD").Hidden(true),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("Pharmacy_Purchase_Price")
.Flex(1)
//.Listeners(ls => ls.Edit.Fn = "cmbCPTChange")
.Text("Pharmacy Purchase Price")
.Component(Html.X().ComboBox()
.Editable(false)
.EmptyText("Select Channel - Price Type")
.ValueField("CHANNEL_PRICE_TYPE_CD")
.DisplayField("CHANNEL_PRICE_TYPE_DESC")
.Listeners(ls => ls.Change.Fn = "SetDirty")
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("CHANNEL_PRICE_TYPE_CD", ModelFieldType.String),
new ModelField("CHANNEL_PRICE_TYPE_DESC", ModelFieldType.String)
)
)
.DataSource(ViewBag.ChannelPriceTypes)
)

),
X.Column().Text("End_User_PricePPA_CD").ID("End_User_PricePPA_CD").DataIndex("End_User_PricePPA_CD").Hidden(true),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("End_User_Price")
.Flex(1)
.Text("End User Price")
//.Listeners(ls => ls.Edit.Fn = "cmbCPTChange")
.Component(Html.X().ComboBox()
.ValueField("CHANNEL_PRICE_TYPE_CD")
.DisplayField("CHANNEL_PRICE_TYPE_DESC")
.EmptyText("Select Channel - Price Type")
.Editable(false)
.Listeners(ls => ls.Change.Fn = "SetDirty")
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("CHANNEL_PRICE_TYPE_CD", ModelFieldType.String),
new ModelField("CHANNEL_PRICE_TYPE_DESC", ModelFieldType.String)
)
)
.DataSource(ViewBag.ChannelPriceTypes)
)

)
)
.BottomBar(Html.X().PagingToolbar()
.HideRefresh(true)
.Listeners(ls =>
{
// ls.BeforeChange.Handler = "var change = (this.getPageData().activePage !== this.lastPage) && Ext.isDefined(this.lastPage); this.lastPage = this.getPageData().activePage; return change;";
ls.BeforeChange.Fn = "PageChange";
ls.Change.Handler = " firstload = true;";
})
.ID("PageBar")
.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)
.BeforePageText(PR.Resources.Common.Common.Pagging BeforePageText)
.AfterPageText(PR.Resources.Common.Common.PaggingA fterPageText)
.EmptyMsg(PR.Resources.Common.Common.PaggingEmptyM sg)
)
.Features(Html.X().Grouping().HideGroupedHeader(fa lse),
Html.X().GridFilters()
.Filters(Html.X().StringFilter().DataIndex("PACK_DESC"))
)
)
)// End Panel
)
@(
Html.X().ComboBox().ID("cmbReportablePriceAttributes")
.ValueField("PRICE_ATTRIBUTE_CD")
.Hidden(true)
.DisplayField("PRICE_ATTRIBUTE_DESC")
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("PRICE_ATTRIBUTE_CD", ModelFieldType.String),
new ModelField("PRICE_ATTRIBUTE_DESC", ModelFieldType.String),
new ModelField("PRICE_ATTRIBUTE_NAME", ModelFieldType.String)
)
)
.DataSource(ViewBag.ReportablePriceAttributes)
)
)

Daniil
Apr 09, 2014, 6:36 PM
Please put

alert("insertComponents")
into the insertComponents function in the override.

Are you able to see an alert box when run the page?

PriceRightHTML5team
Apr 10, 2014, 5:14 AM
Hi Daniil,
I added an alert into the override function.
The alert msg box is shown up.

Daniil
Apr 10, 2014, 3:53 PM
Ok.

This helps in my test case. Maybe, I misunderstood the problem. Could you, please, provide a screencast?

PriceRightHTML5team
Apr 11, 2014, 5:45 AM
Hi Daniil,
This is screenshot at load of data
9781

and after 2 to 4 seconds
9791

Daniil
Apr 11, 2014, 4:09 PM
I get the problem now.

I can suggest the following.

1. This ConfigItem for the GridPanel:

<ext:ConfigItem Name="waitComboBoxStore" Value="0" Mode="Raw" />

2. The GridView's BeforeRefresh listener:

<BeforeRefresh Handler="Ext.net.Mask.show({ el: this.panel });" />

3. There listeners for the ComboBox's Store.

<BeforeLoad Handler="App.GridPanel1.waitComboBoxStore++;" />
<Load Handler="if (--App.GridPanel1.waitComboBoxStore === 0) {
Ext.net.Mask.hide();
};" />

Here is a full example.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, "Text 1", DateTime.Now.Date },
new object[] { 2, 2, "Text 2", DateTime.Now.Date },
new object[] { 3, 3, "Text 3", DateTime.Now.Date }
};
}
}

[DirectMethod]
public object BindData()
{
var data = new object[]
{
new object[] { 1, "Item 1" },
new object[] { 2, "Item 2" },
new object[] { 3, "Item 3" }
};

System.Threading.Thread.Sleep(3000);

return new { data };
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<CustomConfig>
<ext:ConfigItem Name="waitComboBoxStore" Value="0" Mode="Raw" />
</CustomConfig>
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView runat="server">
<Listeners>
<BeforeRefresh Handler="Ext.net.Mask.show({ el: this.panel });" />
</Listeners>
</ext:GridView>
</View>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store runat="server">
<Proxy>
<ext:PageProxy DirectFn="App.direct.BindData">
<Reader>
<ext:ArrayReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<BeforeLoad Handler="App.GridPanel1.waitComboBoxStore++;" />
<Load Handler="if (--App.GridPanel1.waitComboBoxStore === 0) {
Ext.net.Mask.hide();
};" />
</Listeners>
</ext:Store>
</Store>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

PriceRightHTML5team
Apr 15, 2014, 11:58 AM
Hi Daniil,

I am using Asp.Net MVC razor view application.
Kindly provide example for the same.

Thanks.

Daniil
Apr 15, 2014, 3:38 PM
I am a bit more fluent in ASPX syntax. So, for the forums I mostly create samples on ASPX, because it is faster.

I mentioned the key points. Please clarify do you have any problems to implement it with Razor? It should not be a problem.



1. This ConfigItem for the GridPanel:

<ext:ConfigItem Name="waitComboBoxStore" Value="0" Mode="Raw" />

2. The GridView's BeforeRefresh listener:

<BeforeRefresh Handler="Ext.net.Mask.show({ el: this.panel });" />

3. There listeners for the ComboBox's Store.

<BeforeLoad Handler="App.GridPanel1.waitComboBoxStore++;" />
<Load Handler="if (--App.GridPanel1.waitComboBoxStore === 0) {
Ext.net.Mask.hide();
};" />