[CLOSED] TemplateHtml : Sum colum values

  1. #1

    [CLOSED] TemplateHtml : Sum colum values

    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.
    Last edited by Daniil; Mar 10, 2015 at 11:25 AM. Reason: [CLOSED]
  2. #2
    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.../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.
    Geoffrey McGill
    Founder
  3. #3
    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.../Ext.XTemplate .but not understand how I implement this with ext.net

    I search and get http://forums.ext.net/showthread.php...ll=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?
    Last edited by matrixwebtech; Feb 28, 2015 at 3:55 PM.
  4. #4
    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.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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
  6. #6
    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.

    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!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Loop through TemplateHtml in RowExpander
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 21, 2014, 9:10 AM
  2. [CLOSED] How to redim colum in GridPanel
    By egvt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 31, 2012, 5:30 PM
  3. Colum editor Focus
    By angelolsantos in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2010, 8:33 AM
  4. Row and Colum Layout in same page
    By Sameera in forum 1.x Help
    Replies: 2
    Last Post: Jan 13, 2010, 1:27 PM
  5. Colum renderer
    By Filip Beunens in forum 1.x Help
    Replies: 6
    Last Post: Mar 31, 2009, 1:41 PM

Tags for this Thread

Posting Permissions