Welcome Guest Search | Active Topics | Sign In | Register

Update of formatted grid cells not working Options
DiscoverSoft
Posted: Monday, August 29, 2011 12:34:23 PM
Rank: Advanced Member
Groups: Member

Joined: 2/27/2010
Posts: 69
I'm doing some client-side validation and formatting on cells to show currency and percentage. When posting back, I have no problem with adding these, but they will not update. The cel.modified returns TRUE, but the value is always nothing if I've formatted the cell in javascript on the client side.

I've tried this using both a textboxcolumn and custom column with an html textbox. No luck. The cel.value always returns nothing when formatted on the client side. It works fine if I just leave it alone and don't use any client-side formatting -- and this is when updating only! Again, my formatting returns valid data in the cel.value when inserting it.

The client wants me to format these fields in real time, so please help.

Thanks.


eo_support
Posted: Monday, August 29, 2011 12:57:44 PM
Rank: Administration
Groups: Administration

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

The cell should give you whatever value you pass to it. If you pass nothing, then it will have nothing. For example, in a CustomColumn, if your end_end handler returns nothing, then the cell will have no value. The net effect would be like you "clear" the cell value.

So I would recommend you to check where in your code you actually give the cell a value. If that does not turn up anything, please try to post a small sample code and we will take a look.

Thanks!
DiscoverSoft
Posted: Monday, August 29, 2011 1:58:02 PM
Rank: Advanced Member
Groups: Member

Joined: 2/27/2010
Posts: 69
Thanks for the suggestion, but yes... I am returning a value from the javascript.

I've pasted sample code below. I'm trying to change the value for the FromAmount cell. Please remember that the insert section of this code behind works just fine. It returns the proper value for cel.value. The Update section sees the cel.modified as true, but returns 'nothing' for the cel.value. Now, if I don't format the cell with the ClientSideEndEdit function, it too works just fine. It appears that formatting the cell messes with the update, but not the insert.

Puzzled.


Code: HTML/ASPX
<%@ Register assembly="EO.Web, Version=9.0.15.2, Culture=neutral, PublicKeyToken=e92353a6bf73fffc" namespace="EO.Web" tagprefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<script type="text/javascript">
    function grid_itemcommand_handler(grid, itemIndex, colIndex, commandName) {
        // alert("commandName: " + commandName);
            if (commandName == "DeleteScale") {
                var c = window.confirm("Are you sure you want to delete this row?");
                if (c) grid.deleteItem(itemIndex);
                return (c);
            }

    }


    function formatCurrency(num) {

       num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num))
            num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10)
            cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' +
            num.substring(num.length - (4 * i + 3));
            
        return (((sign) ? '' : '-') + '$' + num + '.' + cents);
    }

    function onEnd_txtFromAmount(cell) {

        var txt = document.getElementById("txtFromAmount");
        var v = txt.value;
        if (v == null) v = 0;
        var retval = formatCurrency(v);
        return (retval);
        
    }

    function onBegin_txtFromAmount(cell) {
        var v = cell.getValue();
        if (v == null)
            v = 0;

        var txt = document.getElementById("txtFromAmount");
        txt.value = formatCurrency(v);
         
    }
    
</script>

</head>
<body>
    <form id="form1" runat="server">
    
        
<div  style="height:252px; width:870px; border-bottom-style:solid; border-width:thin">

