Welcome Guest Search | Active Topics | Sign In | Register

Few problems on Grid with MaskEdit cells Options
Peter249
Posted: Wednesday, July 17, 2013 9:19:36 AM
Rank: Advanced Member
Groups: Member

Joined: 5/15/2013
Posts: 34
Hi,

I've got a grid and have MaskededitCoulmns and have several problems.

EP.Web version 11.0.12.2
VS2012 update 3
ASP.Net 4.0

1. When the cell goes into edit mode the right 2 char entered to not show. Buts show when not in edit mode.

2. MaskEdit is numeric right justified in edit -- no edit cell displays left justified.

3. Last column has width -1 -- when enough rows are added and the vertical scrollbar displays - the scrollbar covers the last couple chars of the last column - I think the last column is not resizing properly when the scrollbar displays.

4. The AllowNewItem keeps getting changed to false each time I re-configure the properities in VS2012 -- using the EO.Web Grid Builder (V10.0.12). I need to reset to true each time I change things in this tool.

5. Also when in the Grid Builder you click on one of the property buttons (say CouumnHeaderTextStyle) VS2012 displays a Error Mesasge Box that says "Parameter count mismatch".

6. Is there a way to have a cell go into edit mode from a keypress as well so when the user is editing the cells and navigates to the next one he/she could just start typing in the cell to go into edit mode rather then having to click it and then enter the keystrokes. -- this is Excel style editing of course....

Code: HTML/ASPX
<eo:Grid ID="gCalibration" runat="server" Height="150px" Width="200px" BorderColor="#C7D1DF" BorderWidth="1px" ColumnHeaderAscImage="00050303"
                        ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" FixedColumnCount="1"
                        Font-Bold="False" Font-Italic="False" Font-Names="Arial" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
                        ItemHeight="19" KeyField="KIAS" FullRowMode="False" AllowNewItem="True" EnableKeyboardNavigation="True" >
                        <ItemStyles>
                            <eo:GridItemStyleSet>
                                <ItemStyle CssText="background-color: white" />
                                <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
                                <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
                                <CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
                            </eo:GridItemStyleSet>
                        </ItemStyles>
                        <ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
                        <Columns>
                            <eo:RowNumberColumn Width="30"></eo:RowNumberColumn>
                            <eo:MaskedEditColumn HeaderText="KIAS" DataField="KIAS" DataType="Integer" Width="50">
                                <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber" Width="50">
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                            </eo:MaskedEditColumn>
                            <eo:MaskedEditColumn DataField="KCAS" HeaderText="KCAS" DataType="Integer" Width="50">
                                <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber" Width="50">
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                            </eo:MaskedEditColumn>
                            <eo:DeleteCommandColumn Width="-1">
                            </eo:DeleteCommandColumn>
                        </Columns>
                        <ColumnTemplates>
                            <eo:MaskedEditColumn DataType="Integer" Width="50">
                                <MaskedEdit CssClass="eoMaskNumber" ControlSkinID="None" Width="50">
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                            </eo:MaskedEditColumn>
                        </ColumnTemplates>
                        <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
                    </eo:Grid>


Code: CSS
.eoMaskNumber
{
    text-align: right;
    font-family: Courier New;
}


Thanks
eo_support
Posted: Wednesday, July 17, 2013 5:19:37 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

Thanks for the detailed information. As to your questions:

1. Try increase your column width and DO NOT set the MaskedEdit's Width. Only set the column's Width. That way the column will automatically resize the MaskedEdit to fit the column width;

2. You can set the GridColumn's CellStyle to include "text-align:right";

3. We tested and this seems to be working fine. The column only take what width left after the scroll bar. However if there isn't enough space, the text will be cut off --- that does not mean the column is taking a larger width;

4. This is a bug when you use Grid Builder to edit that property. Try to use VS's Property Window to edit that property and the changes should stay;

5. This is a bug. We will fix this in our next build;

6. It's possible but it would be easier if you trigger the cell edit mode when the cell receives focus. It will be something like this:

Code: JavaScript
function on_grid_cell_selected()
{
    var grid = eo_GetObject("gCalibration");
    var selectedCell = grid.getSelectedCell();
    var itemIndex = selectedCell.getItemIndex();
    var colIndex = selectedCell.getColIndex();
    setTimeout(function()
        {
            grid.editCell(itemIndex, colIndex, true);
        }, 10);
}


