[CLOSED] Grid row selection manipulation and totals

  1. #1

    [CLOSED] Grid row selection manipulation and totals

    I need to have buttons for selecting - deselecting all rows and also inverting the rows selection for a grid panel.
    For the selected rows I need to pick up a value for one of the columns and display the sum in a text box.
    Do you have solutions/examples for these scenarios please?

    Thank you.
    Last edited by Daniil; Aug 05, 2014 at 8:09 AM. Reason: [CLOSED]
  2. #2
    Hi @registrator,

    I don't think we have such an example exactly, but many our GridPanels examples deals with selection.

    In any way, I would just recommend you to look at the API docs.
    http://docs.sencha.com/extjs/4.2.1/#...ction.RowModel

    I think there is everything required for your requirement.
  3. #3
    Would you be able to provide a function that, on grid row click, runs through the rows, checks if it is selected and gets the value from a particular column in that row?

    I would just need a starting point with this task.

    Thank you
  4. #4
    Please see the following sample

    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald's Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };
    
    
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataBind();
            }
        }
    
    
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
    
            public Company()
            {
            }
    
    
            public string Name { get;set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </script>
    
    
    <html>
    <head runat="server">
        <title>Row Selection Model</title>
        
        <script>
            function invertSelection(grid) {
                var sm = grid.getSelectionModel(),
                    selected = sm.getSelection();            
                
                sm.deselect(selected);
                sm.select(Ext.Array.difference(grid.store.getRange(), selected));
            }
    
    
            function sum(grid) {
                var sm = grid.getSelectionModel(),
                    selected = sm.getSelection(),
                    sum = 0;
    
    
                for (var i = 0, len = selected.length; i < len; i++) {
                    sum += selected[i].data.Price;
                }
    
    
                alert(sum);
            }
        </script>
    </head>
    <body>
         <form runat="server">
            <ext:ResourceManager runat="server" />
        
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Name">
                        <Fields>
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                            <ext:ModelField Name="Change" />
                            <ext:ModelField Name="PctChange" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                Title="Company List"
                Collapsible="true"
                Width="600"
                Height="350">
                <ColumnModel runat="server">
    	            <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="Name" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="Change" />
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange" />
    	            </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>           
                <Buttons>
                    <ext:Button runat="server" Text="Select all">
                        <Listeners>
                            <Click Handler="this.up('gridpanel').getSelectionModel().selectAll();" />
                        </Listeners>
                    </ext:Button>
    
    
                    <ext:Button runat="server" Text="Deselect all">
                        <Listeners>
                            <Click Handler="this.up('gridpanel').getSelectionModel().deselectAll();" />
                        </Listeners>
                    </ext:Button>
    
    
                    <ext:Button runat="server" Text="Invert selection">
                        <Listeners>
                            <Click Handler="invertSelection(this.up('gridpanel'));" />
                        </Listeners>
                    </ext:Button>
    
    
                    <ext:Button runat="server" Text="Sum of selected (price)">
                        <Listeners>
                            <Click Handler="sum(this.up('gridpanel'));" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Amazing.

    Thank you very much Vladimir.
  6. #6
    Hi Vladimir

    I have found a strange behavior in the grid. I have changed your Sum function to this:

            function sum(grid) {
                var sm = grid.getSelectionModel(),
                    selected = sm.getSelection(),
                    sum = 0;
                for (var i = 0, len = selected.length; i < len; i++) {
                    sum += selected[i].data.BALANCE;
                }
                Ext.getCmp('SelectField').setValue(sum)
            };
    And I have linked it to the gird like this:
                        .Listeners(l => 
                        {
                            l.ItemClick.Handler = "sum(App.GridCustomers);";
                        })
    But I have found that de-selecting rows does not work as it should. Still leaves them in the getSelectionModel(). Just selecting one and deselecting will show that.

    Thank you
  7. #7
    Please provide test sample reproduces the issue
  8. #8
    Combining your code and working in your MVC examples solution. Create new Area folder Customers.

    Controller and model in one:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net.MVC;
    using Ext.Net;
    
    namespace Accounts.Areas.Customers.Controllers
    {
        public class TestController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult GetData()
            {
                List<Company> model = new List<Company> 
                { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald's Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
                };
                return this.Store(model);
            }
        }
    
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
    
            public Company()
            {
            }
    
    
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    }
    View:

    @using Ext.Net;
    @using Ext.Net.MVC;
    @model List<Accounts.Areas.Customers.Controllers.Company>
    @{
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
        var X = Html.X();
    }
    @section headtag
    {
        <script>
            function invertSelection(grid) {
                var sm = grid.getSelectionModel(),
                    selected = sm.getSelection();
    
                sm.deselect(selected);
                sm.select(Ext.Array.difference(grid.store.getRange(), selected));
                sum(grid);
            };
    
    
            function sum(grid) {
                var sm = grid.getSelectionModel(),
                    selected = sm.getSelection(),
                    sum = 0;
                for (var i = 0, len = selected.length; i < len; i++) {
                    sum += selected[i].data.Price;
                }
                Ext.getCmp('SelectField').setValue(Ext.util.Format.number(sum, '000,000,000.00'));
            };
    
        </script>
    }
    @section example
    {
    
        @(X.Store()
            .ID("Store1")
            .Data(Model)
            .AutoLoad(true)
            .Proxy(
                Html.X().AjaxProxy()
                    .Url(Url.Action("GetData"))
                    .Reader(Html.X().JsonReader().Root("data"))
            )
            .Model(
                X.Model()
                .IDProperty("Name")
                .Fields(
                    X.ModelField()
                        .Name("Name")
                        .Type(ModelFieldType.String),
                    X.ModelField()
                        .Name("Price")
                        .Type(ModelFieldType.Float),
                    X.ModelField()
                        .Name("Change")
                        .Type(ModelFieldType.Float),
                    X.ModelField()
                        .Name("PctChange")
                        .Type(ModelFieldType.Float)
                )
            )
            .Sorters(X.DataSorter().Property("Name").Direction(Ext.Net.SortDirection.ASC))
            .Listeners( l => {
                l.Load.Handler = "sum(App.GridCompany);";
            })
    )
    
        @(X.Viewport()
            .Layout("Anchor")
            .Items(
                X.Panel()
                .AnchorVertical("100%")
                .AnchorHorizontal("100%")
                .Border(false)
                .Layout(LayoutType.Fit)
                .Items(
                    X.GridPanel()
                        .EnableColumnHide(false)
                        .ID("GridCompany")
                        .StoreID("Store1")
                        .ColumnModel(X.Column().Text("Name").DataIndex("Name").Flex(1),
                                    X.NumberColumn().Text("Price").DataIndex("Price").Flex(1),
                                    X.NumberColumn().Text("Change").DataIndex("Change").Flex(1),
                                    X.NumberColumn().Text("PctChange").DataIndex("PctChange").Flex(1)
                        )
                        .SelectionModel(Html.X().RowSelectionModel().Mode(SelectionMode.Simple))
                        .Listeners(l => 
                        {
                            l.ItemClick.Handler = "sum(App.GridCompany);";
                        })
                        .BottomBar(X.Toolbar()
                            .ClassicButtonStyle(true).Padding(5).Height(33).Dock(Dock.Bottom).Items(
                                X.TextField().ID("SelectField")
                            )
                        )
                )
            )
        )
    }
    Last edited by registrator; Aug 03, 2014 at 1:39 PM.
  9. #9
    Hi

    You need to use SelectionChange event instead ItemClick
  10. #10
    Yep, that works fine now.

    Thank you Vladimir.

Similar Threads

  1. Replies: 0
    Last Post: Apr 14, 2014, 11:34 AM
  2. Replies: 9
    Last Post: Apr 04, 2014, 9:10 PM
  3. Replies: 1
    Last Post: Oct 25, 2013, 3:25 AM
  4. Replies: 10
    Last Post: Apr 19, 2013, 3:16 PM
  5. [CLOSED] Dynamic content whitespace manipulation
    By conman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 29, 2009, 8:03 AM

Posting Permissions