PDA

View Full Version : [CLOSED] xtemplate in codebehind with Data Loader



mirwais
Mar 20, 2013, 4:43 PM
Hi
can you tell me how can I reset a containers Tpl in codebehind and reload it, I am doing the following and somehow the tpl is not changed and that's why the data is not loaded correctly:(based on http://examples2.ext.net/#/Loaders/Data/Overview/)



<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">

protected void LoadPanel1( object sender, DirectEventArgs e)
{
Panel1.Tpl = new XTemplate
{
ID = "Template1",
Html = @"
<tpl for=""."" >
<p>{FirstName} - {LastName}</p>
</tpl>"
};

Panel1.LoadContent();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Loader - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<h1>Data Loader</h1>


<ext:Panel
ID="Panel1"
runat="server"
Height="200"
Width="200"
BodyPadding="10"
Title="Data from JSON web service">
<%--<Tpl runat="server">
<Html>
<tpl for=".">
<p>{FirstName} - {LastName}</p>
</tpl>
</Html>
</Tpl> --%>
<Loader Url="DataService.asmx/GetData" Mode="Data" AutoLoad="false">
<AjaxOptions Json="true" />
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
<ext:Button runat="server" Text="Load">
<DirectEvents>
<Click OnEvent="LoadPanel1" />
</DirectEvents>
</ext:Button>
</body>
</html>

Baidaly
Mar 21, 2013, 1:53 AM
Hello!

Try to use the following approach:



<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
protected void LoadPanel1( object sender, DirectEventArgs e)
{
var tpl = new XTemplate
{
ID = "Template1",
Html = @"
<tpl for=""."" >
<p>{FirstName} + {LastName}</p>
</tpl>"
};

tpl.Render();

Panel1.Reload();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="True" />

<ext:XTemplate runat="server" ID="Template1">
<Html>
<tpl for=".">
<p>{FirstName} - {LastName}</p>
</tpl>
</Html>
</ext:XTemplate>

<ext:Panel
ID="Panel1"
runat="server"
Height="200"
Width="200"
BodyPadding="10"
Title="Data from JSON web service">
<Loader Url="/DataService.asmx/GetData" Mode="Data">
<AjaxOptions Json="true" />
<LoadMask ShowMask="true" />
<Listeners>
<Load Handler="#{Template1}.overwrite(#{Panel1}.getContentTarget( ), Ext.decode(response.responseText).d);"></Load>
</Listeners>
</Loader>
</ext:Panel>
<ext:Button runat="server" Text="Load">
<DirectEvents>
<Click OnEvent="LoadPanel1" />
</DirectEvents>
</ext:Button>
</body>
</html>

Daniil
Mar 21, 2013, 8:18 AM
Here is a bit another approach: applying a template to the Panel instead of handling the Loader's Load event.

Example

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public List<object> Data
{
get
{
return new List<object>()
{
new {FirstName = "First 1", LastName = "Last 1"},
new {FirstName = "First 2", LastName = "Last 2"},
new {FirstName = "First 3", LastName = "Last 3"},
new {FirstName = "First 4", LastName = "Last 4"},
new {FirstName = "First 5", LastName = "Last 5"}
};
}
}

[DirectMethod]
public List<object> GetData(string parameters)
{
return this.Data;
}


protected void Load(object sender, DirectEventArgs e)
{
XTemplate tpl = new XTemplate
{
ID = "XTemplate1",
Html = @"<tpl for=""."" >
<p>{FirstName} - {LastName}</p>
</tpl>"
};

tpl.Render();

this.Panel1.Set("tpl", new JRawValue(tpl.ClientID));

this.Panel1.Reload();
}
</script>

<!DOCTYPE html>

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

<ext:Panel
ID="Panel1"
runat="server"
Height="200"
Width="200"
BodyPadding="10"
Title="Data from DirectMethod">
<Loader
runat="server"
DirectMethod="#{DirectMethods}.GetData"
Mode="Data"
AutoLoad="false">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>

<ext:Button runat="server" Text="Load" OnDirectClick="Load" />
</body>
</html>

mirwais
Mar 21, 2013, 9:58 AM
Hello and Thank you Baidaly. That works fine, however I had some issues when using it outside the example projects, where I have a masterpage.

So for someone using it inside a masterpage the Xtemplate in markup should be used with IdMode=static, otherwise it is not working:


<ext:XTemplate runat="server" ID="Template1" IDMode="Static"/>

mirwais
Mar 21, 2013, 10:02 AM
Hi Daniil,
I was busy with testing Baidali's version, but this approach seems cleaner, I'll try it too.
Thanks a lot both of you.

edited: Tested and there is no need for static IdMode as there is no xtemplate in the markup.

Daniil
Mar 21, 2013, 10:07 AM
We just committed the new SetTpl method to the SVN trunk. It makes the things even easier.

Example

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public List<object> Data
{
get
{
return new List<object>()
{
new {FirstName = "First 1", LastName = "Last 1"},
new {FirstName = "First 2", LastName = "Last 2"},
new {FirstName = "First 3", LastName = "Last 3"},
new {FirstName = "First 4", LastName = "Last 4"},
new {FirstName = "First 5", LastName = "Last 5"}
};
}
}

[DirectMethod]
public List<object> GetData(string parameters)
{
return this.Data;
}

protected void Load(object sender, DirectEventArgs e)
{
XTemplate tpl = new XTemplate
{
ID = "XTemplate1",
Html = @"<tpl for=""."" >
<p>{FirstName} - {LastName}</p>
</tpl>"
};

this.Panel1.SetTpl(tpl);
this.Panel1.Reload();
}
</script>

<!DOCTYPE html>

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

<ext:Panel
ID="Panel1"
runat="server"
Height="200"
Width="200"
BodyPadding="10"
Title="Data from DirectMethod">
<Loader
runat="server"
DirectMethod="#{DirectMethods}.GetData"
Mode="Data"
AutoLoad="false">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>

<ext:Button runat="server" Text="Load" OnDirectClick="Load" />
</body>
</html>