Mar 06, 2018, 10:58 AM
[CLOSED] Higlighting of changed controls
Hello
I highlight using style anthing what user changed on the page.
it works fine
the style is like
is there any workaround?
somehow instruct the pager to reset its value immediately when changed?
sample code is taken from https://examples4.ext.net/#/GridPane...rayWithPaging/
with very little modifications
thanks
Jiri
I highlight using style anthing what user changed on the page.
it works fine
the style is like
.alaHiglightEnabledRoot .x-form-dirty.x-form-type-checkbox, .alaHiglightEnabledRoot .x-form-dirty .x-form-text, .alaHiglightEnabledRoot .x-form-dirty.x-form-type-radio, .alaHiglightEnabledRoot .x-form-dirty textarea {
background: darkgray;
}
the root element on the page has <form runat="server" class="alaHiglightEnabledRoot">
Hovewer I have a problem with grid pager, it higlights the page number as well, even it's not a (UI) field that user editis there any workaround?
somehow instruct the pager to reset its value immediately when changed?
sample code is taken from https://examples4.ext.net/#/GridPane...rayWithPaging/
with very little modifications
thanks
Jiri
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}
private void BindData()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.Data;
store.DataBind();
}
private object[] Data
{
get
{
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 }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.alaHiglightEnabledRoot .x-form-dirty.x-form-type-checkbox, .alaHiglightEnabledRoot .x-form-dirty .x-form-text, .alaHiglightEnabledRoot .x-form-dirty.x-form-type-radio, .alaHiglightEnabledRoot .x-form-dirty textarea {
background: darkgray;
}
</style>
<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>
<ext:XScript runat="server">
<script type="text/javascript">
var handlePageSizeSelect = function (item, records) {
var curPageSize = #{GridPanel1}.store.pageSize,
wantedPageSize = parseInt(item.getValue(), 10);
if (wantedPageSize != curPageSize) {
#{GridPanel1}.store.pageSize = wantedPageSize;
#{GridPanel1}.store.reload();
}
}
</script>
</ext:XScript>
</head>
<body>
<form runat="server" class="alaHiglightEnabledRoot">
<ext:ResourceManager runat="server" />
<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 a DirectEvent, but the Paging and Sorting is done completely client-side in the browser.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="800">
<Store>
<ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="35" />
<ext:Column runat="server" Text="Company" DataIndex="company" 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">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" Width="125" DataIndex="lastChange" Format="H:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
<BottomBar>
<ext:PagingToolbar runat="server">
<Items>
<ext:Label runat="server" Text="Page size:" />
<ext:ToolbarSpacer runat="server" Width="10" />
<ext:ComboBox runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>
<Listeners>
<Select Fn="handlePageSizeSelect" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
<ext:Button runat="server" Text="Print current grid page" Icon="Printer" Handler="this.up('grid').print({currentPageOnly : true});" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by fabricio.murta; Apr 27, 2018 at 2:39 PM.