<table style="width:100%;">
                        <tr>
                            <td>
                                <eo:Grid ID="GridSlidingScale" runat="server" BorderColor="#828790" BorderWidth="1px" 
                                    ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205" 
                                    ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24" 
                                    DataSourceID="SqlData_SlidingScales" FixedColumnCount="1" Font-Bold="False" 
                                    Font-Italic="False" Font-Names="Tahoma" Font-Overline="False" 
                                    Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False" 
                                    GridLineColor="240, 240, 240" GridLines="Both" 
                                    Height="179px" ItemHeight="19" KeyField="SlidingScaleID" Width="792px" 
                                    AllowNewItem="True" EnableKeyboardNavigation="True" 
                                    ClientSideOnItemCommand="grid_itemcommand_handler"
                                     
                                   >
                                    <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
                                    
                                    <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;white-space:nowrap;" />
                                        </eo:GridItemStyleSet>
                                        <eo:GridItemStyleSet StyleSetID="CurrencyStyle">
                                         <ItemStyle CssText="background-color: white; text-align: right" />
                                        </eo:GridItemStyleSet>
                                    </ItemStyles>
                                    <ColumnTemplates>
                                        <eo:TextBoxColumn>
                                            <TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
                                        </eo:TextBoxColumn>
                                        <eo:DateTimeColumn>
                                            <DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" 
                                                DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" 
                                                SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" 
                                                TitleRightArrowImageUrl="DefaultSubMenuIcon">
                                                <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                                                <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                                <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                                <PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                                                <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                                                <TitleArrowStyle CssText="cursor:hand" />
                                                <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                                                <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
                                                <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                                                <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                                <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
                                                <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                            </DatePicker>
                                        </eo:DateTimeColumn>
                                        <eo:MaskedEditColumn>
                                            <MaskedEdit ControlSkinID="None" 
                                                TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
                                            </MaskedEdit>
                                        </eo:MaskedEditColumn>
                                    </ColumnTemplates>
                                    <ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
                                    <Columns>
                                        <eo:EditCommandColumn>
                                        </eo:EditCommandColumn>
                                    <eo:StaticColumn DataField="GroupID" Visible="False" Width="10">
                                        </eo:StaticColumn>
                                        <eo:TextBoxColumn DataField="Tier" HeaderText="Tier" Width="40">
                                        </eo:TextBoxColumn>
                                        
                                        <eo:CustomColumn  DataField="FromAmount" DataFormat="{0:c}" 
                                            HeaderText="From Amount" 
                                            ClientSideBeginEdit="onBegin_txtFromAmount"
                                            ClientSideEndEdit="onEnd_txtFromAmount">
                                            <EditorTemplate>
                                                <input id="txtFromAmount" type="text" />
                                            </EditorTemplate>
                                        </eo:CustomColumn>
                                        
                                        <eo:ButtonColumn ButtonText="Delete" CommandName="DeleteScale" HeaderText="" 
                                            Width="80">
                                        </eo:ButtonColumn>
                                        
                                    </Columns>
                                    <ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
                                </eo:Grid>
                            </td>
                            <td style="vertical-align: top">
                                <asp:Label ID="Label51" runat="server" Font-Names="Verdana" 
                                    style="COLOR:#000000; FONT-SIZE:8pt;" Height="53px">Edit/Add/Delete<br />items on the grid<br />then click SAVE below.</asp:Label>
                                <br />
                                <br />
                                <asp:Button ID="btnSaveSlidingScale" runat="server" Text="SAVE TO SERVER" Height="27px" 
                                    Width="134px" />
                                <br />
                                <br />
                                <asp:Label ID="Label52" runat="server" Font-Names="Verdana" 
                                    style="COLOR:#000000; FONT-SIZE:8pt;" Width="127px" Height="44px" 
                                    Font-Italic="True">NOTHING changes on server until you click SAVE. TO SERVER</asp:Label>
                                <br />
                            </td>
                            <td>
                                 </td>
                        </tr>
                    </table>
    <asp:Label id="xOutput" 
                style="Z-INDEX: 110; color:Red; FONT-SIZE:8pt;  width: 880px; height: 74px;" 
                runat="server"></asp:Label>

     
    <br />
    <br />
                    </div>
    <asp:SqlDataSource ID="SqlData_SlidingScales" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ADPconnection %>" 
        ProviderName="<%$ ConnectionStrings:ADPconnection.ProviderName %>" 
        
        SelectCommand="SELECT * FROM [WebAppView_tblSlidingScales] WHERE ([GroupID] = ?)">
        <SelectParameters>
            <asp:Parameter DefaultValue="398" Name="GroupID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
    <br />
    <br />
    </form>
</body>
</html>


