PDA

View Full Version : [CLOSED] Javascript Properties are missing from the Grid while using the Updated EXT.NET DLL



alscg
Feb 19, 2013, 8:28 AM
Hi,

I have made a dynamic Grid. I build the ColumnModel of the Grid in Controller.



public List<Column> BuildColumnModel()
{
List<Column> lstColm = new List<Column>();
System.Data.DataTable dtRecord = new System.Data.DataTable();
if (System.Web.HttpContext.Current.Session["Records"] != null)
{
var data = System.Web.HttpContext.Current.Session["Records"];
dtRecord = (System.Data.DataTable)data;
}

int nextControl = 0;
var dataSource = GetAllColumnByDataType(1).Data;
foreach (System.Data.DataColumn column in dtRecord.Columns)
{
Column newColumn = new Column();
newColumn.Text = column.ColumnName;
newColumn.DataIndex = column.ColumnName;
newColumn.Cls = "custom-grid-column";
newColumn.Width = 200;
newColumn.Height = 119;

ComboBox newCombo = new ComboBox();
newCombo.ID = "combo_" + nextControl;
newCombo.Name = "combo_" + nextControl;
newCombo.Store.Add(xStore(nextControl, dataSource));
newCombo.ValueField = "value";
newCombo.DisplayField = "text";
newCombo.Cls = "grid-combo-box";

List<Empower.DTO.Administration.DropDownDTO> data = (List<Empower.DTO.Administration.DropDownDTO>)dataSource;
var name = data.Find(a => (a.equivalentname1 == column.ColumnName || a.equivalentname2 == column.ColumnName ||
a.equivalentname3 == column.ColumnName || a.equivalentname4 == column.ColumnName || a.equivalentname5 == column.ColumnName));

if (name != null)
{
newCombo.SetValue(name.text);
}

newColumn.HeaderItems.Add(newCombo);

Ext.Net.LinkButton linkButton = new Ext.Net.LinkButton();
linkButton.ID = "linkButton_" + nextControl;
linkButton.Text = "Map Field Values <i class='general foundicon-edit'></i>";
linkButton.Listeners.Click.Fn = "MapFieldValuesPopup";
linkButton.Cls = "grid-link-btn";
newColumn.HeaderItems.Add(linkButton);
nextControl++;

lstColm.Add(newColumn);
}

return lstColm;
}


I am calling "MapFieldValuesPopup" function on Listener.



var MapFieldValuesPopup = function (grid, rowIndex, e) {
debugger;
var gridPanel = App.DataGridPanel;
var destValue = grid.isContained.items.items[0].value;
var srcPosition = grid.id.split("_");
var srcValue = gridPanel.columns[srcPosition[1]].text;
$("#myModal").reveal();
$("#myModal").css('padding','0px');
$(".reveal-modal-load").html("");
$(".reveal-modal-load").load('/Administration/MapFieldValues',{ "srcValue": srcValue, "destValue": destValue })
};


In above function we get the grid.
Before Updating DLL,if I see it in quick watch it will look like(see it in attachment)----- 5650
I have fetch the value from grid.isContained.items.items[0].value ---------------5651

After using Update DLL of Ext.Net(2.1.0.30775) when I see the same grid into Quick watch there is no
isContained Property------------5652

Please Check it out or should we need to change the code again. And I am still not able to get the HIDEHEADERS propery of the GridPanel in the updated one.

Daniil
Feb 19, 2013, 10:06 AM
Hi @alscg,

Well, I can't see the isContained property in the ExtJS API. So, we can't complain on ExtJS if it was removed, renamed or something else.

Please clarify what did you use this property for?

alscg
Feb 19, 2013, 10:57 AM
Hi @alscg,

Well, I can't see the isContained property in the ExtJS API. So, we can't complain on ExtJS if it was removed, renamed or something else.

Please clarify what did you use this property for?

we are using Ext.Net not ExtJS.when we were using Ext.Net dll (Version 2.1.0.6553) we were getting isContained property. you can check with this version.

Now when we are using Version 2.1.0.30775,this property is missing.
Through the property -grid.isContained.items.items[0].value I used to get the value of the combo in the header of the grid panel(You can see the code provided in the previous post)



<%:Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).Theme(Ext.Net.Theme.Gray )%>


<%: Html.X().GridPanel()
.ID("DataGridPanel")
.Width(1012)
.Height(300)
.Cls("x-data-grid-custom")
.MarginSpec("0 0 0 40")
.Border(false)
.Store(Model.BuildGridStore())
.ColumnModel(Model.BuildColumnModel())
%>

