What's New?

[FIXED] [#839] [3.2.1] Strange behaviour with Image command column in Chrome

  1. #1
    Jul 14, 2015, 9:29 AM

    [FIXED] [#839] [3.2.1] Strange behaviour with Image command column in Chrome

    Hi,

    I found a strange behaviour with Image command column in chrome .

    Below is the reproducible scenario of the given sample code.

    Have a grid with enough data so that the page can be scrolled. When scroll appears, scroll down the page and click the command column of last record of the grid. It is expected to open a window but it simply scrolls up without opening it. But subsequent clicks works as expected.

    The above behaviour is only when the page is loaded for the first time or after a forced refresh.

    Also closing the window which is the result of the command column action , make the page scroll to the top.

    These are happening only in Chrome. We are usiung ext.net 3.1.

    Please help us to overcome this.

    Below is the code
    CSHTML 

    @model System.Collections.IEnumerable
@{
    ViewBag.Title = "Simple Array Grid With Local Paging and Remote Reloading - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section headtag
{
    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var onComboBoxSelect = function (combo) {
            var store = combo.up("gridpanel").getStore();
            
            store.pageSize = parseInt(combo.getValue(), 10); 
            store.reload();
        };
    </script>
<style>
    .x-grid-row-summary .x-grid-cell-inner {
        font-weight: bold;
        font-size: 14px;
        background-color: #f1f2f4;
    }

    .x-docked-top {
        border-bottom-width: 1px !important;
    }

    .x-grid-header-ct {
        border-bottom-color: #000000 !important;
    }

    .x-column-header-inner .x-column-header-text {
        white-space: normal;
    }

    .wrap .x-grid-cell-inner {
        white-space: normal;
    }
     .columnAlignLeft {
        text-align: left;
    }
</style>

}

@section example
{    
    <h1>Array Grid with Local Paging and Remote Reloading</h1>
        
    <p>Demonstrates how to create a grid from Array data with Local Paging and Remote Reloading.</p>
        
    <p>Notice <b>Last Updated</b> column is revised with a new server-side DateTime stamp when the GridPanel "Refresh" button is clicked.
    <br />This demonstrates that when the GridPanel is refreshed, the Data is requested again from the server via an AJAX request initiated by AjaxProxy, but the Paging and Sorting is done completely client-side in the browser.</p>
        
    @( Html.X().Window().ID("wnCommand").Width(500).Height(400).Hidden(true).Layout("Fit")
    .Items
    (
         Html.X().TextArea().ID("txtDes")
    )

)

    @(Html.X().GridPanel()
        .Title("Array Grid")
        .Width(1200)
        .Store(
            Html.X().Store()
                .PageSize(100)
                .DataSource(Model)
                .Model(
                    Html.X().Model()
                    .Fields(
                        new ModelField("company"),
                        new ModelField("price", ModelFieldType.Float),
                        new ModelField("change", ModelFieldType.Float),
                        new ModelField("pctChange", ModelFieldType.Float),
                        new ModelField("lastChange", ModelFieldType.Date)
                    )
                )
                .ServerProxy(
                    Html.X().AjaxProxy()
                        .Url(Url.Action("GetData"))
                )                
        )
        .ColumnModel(
            Html.X().RowNumbererColumn(),
            Html.X().Column().Text("Company").DataIndex("company").Flex(1).Cls("columnAlignLeft"),
            Html.X().Column().Text("Price").DataIndex("price").Width(75).Renderer(new Renderer{Format= RendererFormat.UsMoney}),
            Html.X().ImageCommandColumn().ID("descImgCmd").Text("").ToolTip("Task Description")
            .Width(20)
            .Commands
            (
               Html.X().ImageCommand().CommandName("Description").Icon(Icon.PageWhite).ToolTip(x => x.Text = "Enter Description")
              
            ).Listeners(ls=>ls.Command.Handler = "App.wnCommand.show();App.wnCommand.center();"),
            Html.X().Column().Text("Change").DataIndex("change").Width(75).Renderer("change").Cls("columnAlignLeft")
            .Align(Alignment.Right)
            .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
            Html.X().Column().Text("Change").DataIndex("pctChange").Width(75).Renderer("pctChange").Align(Alignment.Right)
                    .Cls("columnAlignLeft")
            .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
            Html.X().Column().Text("Change").DataIndex("pctChange").Width(75).Renderer("pctChange").Align(Alignment.Right)
                .Cls("columnAlignLeft")
        .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                    Html.X().Column().Text("Change").DataIndex("pctChange").Width(75).Renderer("pctChange").Align(Alignment.Right)
                .Cls("columnAlignLeft")
        .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                    Html.X().Column().Text("Change").DataIndex("pctChange").Width(75).Renderer("pctChange").Align(Alignment.Right)
                .Cls("columnAlignLeft")
        .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                 Html.X().Column().Text("Change").DataIndex("pctChange").Width(52).Renderer("pctChange").Align(Alignment.Right)
                            .Cls("columnAlignLeft")
                    .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                             Html.X().Column().Text("Change").DataIndex("pctChange").Width(52).Renderer("pctChange").Align(Alignment.Right)
                            .Cls("columnAlignLeft")
                    .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                             Html.X().Column().Text("Change").DataIndex("pctChange").Width(52).Renderer("pctChange").Align(Alignment.Right)
                            .Cls("columnAlignLeft")
                    .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
                             Html.X().Column().Text("Change").DataIndex("pctChange").Width(52).Renderer("pctChange").Align(Alignment.Right)
                            .Cls("columnAlignLeft")
                    .SummaryRenderer(new Renderer { Handler = "return value.toFixed(2)" }).SummaryType(SummaryType.Sum),
            Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Width(52).Format("H:mm:ss")
        )
        .SelectionModel(
            Html.X().RowSelectionModel().Mode(SelectionMode.Multi)
        )
                 .Features
                (
                        Html.X().Summary().ID("summary1")
                )
        .View(Html.X().GridView().StripeRows(true))
        .BottomBar(
            Html.X().PagingToolbar()
                .Items(
                    Html.X().Label("Page size:"),
                    Html.X().ToolbarSpacer(10),
                    Html.X().ComboBox()
                        .Width(80)
                        .Items("1", "2", "10", "100")
                        .SelectedItems("100")
                        .Listeners(l=>{
                            l.Select.Fn = "onComboBoxSelect";
                        })
                )                
                .Plugins(Html.X().ProgressBarPager())
        )        
    )
}
    Contoller 

    namespace Ext.Net.MVC.Examples.Areas.GridPanel_ArrayGrid.ArrayWithPaging.Controllers
{
    public class ArrayWithPagingController : Controller
    {
        public ActionResult Index()
        {
            return View(Companies.GetAllCompanies());
        }

        public ActionResult GetData()
        {
            return this.Store(Companies.GetAllCompanies());
        }
    }
}
    Model 
    namespace Ext.Net.MVC.Examples.Areas.GridPanel_ArrayGrid.ArrayWithPaging
{
    public class Companies
    {
        public static IEnumerable GetAllCompanies()
        {
            DateTime now = DateTime.Now;

            return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now },
                    new object[] { "A1", 45.45, 0.73, 1.63, now }, 
                    new object[] { "A10", 45.45, 0.73, 1.63, now },
                    new object[] { "A11", 45.45, 0.73, 1.63, now },
                    new object[] { "A12", 45.45, 0.73, 1.63, now },
                    new object[] { "A13", 45.45, 0.73, 1.63, now },
                    new object[] { "A14", 45.45, 0.73, 1.63, now },
                    new object[] { "A15", 45.45, 0.73, 1.63, now },
                    new object[] { "A16", 45.45, 0.73, 1.63, now },
                    new object[] { "A17", 45.45, 0.73, 1.63, now },
                    new object[] { "A18", 45.45, 0.73, 1.63, now },
                    new object[] { "A19", 45.45, 0.73, 1.63, now },
                    new object[] { "A111", 45.45, 0.73, 1.63, now },
                    new object[] { "A112", 45.45, 0.73, 1.63, now },
                    new object[] { "A113", 45.45, 0.73, 1.63, now },
                    new object[] { "A114", 45.45, 0.73, 1.63, now },
                    new object[] { "A115", 45.45, 0.73, 1.63, now },
                    new object[] { "A116", 45.45, 0.73, 1.63, now },
                    new object[] { "A117", 45.45, 0.73, 1.63, now },
                    new object[] { "A118", 45.45, 0.73, 1.63, now },
                    new object[] { "A119", 45.45, 0.73, 1.63, now },
                    new object[] { "A11111", 45.45, 0.73, 1.63, now }
                };
        }
    }
}
    Last edited by Daniil; Jul 20, 2015 at 1:16 PM. Reason: [FIXED] [#839] [3.2.1]
  2. #2
    Jul 14, 2015, 7:13 PM
    Hi @vmehta,

    Thank you for the report. We've reproduced it with both - the 3.1 release and the latest from SVN trunk.

    We will investigate and get back to you with an update.
  3. #3
    Jul 15, 2015, 7:09 AM
    Yes. Thanks.
  4. #4
    Jul 20, 2015, 1:16 PM
    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/839

    Fixed in the revision 6494 (trunk). It will go to the next release. Probably, 3.2.1. There is no time frame for that release.

    Please update from SVN trunk or use this patch:

    Fix
    Ext.grid.column.ImageCommand.override({
    processEvent: function (type, view, cell, recordIndex, cellIndex, e) {
        if ((type === "click") && e.getTarget(".row-imagecommand", 3)) {
            this.onClick(view, e, recordIndex, cellIndex);
            
            if (this.stopSelection !== false) {
                var sm = this.gridRef.getSelectionModel(),
                    locked = sm.locked;
                
                sm.locked = true;
                Ext.defer(function () {
                    sm.locked = locked;
                }, 1);
            }
        }

        return this.callSuper(arguments);
    }
});
  5. #5
    Jul 20, 2015, 1:28 PM
    Hey it works. Thanks !

Similar Threads

  1. how can keep ext.net grid panel image command icon in left of column.
    By Prasoon in forum 1.x Help
    Replies: 5
    Last Post: Sep 02, 2014, 1:15 PM
  2. [CLOSED] Center image command in column
    By jchau in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 07, 2013, 5:28 PM
  3. Strange behaviour in markup
    By Paul D in forum 1.x Help
    Replies: 1
    Last Post: Nov 09, 2010, 12:27 PM
  4. TextArea Text property, strange behaviour in chrome
    By Jurke in forum Bugs
    Replies: 7
    Last Post: May 09, 2009, 8:06 AM
  5. Gridpanel with combobox, strange behaviour
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 17, 2008, 5:59 AM

Posting Permissions