PDA

View Full Version : [CLOSED] [WebForm] Render html in ToolBar



Tactem
Jan 31, 2014, 10:55 AM
Hi guys,

i would like to fill toolbar html properties with an static function (same htmlhelper in mvc)


<ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" Html='<%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>'>

i tried this, but html isn't interpret.

I test to use a panel with content. It's work but my window doesn't show with this method.


<ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false">
<Items>
<ext:Panel runat="server" BodyCls="HeadBand" Cls="HeadBand" >
<Content>
<%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
</Content>
</ext:Panel>
</Items>
</ext:Toolbar>

my headband is full html and work perfectly in mvc application

7548

Regards

Daniil
Jan 31, 2014, 12:53 PM
Hi @Tactem,

Please try to set up AutoDataBind="true" for the Toolbar.

Tactem
Jan 31, 2014, 1:18 PM
the result is the same with autodatabind = true

Daniil
Jan 31, 2014, 2:43 PM
I remembered that a Toolbar is supposed to be used with Items only. It should not be used with Html or Content.

Are you using a Toolbar inside BottomBar or TopBar? If so, please use a Container as a docked item.

Example

<ext:Panel runat="server">
<DockedItems>
<ext:Container runat="server" Dock="top" />
</DockedItems>
</ext:Panel>

Then you can render the things into that Container.

Tactem
Jan 31, 2014, 2:56 PM
i'm using a Toolbar inside TopBar

i have the same result with this


<TopBar>
<ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" AutoDataBind="true">
<Items>
<ext:Panel runat="server">
<DockedItems>
<ext:Container runat="server" Dock="top">
<Content>
<%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
</Content>
</ext:Container>
</DockedItems>
</ext:Panel>
<%--<ext:Panel runat="server" BodyCls="HeadBand" Cls="HeadBand" >
<Content>
<%= TIOWTS.Helper.HeadBandHelper.HeadBandHelperString("Administration") %>
</Content>
</ext:Panel>--%>
</Items>
</ext:Toolbar>
</TopBar>

clarification : i see my top bar, but i don't see my window at the right because it's out of my toolbar zone

i join an another image
7550

Daniil
Jan 31, 2014, 3:23 PM
Well, I meant using a docked Container instead of a Toolbar, not inside. Never mind.


clarification : i see my top bar, but i don't see my window at the right because it's out of my toolbar zone

I don't quite understand what you mean. Are you rendering a Window to a Toolbar?

A full sample to reproduce the problem is appreciated.

Tactem
Feb 03, 2014, 9:05 AM
Full simple sample


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TIOWTS.Administration.WebForm1" %>
<link rel="stylesheet" type="text/css" href="../../resources/css/main.css" />
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false">
</ext:ResourceManager>
<form id="form1" runat="server">
<div>
<ext:Panel runat="server" Layout="FitLayout" ID="PanelMain">
<TopBar>
<ext:Toolbar runat="server" Height="30" Layout="FitLayout" Border="false" AutoDataBind="true">
<Items>
<ext:Panel runat="server">
<DockedItems>
<ext:Container runat="server" Dock="top">
<Content>
<div>
<script>
function showDiv()
{
var divTemp = document.getElementById('divTemp');
divTemp.style.display = "block";
}
</script>
<input type="button" onclick="showDiv()" />
<div id="divTemp" style="margin-left:500px; margin-top:200px; z-index:2000111; height:100px; width:200px; display:none;">
<h2> test</h2>
</div>
</div>
</Content>
</ext:Container>
</DockedItems>
</ext:Panel>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel runat="server">
</ext:Panel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>

objective : show my divTemp

michaeld
Feb 03, 2014, 9:16 AM
Just an observation but you'll want to put that <script> section inside an <HtmlBin> of the Container. HtmlBin is designated for non-layout html (which the input and divs are).

Daniil
Feb 03, 2014, 3:00 PM
Well, that <div> is not visible, because its container doesn't have enough height to get visible.

I am not sure that I understand the requirement, but it looks like you might need to use a floating Container.

Example

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

<!DOCTYPE html>

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