Vladimir
Feb 19, 2013, 11:26 AM
we are using Ext.Net not ExtJS.

On the client side you use ExtJS API, 'isContained' is not public property therefore you used it at own risk
You have to use public methods/events/properties only (you can found API at http://docs.sencha.com/ext-js/4-1/)

What contains that property in previous version? Is it parent container?

alscg
Feb 20, 2013, 5:30 AM
What contains that property in previous version? Is it parent container?

You can check the whole code and even the javascript property which I have mentioned and given you the snapshot of that.
I am sending you the whole code.You can produce the same thing at your end.you have to use EXT.Net dll version 2.1.0.6553.


Code for VIEW




<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MapDemo.Controllers.ExtNetController>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MapGrid
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>MapGrid</h2>

<%:Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).Theme(Ext.Net.Theme.Gray )%>
<div>
<%: Html.X().Button().ID("Tst").Text("Button") %>

<%: Html.X().GridPanel()
.ID("DataGridPanel")
.Width(1012)
.Height(300)
.MarginSpec("0 0 0 40")
.Border(false)
.Store(Model.BuildGridStore())
.ColumnModel(Model.BuildColumnModel())
%>
</div>


</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsSection" runat="server">
<script type="text/javascript">
//For getting value of source and destinaion column name of the particular mapfieldvalue.
var MapFieldValuesPopup = function (grid, rowIndex, e) {
debugger;
var gridPanel = App.DataGridPanel;
var destValue = grid.isContained.items.items[0].value;

};
</script>
</asp:Content>




Code of Controller




public ActionResult MapGrid()
{
ExtNetController ext = new ExtNetController();
return View(ext);
}

public List<Column> BuildColumnModel()
{
List<Column> lstColm = new List<Column>();
System.Data.DataTable dtRecord = new System.Data.DataTable();
if (System.Web.HttpContext.Current.Session["Records"] != null)
{
var data = System.Web.HttpContext.Current.Session["Records"];
dtRecord = (System.Data.DataTable)data;
}

int nextControl = 0;
var dataSource = GetDropdown();

foreach (System.Data.DataColumn column in dtRecord.Columns)
{
Column newColumn = new Column();
newColumn.Text = column.ColumnName;
newColumn.DataIndex = column.ColumnName;

newColumn.Width = 200;
newColumn.Height = 119;

ComboBox newCombo = new ComboBox();
newCombo.ID = "combo_" + nextControl;
newCombo.Name = "combo_" + nextControl;

newCombo.Store.Add(xStore(nextControl, dataSource));
newCombo.ValueField = "value";
newCombo.DisplayField = "text";


newColumn.HeaderItems.Add(newCombo);

Ext.Net.LinkButton linkButton = new Ext.Net.LinkButton();
linkButton.ID = "linkButton_" + nextControl;
linkButton.Text = "Map Field Values <i class='general foundicon-edit'></i>";
linkButton.Listeners.Click.Fn = "MapFieldValuesPopup";

newColumn.HeaderItems.Add(linkButton);
nextControl++;

lstColm.Add(newColumn);
}

return lstColm;
}

public List<DropDownDTO> GetDropdown()
{
List<DropDownDTO> lst = new List<DropDownDTO>();
lst.Add(new DropDownDTO { text = "Address Line1", value = "addressline1" });
lst.Add(new DropDownDTO { text = "Address Line2", value = "addressline2" });
lst.Add(new DropDownDTO { text = "Address Line1", value = "addressline1" });
lst.Add(new DropDownDTO { text = "Address Line2", value = "addressline2" });
lst.Add(new DropDownDTO { text = "Address Line1", value = "addressline1" });
lst.Add(new DropDownDTO { text = "Address Line2", value = "addressline2" });
lst.Add(new DropDownDTO { text = "Address Line1", value = "addressline1" });
lst.Add(new DropDownDTO { text = "Address Line2", value = "addressline2" });

return lst;
}

public Store BuildGridStore()
{
Store store1 = new Store();
store1.ID = "Store1";
JsonReader reader = new JsonReader();
store1.Reader.Clear();
store1.Reader.Add(reader);

System.Data.DataTable dtRecord = new System.Data.DataTable();
dtRecord = GetDataFromFile();

Model model = new Model();

foreach (System.Data.DataColumn column in dtRecord.Columns)
{
model.Fields.Add(new ModelField(column.ColumnName, MappingType(column.DataType)));
}

store1.Model.Add(model);
store1.DataSource = dtRecord;
store1.DataBind();
return store1;
}

