PDA

View Full Version : [CLOSED] TemplateHtml : Sum colum values



matrixwebtech
Feb 28, 2015, 1:50 PM
Hi I need to sum of a column values end of the row,my code sample is bellow.


@model System.Collections.IEnumerable

@{
ViewBag.Title = "Row Expander Plugin with server side data";

}
<h1>Row Expander Plugin with server side data</h1>
@Html.X().ResourceManager()
@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Icon(Icon.Table)
.Width(600)
.Height(300)
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)
.Plugins(
Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Mode(LoadMode.Data)
.Url(Url.Action("GetData"))
.LoadMask(mask => mask.ShowMask = true)
.Params(
new
{
company = JRawValue.From("this.record.data['company']"),
index = JRawValue.From("this.grid.store.indexOf(this.record)")
}
)
)


.TemplateHtml(@<text>
<table style="border-bottom:solid 1px #000000;
border-top:solid 1px #000000;
border-left:solid 1px #000000;
border-right:solid 1px #000000;">

<tr>
<th>
Sl No.
</th>
<th>
Company
</th>
<th>
Row ?
</th>
<th>
Server Date
</th>
</tr>
<tpl for=".">
<tr>
<td align="center">
{#}
</td>
<td align="center">
{company}
</td>
<td align="center">
{index}
</td>
<td>
{time}
</td>
</tr>

</tpl>
<tr>
<td></td>
<td></td>
<td style="border-bottom:solid 1px #000000;" align="center"></td>
</tr>
</table> </text>)
)
)




public class RowExpanderPluginwithserversidedataController : Controller
{
//
// GET: /RowExpanderPluginwithserversidedata/

public ActionResult Index()
{
return View(RowExpanderCompanies.GetAllCompanies());
}

public ActionResult GetData(string company, int index)
{
return this.Json(new object[]
{
new
{
company = company + "0",
index = index,
time = DateTime.Now.ToLongTimeString()
},
new
{
company = company + "1",
index = index + 1,
time = DateTime.Now.ToLongTimeString()
},
new
{
company = company + "2",
index = index + 2,
time = DateTime.Now.ToLongTimeString()
}
});
}

}
public class RowExpanderCompanies
{
public static IEnumerable GetAllCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },

};
}
}

I want to sum Row No column's values.how do I do this.
also its help full if you can let me know how to set background color of TemplateHtml.

geoffrey.mcgill
Feb 28, 2015, 2:31 PM
Hello,

The XTemplate functionality is quite powerful, so there should be something in there that will help.

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.XTemplate

Maybe using some of the basic math functionality would work somehow. But probably a Template Function is the way to go. The function could be called on each row and a total stored in a variable.

Hope this helps.

matrixwebtech
Feb 28, 2015, 3:11 PM
can you please give me some Idea about syntax?how I inject function in to TemplateHtml.I see Template member functions at http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.XTemplate .but not understand how I implement this with ext.net

I search and get http://forums.ext.net/showthread.php?9853-CLOSED-How-would-I-do-this-%28based-on-DataView-example%29&p=39262&viewfull=1#post39262 ,

I not able to convert bellow code for MVC
<Template runat="server">
<Html>
<table>
<tpl for=".">
<tpl for="data">
<tr>
<td>{[ this.getData(values, parent.fields) ]}</td>
</tr>
</tpl>
</tpl>
</table>
</Html>
<Functions>
<ext:JFunction
Name="getData"
Handler="var i, s=''; for (i=0; i < fields.length; i++) {s += values[fields[i]] + ' ';} return s;"
Args="values,fields" />
</Functions>
</Template>


.Template(Html.X().XTemplate().Html("").Functions(new JFunction { Name="",Handler="",Args=""}))
this syntax working can you please help me with correct syntax?

fabricio.murta
Feb 28, 2015, 4:35 PM
Hello, @matrixwebtech!

Modifying your original code to this seemed to work for me:

Your GetData method becomes a container with sum (which is your desired column) and data (which is your former data, and you will refer it as data instead of . now)