Code: HTML/ASPX
<eo:Grid ClientSideOnCellSelected="on_grid_cell_selected" ...>
    ....
</eo:Grid>


Hope this helps. Please feel free to let us know if there is anything else.

Thanks!
Peter249
Posted: Friday, July 19, 2013 9:11:11 AM
Rank: Advanced Member
Groups: Member

Joined: 5/15/2013
Posts: 34
Hi,

OK on 2, 4, 5

Thanks for the snippet of code for 6 -- I can work with that....

Items 1 and 3 seem to be my issues.

I have taken off the widths on the MaskEdit and still no joy.

If you swap the KCAS and delete columns (KCAS is now the last) and add rows until the scroll bar shows -- it will show that the data in the cell does not get moved over the width of the scrollbar.

This might have something to do with the "text-align:right;" on the cells column and the MaskEdit.

Anyway, I tried all that I can so I need some more help to find out why this is not working as expected.

I'm not sure if the number of items in the <Columns> and <ColumnTemplates> sections need to match -- the documentation on this is weak.

Here is my current grid configuration.

Code: HTML/ASPX
<eo:Grid ID="gCalibration" runat="server" Height="150px" Width="200px" BorderColor="#C7D1DF" BorderWidth="1px" ColumnHeaderAscImage="00050303"
                        ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" FixedColumnCount="1"
                        Font-Bold="False" Font-Italic="False" Font-Names="Arial" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
                        ItemHeight="19" KeyField="KIAS" FullRowMode="False" AllowNewItem="True" EnableKeyboardNavigation="True" >
                        <ItemStyles>
                            <eo:GridItemStyleSet>
                                <ItemStyle CssText="background-color: white" />
                                <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
                                <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
                                <CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
                            </eo:GridItemStyleSet>
                        </ItemStyles>
                        <ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
                        <Columns>
                            <eo:RowNumberColumn Width="30"></eo:RowNumberColumn>
                            <eo:MaskedEditColumn HeaderText="KIAS" DataField="KIAS" DataType="Integer" Width="50">
                                <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber">
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                                <CellStyle CssText="padding-right:8px;padding-top:2px; color:#336699;white-space:nowrap;text-align:right;"  />
                            </eo:MaskedEditColumn>
                            <eo:MaskedEditColumn DataField="KCAS" HeaderText="KCAS" DataType="Integer" Width="50">
                                <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber">
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                                <CellStyle CssText="padding-right:8px;padding-top:2px; color:#336699;white-space:nowrap;text-align:right;"  />
                            </eo:MaskedEditColumn>
                            <eo:DeleteCommandColumn Width="-1">
                            </eo:DeleteCommandColumn>
                        </Columns>
                        <ColumnTemplates>
                             <eo:RowNumberColumn></eo:RowNumberColumn>
                            <eo:MaskedEditColumn DataType="Integer">
                                <MaskedEdit CssClass="eoMaskNumber" ControlSkinID="None" >
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                            </eo:MaskedEditColumn>
                            <eo:MaskedEditColumn DataType="Integer">
                                <MaskedEdit CssClass="eoMaskNumber" ControlSkinID="None" >
                                    <eo:MaskedEditSegment Mask="990" SegmentType="Number" />
                                </MaskedEdit>
                            </eo:MaskedEditColumn>
                              <eo:DeleteCommandColumn></eo:DeleteCommandColumn>
                      </ColumnTemplates>
                        <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
                    </eo:Grid>

eo_support
Posted: Friday, July 19, 2013 1:51:11 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

We looked into it again. The root of the problem for #1 is the segment of your MaskedEdit is "Number". Mask property only works when the segment type is "Mask". When your segment type is "Number", the length of the segment is determined by the segment's MaxValue. The default MaxValue is "999999999", which is 9 digits. As such the MaskedEdit will holds 9 digits. So if you have one a single digit, then it will contain 8 space + 1 digit, the 8 spaces will push the digits to the right.

Again, we do not see any problem on #3. You can try to fix #1 and then see if it still occurs. If it still occurs, please provide a full test page that we can use to demonstrate the problem.

Thanks!
eo_support
Posted: Friday, July 19, 2013 6:06:41 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