-- CODE BEHIND HERE ----------------------------------
Code: Visual Basic.NET
Private Shared databasespec As String = ""

    Protected Sub btnSaveSlidingScale_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSaveSlidingScale.Click

        databasespec = ConfigurationManager.ConnectionStrings("ADPconnection").ToString   'asp .net 2.0

        Dim itm As EO.Web.GridItem, cel As EO.Web.GridCell
        Dim subsql As String = String.Empty, sql As String = String.Empty

        Try

            'modified
            For Each itm In GridSlidingScale.ChangedItems
                subsql = "Update tblSlidingScales Set "
                sql = subsql

                For Each cel In itm.Cells
                    If cel.Modified Then
                        If Not cel.Value Is Nothing Then
                            If sql <> subsql Then sql = sql & ", "
                            Dim tstval As String = "NULL"
                            Dim dataCell As String = cel.Column.DataField
                            If Nz(cel.Value.ToString, "") <> "" Then tstval = cel.Value
                            If cel.Column.DataType = 5 And (Not IsDate(tstval) Or tstval = "12:00:00 AM") Then tstval = "NULL"
                            If cel.Column.DataField = "PercentDisplay" Then
                                dataCell = "Percentage"
                                Dim pVal As Double = CDbl(Trim(strValue(tstval, True)))
                                tstval = pVal.ToString
                            End If
                            sql = sql & dataCell & "=" & strValue(tstval)
                        End If

                    End If
                Next
                If sql <> subsql Then
                    ' execute the update query here
                    'System.Diagnostics.Debug.WriteLine(sql)
                    sql = sql & " WHERE ([SlidingScaleID]=" & itm.Key & ");"
                    Call ExecuteSQL(sql)
                End If
            Next



            'added
            Dim tlTest As Double = 0
            For Each itm In GridSlidingScale.AddedItems
                subsql = "INSERT Into tblSlidingScales (GroupID"
                sql = "Values (" & Session("CurrentGroupID")
                For Each cel In itm.Cells
                    If Not cel.Value Is Nothing Then
                        Dim tstval As String = "NULL"
                        Dim dataCell As String = cel.Column.DataField
                        If Nz(cel.Value.ToString, "") <> "" Then tstval = cel.Value
                        If cel.Column.DataType = 5 And (Not IsDate(tstval) Or tstval = "12:00:00 AM") Then tstval = "NULL"
                        If dataCell = "FromAmount" Or dataCell = "ThroughAmount" Then
                            tlTest = tlTest + CSng(Nz(strValue(cel.Value), 0))
                        End If
                        If cel.Column.DataField = "PercentDisplay" Then
                            dataCell = "Percentage"
                            Dim pVal As Double = CDbl(Trim(strValue(tstval, True)))
                            tstval = pVal.ToString
                        End If
                        subsql = subsql & ", " & dataCell
                        sql = sql & ", " & strValue(tstval)
                    End If
                Next
                subsql = subsql & ") "
                sql = subsql & sql & ");"
                If tlTest <> 0 Then Call ExecuteSQL(sql)
            Next



            For Each itm In GridSlidingScale.DeletedItems
                sql = "DELETE From tblSlidingScales WHERE ([SlidingScaleID]=" & itm.Key.ToString & ");"
                Call ExecuteSQL(sql)
            Next

            SqlData_SlidingScales.SelectCommand = "SELECT * FROM [WebAppView_tblSlidingScales] WHERE ([GroupID]=" & Session("CurrentGroupID") & ");"
            SqlData_SlidingScales.DataBind()
            GridSlidingScale.DataBind()


        Catch ex As Exception
            Call DisplayErrorMessage(xOutput, 23, ex.Message, sql)

        End Try



    End Sub


    Sub ExecuteSQL(ByVal strSQL As String)

        Try
            Dim cn As OleDbConnection, cmd As OleDbCommand
            cn = New OleDbConnection(databasespec)
            cn.Open()
            cmd = New OleDbCommand(strSQL, cn)
            cmd.ExecuteNonQuery()
            cn.Close()
        Catch ex As Exception
            Call DisplayErrorMessage(xOutput, 1, ex.Message, strSQL)
        End Try
    End Sub
eo_support
Posted: Monday, August 29, 2011 4:58:57 PM
Rank: Administration
Groups: Administration

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

We are not able to run your code as is because we do not have your database. Once we remove the data source it runs and work fine. So the Grid appears to be working fine. If you still believe it has to do with the Grid, you can try to isolate the problem into a test page that runs independently so that we can use that to reproduce the problem. As soon as we can see the problem, we should be able to tell you what's wrong.

Thanks
DiscoverSoft
Posted: Monday, August 29, 2011 7:30:02 PM
Rank: Advanced Member
Groups: Member

Joined: 2/27/2010
Posts: 69
Thanks so much for taking a look at this. I appreciate your feedback.

I too am able to see the updates when I disconnect the datasource. I can insert data, then come back, edit and re-post formatted changes, and your control works just fine.

But I simply cannot get the cel.value from a cell that's connected to a datasource and had its formatting revised via javascript on the client. The cel.value returns 'nothing'.

I've worked with this for several hours; tried it with the grid bound to both a sqlDataSource and a datareader. It just doesn't work.
DiscoverSoft
Posted: Tuesday, August 30, 2011 10:27:55 AM
Rank: Advanced Member
Groups: Member

Joined: 2/27/2010
Posts: 69
Solution Found!

I have discovered that when reformatting currency or percentage data on the client side, you must cast the data types to varchar in the datasource view. I could not get the grid control to see the changed/formatted value when these were sent as money or float in the datasource, but when I cast these as varchars, it now sees the updated values correctly. Then I simply strip out the formatting in the SQL statement that updates the actual field on server.

Maybe this will help someone else that comes across this.

Thanks for your time.
eo_support
Posted: Tuesday, August 30, 2011 11:13:10 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Thanks for the update. This makes sense.


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.