public Model BuildModel()
{
System.Data.DataTable dtRecord = new System.Data.DataTable();
if (Session["Records"] != null)
{
var data = Session["Records"];
dtRecord = (System.Data.DataTable)data;
}
Model model = new Model();
foreach (System.Data.DataColumn column in dtRecord.Columns)
{
model.Fields.Add(new ModelField(column.ColumnName, MappingType(column.DataType)));
}
return model;
}

private ModelFieldType MappingType(System.Type type)
{
if (type == typeof(string))
{
return ModelFieldType.String;
}
else if (type == typeof(DateTime))
{
return ModelFieldType.Date;
}
else if (type == typeof(int))
{
return ModelFieldType.Int;
}
else if (type == typeof(double))
{
return ModelFieldType.Float;
}
else if (type == typeof(bool))
{
return ModelFieldType.Boolean;
}
return ModelFieldType.Auto;
}

//Create a Store for combo
private Ext.Net.Store xStore(int nextCombo, object datasource)
{
//Create the store
JsonReader _jsonReader = new JsonReader();
Store xStore = new Store();
xStore.ID = "XStore" + nextCombo;
Model cbmodel = new Model();
cbmodel.Fields.Add(new ModelField("value"));
cbmodel.Fields.Add(new ModelField("text"));
xStore.Model.Add(cbmodel);
xStore.Reader.Add(_jsonReader);

xStore.DataSource = datasource;
xStore.DataBind();
return xStore;
}

public DataTable GetDataFromFile()
{

DataTable dtRecord = new DataTable("Imported_Data");

dtRecord.Columns.Add("EMP ID");
dtRecord.Columns.Add("First Name");
dtRecord.Columns.Add("Last Name");
dtRecord.Columns.Add("Position");
dtRecord.Columns.Add("Level");
dtRecord.Columns.Add("Gender");
dtRecord.Columns.Add("Business Unit");
dtRecord.Columns.Add("AddressLine1");
dtRecord.Columns.Add("AddressLine2");
dtRecord.Columns.Add("AddressType");

DataRow dr = dtRecord.NewRow();
dr[0]="1";
dr[1]="John";
dr[2]="Doe";
dr[3]="Manager";
dr[4]="1";
dr[5]="M";
dr[6]="Services";
dr[7]="Pune";
dr[8]="Maharashtra";
dr[9]="OFFICE_ADDRESS";
dtRecord.Rows.Add(dr);

System.Web.HttpContext.Current.Session["Records"] = dtRecord;

return dtRecord;
}



DropDownDTO



public class DropDownDTO
{
public string text { get; set; }
public string value { get; set; }
}


On the Link in the header I am calling the function MapFieldValuesPopup. on click of the link I wanted to have the value of the combobox of that particular column.
So I was getting the value by grid.isContained.items.items[0].value

But with updated dll I am not getting that.Is there any other way in EXT.NET to get the value?

Daniil
Feb 20, 2013, 7:38 AM
Hopefully, I understand the requirement correctly.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onClick = function (btn) {
alert(btn.ownerCt.items.get(0).getValue());
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1">
<HeaderItems>
<ext:ComboBox runat="server">
<SelectedItems>
<ext:ListItem Text="Item 1" />
</SelectedItems>
<Items>
<ext:ListItem Text="Item 1" />
<ext:ListItem Text="Item 2" />
</Items>
</ext:ComboBox>
<ext:Button runat="server" Text="Click me" Handler="onClick" />
</HeaderItems>
</ext:Column>
<ext:Column runat="server" Text="Test2" DataIndex="test2">
<HeaderItems>
<ext:ComboBox runat="server">
<SelectedItems>
<ext:ListItem Text="Item 2" />
</SelectedItems>
<Items>
<ext:ListItem Text="Item 1" />
<ext:ListItem Text="Item 2" />
</Items>
</ext:ComboBox>
<ext:Button runat="server" Text="Click me" Handler="onClick" />
</HeaderItems>
</ext:Column>
<ext:Column runat="server" Text="Test3" DataIndex="test3">
<HeaderItems>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" />
<ext:ListItem Text="Item 2" />
</Items>
</ext:ComboBox>
<ext:Button runat="server" Text="Click me" Handler="onClick" />
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>