Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Populate grid from JS

Populate grid from JS Options
Previous Topic · Next Topic
Christiano
Posted: Friday, January 16, 2009 3:39:39 AM
Rank: Advanced Member
Groups: Member

Joined: 11/12/2008
Posts: 42
Can I add items to a grid from client-side???

Couldn't find any example inthe Samplos nor documentation...
Back to top
 
eo_support
Posted: Friday, January 16, 2009 4:37:17 AM
Rank: Administration
Groups: Administration

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

Here is a sample demonstrating how to add a new item with JavaScript:

http://www.essentialobjects.com/Demo/Default.aspx?path=Grid\_i1\_i20

Once you have the new item, you can call other methods set as this method to set the initial value:

http://www.essentialobjects.com/ViewDoc.aspx?t=JSDoc.Public.GridCell.setValue.html

Hope this helps.

Thanks!
Back to top
 
Christiano
Posted: Friday, January 16, 2009 5:35:52 AM
Rank: Advanced Member
Groups: Member

Joined: 11/12/2008
Posts: 42
i couldn't get this to work properly, although, i came to this code:

Code:
grid.getItem(i).getCell(1).setValue("col1");
            grid.getItem(i).getCell(2).setValue("col2");
            grid.getItem(i).getCell(3).setValue("col3");


which does what I need, that is get the value from 3 textboxes and place them in the grid.
but, it doesn't "close" the GridItem... How can I do It???

And, how can I avoid user from typing in the grid?
Back to top
 
eo_support
Posted: Friday, January 16, 2009 6:46:16 AM
Rank: Administration
Groups: Administration

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

I am not sure what you meant by "close GridItem". Do you mean to let the grid item to leave exit mode? If that's the case, you should check the above sample again. It has all the code you need to add a new item, put an item into edit mode and then bring that item out of edit mode.

You avoid user from typing in the Grid by using StaticColumn.

Thanks!
Back to top
 
Christiano
Posted: Friday, January 16, 2009 8:28:27 AM
Rank: Advanced Member
Groups: Member

Joined: 11/12/2008
Posts: 42
How should my code look? I'm doing some mistake that make it not work...

But it keeps updating only the first GridItem. Doesn't increment the getItemCount()
I don't know if it's needed, but i've placed the grid inside a callback panel

the button that calls the JS function is a HTML button. No server-side coding at all.

this is my code now:
Code:

            var Lat = document.getElementById("<%=txtCPLa.ClientID %>").value;   // Textbox 1
            var Lon = document.getElementById("<%=txtCPLo.ClientID %>").value;  // Textbox 2
           
            var grid = eo_GetObject("<%=Grid1.ClientID%>");
            var i = grid.getItemCount();
           
            grid.editCell(i,0)
                grid.getItem(i).getCell(0).setValue(parseInt(i)+1);
                grid.getItem(i).getCell(1).setValue(Lat);
                grid.getItem(i).getCell(2).setValue(Lon);
            grid.editItem(-1,true);
           


Code:

<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px" Triggers="{ControlID:Grid1;Parameter:}"
            Width="200px">
       
        <eo:Grid ID="Grid1" runat="server" BorderColor="Black" BorderWidth="1px" ColumnHeaderAscImage="00050403"
            ColumnHeaderDescImage="00050404" ColumnHeaderDividerImage="00050402" ColumnHeaderDividerOffset="6"
            ColumnHeaderHeight="18" FixedColumnCount="1" Font-Bold="False" Font-Italic="False"
            Font-Names="Verdana" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False"
            Font-Underline="False" GridLineColor="240, 240, 240" GridLines="Both" Height="200px"
            ItemHeight="18" ScrollBars="Vertical" Width="200px" AllowNewItem="True" FullRowMode="False" >
            <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
            <ItemStyles>
                <eo:GridItemStyleSet>
                    <ItemStyle CssText="background-color: white" />
                    <CellStyle CssText="padding-left:8px;padding-top:2px; color:#black;white-space:nowrap;" />
                </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>
            <Columns>
                <eo:StaticColumn Width="30">
                </eo:StaticColumn>
                <eo:StaticColumn HeaderText="Lat">
                </eo:StaticColumn>
                <eo:StaticColumn HeaderText="Lon">
                </eo:StaticColumn>
            </Columns>
            <ColumnHeaderStyle CssText="background-image:url('00050401');padding-left:8px;padding-top:2px;" />
        </eo:Grid>
        </eo:CallbackPanel>



Tks...
Back to top
 
eo_support
Posted: Friday, January 16, 2009 1:14:25 PM
Rank: Administration
Groups: Administration

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

We looked into it and noticed that editCell/editItem pair does not work when the cell is not editable. We will look into it and see if we can implement an addItem method directly.

Thanks!
Back to top
 
eo_support
Posted: Sunday, January 18, 2009 2:24:43 PM
Rank: Administration
Groups: Administration

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

We have posted a new build that implemented addItem on the client side. Please see your private message for download location.

Thanks!
Back to top
 


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.