<ext:Panel runat="server">
<TopBar>
<ext:Toolbar runat="server">
<HtmlBin>
<script>
function showDiv() {
App.Container1.show();
App.Container1.setPosition(100, 100);
}
</script>
</HtmlBin>
<Items>
<ext:Button runat="server" Text="Show" Handler="showDiv" />
<ext:Container ID="Container1" runat="server" Floating="true">
<Content>
<div style="height: 100px; width: 200px;">
<h2>test</h2>
</div>
</Content>
</ext:Container>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>


See also
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-floating

Tactem
Feb 03, 2014, 4:09 PM
Well, that <div> is not visible, because its container doesn't have enough height to get visible.
but in ext.mvc it's work.

it's probably possible to use a container to show my div even if i prefer show my div direct while my helper is using in webform appli and in mvc appli

Daniil
Feb 04, 2014, 5:29 AM
but in ext.mvc it's work.

Probably, something is configured differently, because I don't think the same configuration should work in MVC. Can you provide a working sample for MVC?

Tactem
Feb 04, 2014, 3:29 PM
Here you are


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

<script>
function showDiv() {
var divTemp = document.getElementById('divTemp');
divTemp.style.display = "block";
}
</script>

@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)
@(
Html.X().Viewport()
.Layout(LayoutType.Fit)
.Items(
Html.X().Panel()
.TopBar(
Html.X().Toolbar()
.Layout(LayoutType.Fit)
.Height(30)
.Border(false)
.Html("<input type='button' onclick='showDiv()' /><div id='divTemp' style='margin-left:500px; margin-top:200px; z-index:2000111; height:100px; width:200px; display:none;'><h2> test</h2></div>")
)
.Layout(LayoutType.Border)
.Items
(


)
)
)

Daniil
Feb 05, 2014, 4:05 AM
Ok, the same example works with WebForms.

Example

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

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

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

<script>
function showDiv() {
var divTemp = document.getElementById('divTemp');
divTemp.style.display = "block";
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Layout="BorderLayout">
<TopBar>
<ext:Toolbar
runat="server"
Layout="FitLayout"
Height="30"
Html="<input type='button' onclick='showDiv()' /><div id='divTemp' style='margin-left:500px; margin-top:200px; z-index:2000111; height:100px; width:200px; display:none;'><h2> test</h2></div>" />
</TopBar>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Tactem
Feb 05, 2014, 9:22 AM
Yes it's work but

as indicated at my first post, i fail to add my helper (static function string) in html attribut in toolbar (with html code only).

my helper


private static string GetHeadBandProduct(string module)
{
HttpStatusCode statusCode;
IMemberShipService _memberShipService = ServiceLocator.Current.GetInstance<IMemberShipService>();
ICustomHttpRequest _request = ServiceLocator.Current.GetInstance<ICustomHttpRequest>();
IEncryptionService _encryptionService = ServiceLocator.Current.GetInstance<IEncryptionService>();
TIOMembershipUser user = _memberShipService.GetUser();
CustomRequestParameters paramUrl = new CustomRequestParameters(RequestMethodType.Get, string.Format("{0}://{1}/Home/PartialViewHeadBand", HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host), string.Format("encryptedUser={0}&module={1}", HttpUtility.UrlEncode(_encryptionService.Encrypt(u ser.UserName)), module));
var temp = _request.GetResponse(paramUrl, out statusCode);
return temp;
}

public static string HeadBandHelperString(string module)
{
return GetHeadBandProduct(module);
}

Daniil
Feb 05, 2014, 10:02 AM
Please try:

<ext:Toolbar runat="server" Html="<%# GetHeadBandProduct() %>" AutoDataBind="true">

Tactem
Feb 05, 2014, 10:50 AM
We can't pass parameter with
<ext:Toolbar runat="server" Html="<%# GetHeadBandProduct() %>" AutoDataBind="true">

but it's ok for me in this context.

Thank you so much

Daniil
Feb 05, 2014, 11:02 AM
There should be a possibility to pass a parameter.

Example

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

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

<script runat="server">
protected string GetSomeHtml(string p)
{
return "test " + p;
}
</script>

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

<ext:Container runat="server" Html='<%# GetSomeHtml("some parameter") %>' AutoDataBind="true" />
</form>
</body>
</html>

Tactem
Feb 05, 2014, 1:57 PM
thank you, it's work