PDA

View Full Version : [CLOSED] How to access a DirectMethodNamespace in parent from a ascx?



Fahd
Oct 10, 2012, 5:00 PM
Hello,
From a ascx control, I need to access the DirectMethodnamespace located in the aspx page.
I have this same javascript that works fine if the Ext.ResourceManager control is placed on the same aspx page. However, I need to use a user control.
Can you please show me how to access the mLevels.BuildLeve() method in my example ?

I have this Ext.ResourceManager in my aspx:


<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="mLevels" />


but in my ascx, I got this runtime error message:
"Object doesn't support this property or method"

Below is my javascript code that is throwing the error:


mLevels.BuildLevel(level + 1, recId, gridId, trailerNumber, {
eventMask: {
showMask: true,
tartget: "customtarget",
customTarget: expander.getCmp().body
}


code behind:



[DirectMethod]
public void BuildLevel(int level, string recId, string gridId, int TrailerNum)
{
var storeId = "L".ConcatWith(level, "_", recId, "_Store");
var newGridId = "L".ConcatWith(level, "_", recId, "_Grid");

// build store
var store = new Store { ID = storeId };
var model = new Ext.Net.Model { IDProperty = "ID" };
model.Fields.Add("ID", "Name");
model.Fields.Add("Destination");
model.Fields.Add("TrailerNumber");
model.Fields.Add(new ModelField
{
Name = "Level",
DefaultValue = level.ToString()
});
store.Model.Add(model);
}

Daniil
Oct 10, 2012, 5:48 PM
Hi Fahd,

If you provided all details the DirectMethod should be accessible from a user control just by:

mLevels.BuildLevel(...);


I noticed here

Can you please show me how to access the mLevels.BuildLeve() method in my example ?
that there is no "l" at the end of "BuildLeve". Is not a problem?

Fahd
Oct 10, 2012, 6:26 PM
Hi Daniil,
Thanks for replying back. The missing l is just a copy/paste error. It is in my code.
Below is my code in the aspx page:


<%@ Page Language="C#" AutoEventWireup="true" ViewStateMode="Disabled" CodeBehind="CurrentStatusDashboard.aspx.cs"
Inherits="Web.Pages.CurrentStatusDashboard" %>

<%--To maintain IDs in UC, use ClientIDMode="Static" property--%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register TagPrefix="uc" TagName="PotentialLateTrailersGrid" Src="~/UserControls/PotentialLateTrailersGrid.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Refresh" content="900" />
<title>Distribution Dashboard</title>
<%--<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />--%>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="mLevels" />
<ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: #F2F2F2;">
<Items>

<%--South--%>
<ext:Panel ID="Panel4" runat="server" Title="Potential Late Trailers" Region="South"
Width="1000" MinWidth="200" Height="200" Collapsible="true"
Margin="2" Flex="1">
<Content>
<uc:PotentialLateTrailersGrid ID="PotentialLateTrailersGridUC" runat="server" />
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


this is my user control that throws the runtime js error upon expanding a level



<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PotentialLateTrailersGrid.ascx.cs"
Inherits="Web.UserControls.PotentialLateTrailersGrid" %>
<%@ Import Namespace="Controllers" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

// List<OutgoingTrailer> lstOfOutGoingTrailers = OutgoingTrailerController.LateTrailerData();
if (X.IsAjaxRequest)
{
//We do not need to DataBind on an DirectEvent
return;
}

//Build first level
this.BuildLevel(1, "r0", "g0", 0);

}

public class Plant
{
public int TrailerNum { get; set; }
public int Door { get; set; }
public string Destination { get; set; }
public string ShipDate { get; set; }
public string ScheduledSeal { get; set; }
public int TimeLeft { get; set; }
public int PercentFull { get; set; }

}

public List<Plant> LateTrailerData()
{
var random = new Random();
return new List<Plant>
{
new Plant {ShipDate = "8/3", Destination = "Hazleton", ScheduledSeal = "11:30", TimeLeft = random.Next(10,100), Door = 3, TrailerNum = 123, PercentFull = random.Next(1,100)},
new Plant {ShipDate = "8/3", Destination = "Norristown", ScheduledSeal = "8:30", TimeLeft = random.Next(10,100), Door = 2, TrailerNum = 345, PercentFull = random.Next(1,100)},
new Plant {ShipDate = "8/3", Destination = "Easton", ScheduledSeal = "5:30", TimeLeft = random.Next(10,100), Door = 10, TrailerNum = 851, PercentFull = random.Next(1,100)},
new Plant {ShipDate = "8/3", Destination = "Sayre", ScheduledSeal = "2:30", TimeLeft = random.Next(10,100), Door = 8, TrailerNum = 888, PercentFull = random.Next(1,100)}
};
}

private object[] Data
{
get
{
return new object[]
{
new object[] {1000, "Lv2 first record","Harrisburg" },
new object[] {2000, "Lv2 second record","Bay Shore" },
new object[] {3000, "Lv2 third record","Albany" },
new object[] {4000, "Lv2 four record","Brooklyn" },
new object[] {5000, "Lv2 five record","Easton" },
new object[] {6000, "Lv2 six record","Greenwich" }
};
}
}

private object[] Level2Data
{
get
{
return new object[]
{
new object[] {1000, "Lv2 Details - first record"," Harrisburg level2" },
new object[] {1000, "Lv2 Details - second record"," Bay Shore level2" },
new object[] {1000, "Lv2 Details - third record","Albany level2" },
new object[] {1000, "Lv2 Details - four record","Brooklyn level2" },
new object[] {1000, "Lv2 Details - five record","Easton level2" },
new object[] {1000, "Lv2 Details - six record","Greenwich level2" }
};
}
}

[DirectMethod]
public void BuildLevel(int level, string recId, string gridId, int TrailerNum)
{
var storeId = "L".ConcatWith(level, "_", recId, "_Store");
var newGridId = "L".ConcatWith(level, "_", recId, "_Grid");

// build store
var store = new Store { ID = storeId };
var model = new Ext.Net.Model { IDProperty = "ID" };
model.Fields.Add("ID", "Name");
model.Fields.Add("Destination");
model.Fields.Add("TrailerNumber");
model.Fields.Add(new ModelField
{
Name = "Level",
DefaultValue = level.ToString()
});
store.Model.Add(model);
store.CustomConfig.Add(new ConfigItem("level", level.ToString(), ParameterMode.Raw));

var data = new List<object>();

if (level == 1)
{
for (int i = 0; i < this.LateTrailerData().Count() - 1; i++)
{
Plant plant = (this.LateTrailerData())[i];
data.Add(new
{
ID = recId.ConcatWith("_R", i),//do not change this
Name = plant.Door,
TrailerNumber = plant.TrailerNum,
Destination = plant.Destination
});
}
}

if (level == 2)
{
for (int i = 0; i < this.Data.Count() - 1; i++)
{
data.Add(new
{
ID = recId.ConcatWith("_R", i),//do not change this
Name = ((object[])(this.Data[i]))[1].ToString(),
TrailerNumber = ((object[])(this.Data[i]))[0].ToString(),
Destination = ((object[])(this.Data[i]))[2].ToString()
});
}
}


if (level == 3)
{
for (int i = 0; i < this.Level2Data.Count() - 1; i++)
{
data.Add(new
{
ID = recId.ConcatWith("_R", i),//do not change this
Name = ((object[])(this.Level2Data[i]))[1].ToString(),
TrailerNumber = ((object[])(this.Level2Data[i]))[0].ToString(),
Destination = ((object[])(this.Level2Data[i]))[2].ToString()
});
}

}


//build grid
var grid = new GridPanel
{
ID = newGridId,
Store = {
store
},
// AutoHeight = true,
HideHeaders = level != 1,
DisableSelection = true
};

//build columns
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name", Text = "Door", Flex = 1 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "TrailerNumber", Text = "Trailer Number", Flex = 1 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Destination", Text = "Destination", Flex = 1 });
grid.ColumnModel.ID = newGridId + "_CM";
// build view
var view = new Ext.Net.GridView
{
ID = newGridId + "_View",
};
grid.View.Add(view);

