[CLOSED] Over Row Commands Show/Hide on mobile

  1. #1

    [CLOSED] Over Row Commands Show/Hide on mobile

    Hello @all,
    When you directly start your dev-tools in chrome and emulate a mobile device (ex. Ipad) and click on a row the arrow icon/button is not showing. When you don't use the mobile view, you can see the arrow-button showing itself after a click or after a mousehover. How can I get my mobile View to show this button after a click? Thank you in advance.

    Index.cshtml
    @model System.Collections.IEnumerable
    
    @{
        ViewBag.Title = "Over Row Commands - 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 + "%");
            };
        </script>
    }
    
    @section example
    {
        <h1>Over Row Commands</h1>
    
        @(Html.X().GridPanel()
            .Title("Over Row Commands")
            .Width(700)
            .Height(420)
            .Store(Html.X().Store()
                .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, "M/d hh:mmtt")
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                Html.X().Column()
                    .Text("Company")
                    .DataIndex("company")
                    .Flex(1),
                Html.X().Column()
                    .Text("Price")
                    .DataIndex("price")
                    .Width(75)
                    .Renderer(RendererFormat.UsMoney),
                Html.X().Column()
                    .Text("Change")
                    .DataIndex("change")
                    .Width(75)
                    .Renderer("change"),
                Html.X().Column()
                    .Text("Change")
                    .DataIndex("pctChange")
                    .Width(75)
                    .Renderer("pctChange"),
                Html.X().DateColumn()
                    .Text("Last Updated")
                    .DataIndex("lastChange")
                    .Width(110),
                Html.X().CommandColumn()
                    .Width(115)
                    .OverOnly(true)
                    .Commands(cs => cs.Add(Html.X().GridCommand()
                        .Icon(Icon.ArrowDown)             
                        .ToolTip(tt => tt.Text = "Menu")
                        ))
                    .Listeners(ls => ls.Command.Handler = "Ext.Msg.alert(command, record.data.company);")
            )
        )
    }
    Over_CommandsModel.cs
    using System;
    using System.Collections;
    
    namespace Ext.Net.MVC.Examples.Areas.GridPanel_Commands.Over_Commands
    {
        public class Companies
        {
            public static IEnumerable GetAllCompanies()
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
                };
            }
        }
    }
    Over_CommandsController.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Ext.Net.MVC.Examples.Areas.GridPanel_Commands.Over_Commands.Controllers
    {
        public class Over_CommandsController : Controller
        {
            public ActionResult Index()
            {
                return View(Companies.GetAllCompanies());
            }
        }
    }
    Last edited by fabricio.murta; Mar 22, 2017 at 2:54 PM.
  2. #2
    Hello @nikolai!

    The OverOnly option is not a good idea (as well as any mouse hover-dependent behavior) if you want your application to be mobile friendly. So you have to either keep the buttons shown or switch to show them on focus. Rather, when the row is selected.

    Something like adding the following CSS styling:

    <style>
        .x-grid-item-selected .shown-on-select {
            visibility: inherit
        }
    
        .shown-on-select {
            visibility: hidden
        }
    </style>
    and then specifying .Cls("shown-on-select") to your command columns' buttons.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Thanks

    Thanks for the reply,

    I could fix my problem. I created a custom scenario with your code and it works very well. You can mark the thread as closed.

    kind regards
    Nikolay
  4. #4
    Hello Dan!

    Thanks for your feedback! It is really appreciated! And glad it helped you out on your issue!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  2. Show / hide password
    By Spamme in forum 2.x Help
    Replies: 3
    Last Post: Dec 20, 2013, 7:24 PM
  3. Show/Hide fieldset
    By JosefTrbusek in forum 2.x Help
    Replies: 2
    Last Post: Aug 03, 2012, 7:04 AM
  4. Replies: 1
    Last Post: Dec 28, 2011, 6:36 PM
  5. Show/Hide tabs
    By stone216 in forum 1.x Help
    Replies: 2
    Last Post: Oct 01, 2009, 8:21 PM

Tags for this Thread

Posting Permissions