public ActionResult GetData(string company, int index)
{
return this.Json(new
{
sum = 10,
data = new object[] {
new
{
company = company + "0",
index = index,
time = DateTime.Now.ToLongTimeString()
},
new
{
company = company + "1",
index = index + 1,
time = DateTime.Now.ToLongTimeString()
},
new
{
company = company + "2",
index = index + 2,
time = DateTime.Now.ToLongTimeString(),
sum = 10
}
}
});
}


And your template would become something like this:


.TemplateHtml(@<text>
<table style="border-bottom:solid 1px #000000;
border-top:solid 1px #000000;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
background-color:#DEECF7;">

<tr>
<th>
Sl No.
</th>
<th>
Company
</th>
<th>
Row ?
</th>
<th>
Server Date
</th>
</tr>
<tpl for="data">
<tr>
<td align="center">
{#}
</td>
<td align="center">
{company}
</td>
<td align="center">
{index}
</td>
<td>
{time}
</td>
</tr>

</tpl>
<tr>
<td></td>
<td>tot</td>
<td style="border-bottom:solid 1px #000000;" align="center">{sum}</td>
<td></td>
</tr>
</table> </text>)
)


I hope this is the expected result you want. You will have to make the summation on your GetData method for this to work, so you'll probably have to make a separate data object, then in the end assign the summation to the sum field and the full data object to the data field in the top level of the json reply structure.

Let us know if it still does not help solve your issue.

matrixwebtech
Feb 28, 2015, 5:44 PM
Hi thankx for reply and sample,but previously geoffrey said about template function and daniil's sample also demonstrate this thing with java script,asper my situation I also prefer client side .so its very good if I could do this with JFunction like daniil's sample.so can you please tell me how I do this with template function or JFunction

fabricio.murta
Feb 28, 2015, 10:21 PM
Hello, @matrixwebtech!

So, you want it from client side, here are some alternatives for you to try with. Remember, the examples explorer is there for your advantage.

Create this script tag:


<script type="text/javascript">
var cntFn = function (value) {
return value.length;
}

var sumFn = function (value) {
var result = 0;
Ext.Array.forEach(value, function (val) { result += val.index; });
return result;
}
</script>


And declare your template like this:


.TemplateHtml(@<text>
<table style="border-bottom:solid 1px #000000;
border-top:solid 1px #000000;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
background-color:#DEECF7;">

<tr>
<th>
Sl No.
</th>
<th>
Company
</th>
<th>
Row ?
</th>
<th>
Server Date
</th>
</tr>
<tpl for="data">
<tr>
<td align="center">
{#}
</td>
<td align="center">
{company}
</td>
<td align="center">
{index}
</td>
<td>
{time}
</td>
</tr>
<tpl if="xindex == xcount">
<tr>
<td></td>
<td>sum: {[sumFn(parent.data)]}</td>
<td style="border-bottom:solid 1px #000000;" align="center">tot: {[xcount]}</td>
<td style="border-bottom:solid 1px #000000;" align="center">totFn: {[cntFn(parent.data)]}</td>
</tr>
</tpl>
</tpl>
</table> </text>)


You may be wondering where are the XTemplate, Fn= Handler= stuff.

I share your thoughts. I believe the sample you found applies to another context so, I built an example demonstrating some use of the XTemplate in your provided code's context.

More example usages can be found on this example: XTemplate - Ext.NET Examples Explorer (http://examples.ext.net/#/Miscellaneous/XTemplate/Overview/).

Again, yes, this is in WebForms syntax and paradigm but, what you need from that is what's inside the XTemplates. Notice that they first build an template (disconnected from any grid or container) and then binds a renderer event to imbue the data to the panel. That's just a different scenario or context. In your case, you're using rowExpander plugin to call the template, and you feed the template to it using the .TemplateHtml(). Of course, there might be several other ways to achieve the exact same result. I just thought this as the closest to your sample and needs.

I hope this helps!