[CLOSED] MultiHeader for Razor view

  1. #1

    [CLOSED] MultiHeader for Razor view

    Hi,

    Does the Razor view support MultiHeader for GridPanel?
    We didn't see the example in the MVC demo.

    Thanks.
    Last edited by Daniil; Jan 08, 2013 at 8:36 AM. Reason: [CLOSED]
  2. #2
    Yes, MultiHeader is supported under Razor
    I will prepare sample for you soon
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Here is the sample

    Controller
    public class FilterController : Controller
        {      
            public ActionResult Index()
            {
                return View(new object[] {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "01/01/2008" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "02/01/2008" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "03/01/2008" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "10/01/2008" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "09/01/2008" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "01/03/2008" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "01/04/2008" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "01/01/2008" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "02/02/2008" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "03/05/2008" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "01/01/2008" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "01/01/2008" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "01/01/2008" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "01/01/2008" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "01/01/2008" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "01/01/2008" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "01/01/2008" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "01/01/2008" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "01/01/2008" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "01/01/2008" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "01/01/2008" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "01/01/2008" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "01/01/2008" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "01/01/2008" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "01/01/2008" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "01/01/2008" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "01/01/2008" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "01/01/2008" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "01/01/2008" }
                });
            }
    
    
        }
    View
    @model IEnumerable<object>
    @{
        ViewBag.Title = "GridPanel with MultiHeader Row Filters - Ext.NET Examples";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
    }
    
    
    @section headtag
    {
        <script>
            var applyFilter = function (field) {                
                    var store = App.GridPanel1.getStore();
                    store.filterBy(getRecordFilter());                                                
                };
                 
                var clearFilter = function () {
                    App.ComboBox1.reset();
                    App.PriceFilter.reset();
                     
                    App.Store1.clearFilter();
                }
     
                var filterString = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
                    
                    if (typeof val != "string") {
                        return value.length == 0;
                    }
                    
                    return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                };
     
                var filterDate = function (value, dataIndex, record) {
                    var val = Ext.Date.clearTime(record.get(dataIndex), true).getTime();
     
                    if (!Ext.isEmpty(value, false) && val != Ext.Date.clearTime(value, true).getTime()) {
                        return false;
                    }
                    return true;
                };
     
                var filterNumber = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);                
     
                    if (!Ext.isEmpty(value, false) && val != value) {
                        return false;
                    }
                    
                    return true;
                };
     
                var getRecordFilter = function () {
                    var f = [];
     
                    f.push({
                        filter: function (record) {                         
                            return filterString(App.ComboBox1.getValue()||"", "company", record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(App.PriceFilter.getValue(), "price", record);
                        }
                    });
    
    
                    var len = f.length;
                     
                    return function (record) {
                        for (var i = 0; i < len; i++) {
                            if (!f[i].filter(record)) {
                                return false;
                            }
                        }
                        return true;
                    };
                };
        </script>
    
    
    
    
    }
    
    
    @section example
    {
        @(
     Html.X().GridPanel()
                .ID("GridPanel1")
                .Title("Filter Grid")
                .Width(600)
                .Height(350)
                .ResizableConfig(new Resizer { Handles = ResizeHandle.East })
                .Store(
                    Html.X().Store()
                        .ID("Store1")
                        .DataSource(Model)
                        .Model(Html.X().Model()
                            .Fields(
                                Html.X().ModelField().Name("company"),
                                Html.X().ModelField().Name("price").Type(ModelFieldType.Float),
                                Html.X().ModelField().Name("change").Type(ModelFieldType.Float),
                                Html.X().ModelField().Name("pctChange").Type(ModelFieldType.Float),
                                Html.X().ModelField().Name("lastChange").Type(ModelFieldType.Date).DateFormat("MM/dd/yyyy")
                            )
                        )
                )
                .ColumnModel(
                    Html.X().Column()
                        .Text("Company")
                        .DataIndex("company")
                        .Flex(1)
                        .HeaderItems(items =>
                        {
                            items.Add(Html.X().ComboBox()
                                .ID("ComboBox1")
                                .Icon(Icon.Magnifier)
                                .TriggerAction(TriggerAction.All)
                                .QueryMode(DataLoadMode.Local)
                                .DisplayField("company")
                                .ValueField("company")
                                .Store(
                                    Html.X().Store()
                                        .DataSource(Model)
                                        .Model(Html.X().Model()
                                            .Fields(
                                                Html.X().ModelField().Name("company")
                                            )
                                        )
                                )
                                .Listeners(l =>
                                {
                                    l.Select.Handler = "applyFilter(this);";
                                })
                            );
                        }),
    
    
                    Html.X().Column()
                        .Text("Price")
                        .DataIndex("price")
                        .Width(75)
                        .Renderer(RendererFormat.UsMoney)
                        .HeaderItems(items => {
                            items.Add(
                                Html.X().TextField()
                                    .ID("PriceFilter")
                                    .EnableKeyEvents(true)
                                    .Listeners(l => {
                                        l.KeyUp.Handler = "applyFilter(this);";
                                        l.KeyUp.Buffer = 250;
                                    })
                            );
                        })
              )
        )
    }
    Vladimir Shcheglov
    Sr. Developer
  4. #4
    Great, thanks!

Similar Threads

  1. [CLOSED] AutoLoad(true) in Razor view
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 14, 2012, 7:39 PM
  2. [CLOSED] Calendar View in Razor
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 05, 2012, 9:04 AM
  3. [CLOSED] [Razor] Using Model in MVC View
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 02, 2012, 4:38 PM
  4. [CLOSED] Razor view migration
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 24, 2012, 1:48 PM
  5. Replies: 2
    Last Post: Jan 16, 2012, 9:53 AM

Tags for this Thread

Posting Permissions