We have posted a new build that should fix #4 and #5. You can download it from our download page.

Thanks!
Peter249
Posted: Monday, July 22, 2013 8:47:06 AM
Rank: Advanced Member
Groups: Member

Joined: 5/15/2013
Posts: 34
Thanks for the insight of the MaskEdit control. I use this control all over the place and this tidbit of information helps me out greatly. MaskEdit in Grid works great now.

Attached is a test page you can use to reproduce the scrollbar issue.

A thing I noticed is that if the grid is first displayed which requires the scrollbar; adding and deleting rows works fine. It seems when only a few rows are in the grid when it is first showen, the scrollbar is hidden, adding additional rows until the scrollbar need to show the problem appears.

I'm using IE10, ASP.NET 4.0 and EO.Web 11.0.18.2 versions now.

In this test page you can see it by adding an additional row.

Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridTest.aspx.cs" Inherits="FlightPlanner.Web.GridTest" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Grid Test Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <eo:Grid ID="gCalibration" runat="server" Height="150px" Width="200px" BorderColor="#C7D1DF" BorderWidth="1px" ColumnHeaderAscImage="00050303"
                ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" FixedColumnCount="1"
                Font-Bold="False" Font-Italic="False" Font-Names="Arial" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
                ItemHeight="19" KeyField="KIAS" FullRowMode="False" AllowNewItem="True" EnableKeyboardNavigation="True">
                <ItemStyles>
                    <eo:GridItemStyleSet>
                        <ItemStyle CssText="background-color: white" />
                        <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
                        <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
                        <CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
                    </eo:GridItemStyleSet>
                </ItemStyles>
                <ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
                <Columns>
                    <eo:RowNumberColumn Width="30"></eo:RowNumberColumn>
                     <eo:DeleteCommandColumn Width="50">
                    </eo:DeleteCommandColumn>
                   <eo:MaskedEditColumn HeaderText="KIAS" DataField="KIAS" DataType="Integer" Width="50">
                        <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber">
                            <eo:MaskedEditSegment Mask="990" SegmentType="Number" MinValue="0" MaxValue="999" Decimals="0" />
                        </MaskedEdit>
                        <CellStyle CssText="padding-right:8px;padding-top:2px; color:#336699;white-space:nowrap;text-align:right;" />
                    </eo:MaskedEditColumn>
                    <eo:MaskedEditColumn DataField="KCAS" HeaderText="KCAS" DataType="Integer" Width="-1">
                        <MaskedEdit ControlSkinID="None" CssClass="eoMaskNumber">
                            <eo:MaskedEditSegment Mask="990" SegmentType="Number" MinValue="0" MaxValue="999" Decimals="0" />
                        </MaskedEdit>
                        <CellStyle CssText="padding-right:8px;padding-top:2px; color:#336699;white-space:nowrap;text-align:right;" />
                    </eo:MaskedEditColumn>
                </Columns>
                <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
            </eo:Grid>
        </div>
    </form>
</body>
</html>


Code: C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace FlightPlanner.Web
{
   public class DummyData
   {
        public Int16 KIAS { get; set; }
        public Int16 KCAS { get; set; }
   } 
 
   public partial class GridTest : System.Web.UI.Page
   {
      protected void Page_Load (object sender, EventArgs e)
      {
          if (!Page.IsPostBack)
          {   List<DummyData> dd = new List<DummyData>();
               dd.Add (new DummyData() { KIAS=50, KCAS=56 });
               dd.Add (new DummyData() { KIAS=60, KCAS=62 });
               dd.Add (new DummyData() { KIAS=70, KCAS=78 });
               dd.Add (new DummyData() { KIAS=80, KCAS=87 });
               dd.Add (new DummyData() { KIAS=90, KCAS=97 });
               //dd.Add (new DummyData() { KIAS=100, KCAS=107 });
               //dd.Add (new DummyData() { KIAS=120, KCAS=117 });
               //dd.Add (new DummyData() { KIAS=130, KCAS=127 });
               gCalibration.DataSource = dd;
               gCalibration.DataBind();
               }
          }
      }
}



eo_support
Posted: Monday, July 22, 2013 5:09:55 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Thanks for the additional information. We have reproduced the problem. It will be fixed in our next build.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.