PDA

View Full Version : [CLOSED] Over Row Commands Show/Hide on mobile



nikolay
Mar 15, 2017, 4:18 PM
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());
}
}
}

fabricio.murta
Mar 16, 2017, 4:55 PM
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!

nikolay
Mar 22, 2017, 9:43 AM
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

fabricio.murta
Mar 22, 2017, 3:54 PM
Hello Dan!

Thanks for your feedback! It is really appreciated! And glad it helped you out on your issue!