// build selection model
var sm = new RowSelectionModel { ID = newGridId + "_SM", Mode = SelectionMode.Multi };
grid.SelectionModel.Add(sm);

// add expander for all levels except last (last level is 5)
if (level < 3)
{
view.Listeners.BeforeRefresh.Fn = "clean";
var re = new RowExpander
{
ID = newGridId + "_RE",
Template = { ID = newGridId + "_TPL", Html = "<div id=\"row_{ID}\" style=\"background-color:white;\"></div>" }
};

re.Listeners.BeforeExpand.Fn = "loadLevel";

grid.Plugins.Add(re);
}

store.DataSource = data;
store.DataBind();

if (level == 1)
{
grid.Title = "MultiLevel grid";
grid.Width = 600;
grid.Height = 600;
grid.ResizableConfig = new Resizer { Handles = ResizeHandle.South };
// grid.AutoHeight = false;
this.multiLevleGridPlaceHolder.Controls.Add(grid);
}
else
{
// grid.AutoHeight = false;
grid.Height = 100;
var renderEl = "row_" + recId;
X.Get(renderEl).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);

this.RemoveFromCache(newGridId, gridId);
grid.Render(renderEl, RenderMode.RenderTo);
this.AddToCache(newGridId, gridId);
}
}


private void RemoveFromCache(string id, string parentId)
{
Ext.Net.ResourceManager rm = (Ext.Net.ResourceManager)this.Parent.FindControl("ResourceManager1");
rm.AddScript("removeFromCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
}

private void AddToCache(string id, string parentId)
{
Ext.Net.ResourceManager rm = (Ext.Net.ResourceManager)this.Parent.FindControl("ResourceManager1");
rm.AddScript("addToCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
}
</script>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<script type="text/javascript">
var ns = App;
ns.lookup = {};

var clean = function (view, isDestroy) {
var controls = ns.lookup[view.panel.id] || {},
ids = [];

for (var c in controls) {
ids.push(controls[c].id || controls[c].storeId);
}

if (ids.length > 0) {
if (isDestroy !== true) {
view.grid.getRowExpander().collapseAll();
}

for (var i = 0; i < ids.length; i++) {
removeFromCache(ids[i], view.grid.id);
}
}
};

var addToCache = function (c, parent) {
ns.lookup[parent] = ns.lookup[parent] || {};
ns.lookup[parent][c] = ns[c];
}

var removeFromCache = function (c, parent) {
ns.lookup[parent] = ns.lookup[parent] || {};

var ctrl = ns.lookup[parent][c];
delete ns.lookup[parent][c];
if (ctrl) {
if (ctrl.view) {
clean(ctrl.view, true);
}
ctrl.destroy();
}
}

var loadLevel = function (expander, record, body, row, rowIndex) {
if (body.rendered) {
return;
}

var recId = record.getId(),
gridId = expander.getCmp().id,
level = record.data.Level,
trailerNumber = record.data.TrailerNumber;

mLevels.BuildLevel(level + 1, recId, gridId, trailerNumber, {
eventMask: {
showMask: true,
tartget: "customtarget",
customTarget: expander.getCmp().body
},

success: function () {
body.rendered = true;
}
});
};
</script>
<style type="text/css">
.my-highlighted-row-yellow .x-grid-cell
{
background-color: yellow !important;
}

.my-highlighted-row-red .x-grid-cell
{
background-color: red !important;
}
</style>

<asp:PlaceHolder runat="server" ID="multiLevleGridPlaceHolder">

</asp:PlaceHolder>






Hi Fahd,

If you provided all details the DirectMethod should be accessible from a user control just by:

mLevels.BuildLevel(...);


I noticed here

that there is no "l" at the end of "BuildLeve". Is not a problem?

Daniil
Oct 11, 2012, 10:35 AM
Please look at the example how to call a DirectMethod from a user control.
http://examples2.ext.net/#/Events/DirectMethods/UserControls/

(http://examples2.ext.net/#/Events/DirectMethods/UserControls/)You don't need DirectMethodNamespace of a parent page in this case.