Questions on UI for ASP.NET AJAX Forum

4 answers

148 views

Accessing a custom object bound to the row being updated in UpdateCommand

Hello,

I have a RadGrid that binds to a collection of custom object. In my application users can insert/update the rows of the grid and the changes will not be persisted to the database until they click on a save button. Each row has a key column containing the key value (ProviderLanguageID) assigned to each of the object when data is persisted to DB.

The grid's markup is like this:

<telerik:RadGrid ID="grdProviderLanguage" runat="server"

AutoGenerateColumns="False" Height="140px" Width="360px"

OnNeedDataSource="grdProviderLanguage_NeedDataSource"

oninsertcommand="grdProviderLanguage_InsertCommand"

onitemcommand="grdProviderLanguage_ItemCommand"

CellSpacing="0" GridLines="None"

onupdatecommand="grdProviderLanguage_UpdateCommand"

onitemdatabound="grdProviderLanguage_ItemDataBound">

<ClientSettings>

<Selecting AllowRowSelect="True" />

<KeyboardNavigationSettings AllowActiveRowCycle="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView CommandItemDisplay="Top" InsertItemDisplay="Top" EditMode="InPlace" EnableNoRecordsTemplate="false" DataKeyNames="ProviderLanguageID">

<CommandItemSettings AddNewRecordImageUrl="Images/AddNew.png" AddNewRecordText="" ShowRefreshButton="false"></CommandItemSettings>

<RowIndicatorColumn Visible="False" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="False" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<Columns>

<telerik:GridTemplateColumn HeaderText="Language" UniqueName="ProviderLanguage" DataField="ProviderLanguageID">

<HeaderStyle Width="170px" />

<ItemTemplate>

<asp:Label ID="lblLanguageName" runat="server" Text='<%# Eval("LanguageObject.LanguageName") %>' />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox ID="cmbProviderLanguage" runat="server" width="130px"

EnableLoadOnDemand="true" DataValueField="LanguageID" DataTextField="LAnguageObject.LanguageName"

OnItemsRequested="cmbProviderLanguage_ItemsRequested"

Text='<%# Eval("LanguageObject.LanguageName") %>'>

</telerik:RadComboBox

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridCheckBoxColumn HeaderText="Primary" UniqueName="IsPrimary" DataField="IsPrimary" />

<telerik:GridEditCommandColumn ButtonType="LinkButton" InsertText="Done" EditText="Edit" CancelText="Cancel" UpdateText="Done" />

</Columns>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

When multiple rows are inserted to the grid, and one of the rows is subsequently edited (before saved to DB), the edited row is accessible in UpdateCommand event like this:

Guid editedItemID = new Guid(editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["ProviderLanguageID"].ToString());

I'm using the key value to locate the actual custom object in the collection stored in the page.

This works if each of the record already has a key. When a new record is created, the key value is empty (Guid.Empty). So we'd have to use different means to locate the custom object. I'm thinking of comparing the SavedOldValues with the saved values to locate the actual object.

I notcied that e.Item.DataItem is null in UpdateCommand event, but not in ItemDataBound event. Is there any way we can access the custom object the row being updated is bound to?

Thanks in advance,
Makoto

Grid

answered on 06 Sep 2012

8 answers

786 views

Repeater, RadAjax and ItemDataBound

Hi,

I am trying to ensure that when the user clicks on a link within a pager control, that a control on the page (a datalist) is updated. So far the AJAX works fine, however the loading panel won't show up.

I've tried programmatically adding the AjaxSettings in the ItemDataBound event of the repeater (as well as the ItemCreated, and PreRender events) to each of the Hyperlinks within the RepeaterItem, however I'm continually getting either an 'Object reference not set to instance of object' error, or a 'value cannot be null error'.

    
            <telerik:RadAjaxLoadingPanel id="LoadingPanel" cssclass="loading" transparency="20" Runat="server">  
        
            </telerik:RadAjaxLoadingPanel>   
        
            <h3>Images <a href="javascript://" class="upload">Upload Image</a></h3>  
        
            <div id="images">  
        
                <telerik:RadAjaxManager ID="ajaxManager" runat="server">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="dlImages">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:ajaxsetting ajaxcontrolid="lnkPage">  
        
                            <updatedcontrols> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> 
        
                            </updatedcontrols> 
        
                        </telerik:ajaxsetting> 
        
                        <telerik:ajaxsetting ajaxcontrolid="lnkCategory">  
        
                            <updatedcontrols> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" loadingpanelid="LoadingPanel" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> 
        
                            </updatedcontrols> 
        
                        </telerik:ajaxsetting> 
        
                        <telerik:ajaxsetting ajaxcontrolid="lnkImageLibrary">  
        
                            <updatedcontrols> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> 
        
                                <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> 
        
                            </updatedcontrols> 
        
                        </telerik:ajaxsetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxPanel ID="ajaxPanelTabs" runat="server" > 
        
                <ul class="tabs">  
        
                    <li class="page"><asp:linkbutton id="lnkPage" runat="server" text="Images for this page" /></li>  
        
                    <li class="category"><asp:linkbutton id="lnkCategory" runat="server"/></li> 
        
                    <li class="library"><asp:linkbutton id="lnkImageLibrary" runat="server" text="Park Image Library"/></li> 
        
                </ul> 
        
                </telerik:RadAjaxPanel> 
        
                <div class="data">  
        
                    <telerik:RadAjaxPanel ID="ajaxPanelDataList" runat="server" LoadingPanelID="LoadingPanel">  
        
                    <asp:datalist id="dlImages" repeatcolumns="6" cellspacing="2" repeatdirection="Horizontal" runat="server">  
        
                        <itemtemplate> 
        
                            <div> 
        
                                <a rel="lightbox" href="<%=FullSizeURL %>"><asp:image id="imgThumb" runat="server"/></a> 
        
                            </div> 
        
                            <ul> 
        
                                <li><asp:linkbutton runat="server" id="lnkAdd" cssclass="add" title="Add image to this category" commandname="add">Add</asp:linkbutton></li>  
        
                                <li class="last"><asp:hyperlink id="lnkView" runat="server" target="_blank" cssclass="view" rel="lightbox" titlre="View this image">View</asp:hyperlink></li>  
        
                            </ul> 
        
                        </itemtemplate> 
        
                    </asp:datalist> 
        
                    </telerik:RadAjaxPanel> 
        
                </div> 
        
                <telerik:RadAjaxPanel id="ajaxPanelPaging" visible="true" runat="server">  
        
                <asp:linkbutton id="lnkFirstPage" runat="server">First Page</asp:linkbutton> 
        
                <asp:repeater id="rptPaging" runat="server">  
        
                <headertemplate><ul class="verticalpager"></headertemplate> 
        
                <itemtemplate> 
        
                    <li><asp:linkbutton id="lnkPageIndex" commandname="page" runat="server" /></li>  
        
                </itemtemplate> 
        
                <footertemplate></ul></footertemplate> 
        
                </asp:repeater> 
        
                </telerik:RadAjaxPanel> 
        
            </div>

And the code behind

    
            void rptPaging_ItemDataBound(object sender, RepeaterItemEventArgs e)  
        
            {  
        
                if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))  
        
                {  
        
                    LinkButton lnkPageIndex = (LinkButton)e.Item.FindControl("lnkPageIndex");  
        
                    lnkPageIndex.Text = (e.Item.ItemIndex + 1).ToString();  
        
                    if (this.CurrentPage == e.Item.ItemIndex) {  
        
                        lnkPageIndex.CssClass = "selected";  
        
                    }  
        
                    // THIS IS WHERE THE ERROR IS THROWN  
        
                    ajaxManager.AjaxSettings.AddAjaxSetting(lnkPageIndex, dlImages, LoadingPanel);  
        
                }  
        
            }

Any ideas?

Ajax

answered on 06 Sep 2012

2 answers

112 views

Grid Width & Footer Rendering Issues

I am moving a web page with a RadGrid on it from an older app (v2009.1.527.35) to a more recent app (v2011.2.915.35). They are 2 different VB.Net solutions. I want to maintain the same look/style of the grid and it appears the grid width and footer have some rendering issues. Attached (v2009.jpg) is the original appearance of the grid I need to replicate. Attached (v2011.jpg) displays the issues in the more recent version of the app.

The default Skin for RadGrids in the v2011 app is already using Vista with modifications to the Telerik_Styels.css. v2009 also had a default skin using Vista. I wanted to use a clean copy of the css that has .RadGrid_Vista so I copied all of .RadGrid_Vista from the v2011 skins folder, pasted into my Telerik_Styles.css, and renamed the class to .RadGrid_VistaSOS. I also have a skin in v2011 to turn paging on in the footer and use the older paging icons. This skin uses Skin "VistaSOS".

Here is my RadGrid markup:

<telerik:RadGrid runat="server" ID="grdSquareFootage" SkinID="dgSOS" OnNeedDataSource="Grid_NeedDataSource" OnItemDataBound="Grid_ItemDataBound" OnItemCommand="Grid_ItemCommand" OnDataBound="Grid_DataBound">

<MasterTableView EditMode="InPlace" DataKeyNames="FiscalYear,LocationId,FamilyOfBusinessId" AllowPaging="true" AllowSorting="true" PageSize="10">

<Columns>

<telerik:GridEditCommandColumn UniqueName="UpdateButton" ButtonType="ImageButton" EditImageUrl="~/Images/Edit1.gif" />

<telerik:GridButtonColumn CommandName="Delete" UniqueName="DeleteButton" ButtonType="ImageButton" ImageUrl="~/Images/Delete.gif" ConfirmText="Deleting this entry cannot be undone." Text="Delete" />

<telerik:GridNumericColumn DataField="FiscalYear" ReadOnly="true" HeaderText="Year" ItemStyle-Width="60" />

<telerik:GridNumericColumn DataField="LocationId" UniqueName="LocationId" ReadOnly="true" HeaderText="Store" ItemStyle-Width="60" />

<telerik:GridNumericColumn DataField="FamilyOfBusinessId" UniqueName="FamilyOfBusinessId" ReadOnly="true" HeaderText="FOB" ItemStyle-Width="60" />

<telerik:GridNumericColumn DataField="SquareFootage" ColumnEditorID="squareFootageEditor" HeaderText="Square Footage" ItemStyle-Width="60" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

Here is my skin:

<telerik:RadGrid SkinID="dgSOS" runat="server" Skin="VistaSOS" AllowMultiRowEdit="True"

AllowSorting="True" BorderColor="Black" GridLines="Both" Height="90%">

<ClientSettings>

<Scrolling UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst">

<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Resizable="False" Visible="False" />

<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False" />

<PagerStyle Mode="NextPrevAndNumeric" NextPageText="Next" PrevPageText="Previous" AlwaysVisible="true"

PrevPageImageUrl="~/App_Themes/2011/Grid/PagingPrev.gif" NextPageImageUrl="~/App_Themes/2011/Grid/PagingNext.gif"

FirstPageImageUrl="~/App_Themes/2011/Grid/PagingFirst.gif" LastPageImageUrl="~/App_Themes/2011/Grid/PagingLast.gif" />

<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" Wrap="False" />

<ItemStyle Wrap="false" />

<AlternatingItemStyle Wrap="false" />

</MasterTableView>

</telerik:RadGrid>

As I already stated, "VistaSOS" is just a clean copy of "Vista". I need help getting the grid width to fill in wider and the page selector drop down is not rendering correctly.

Thanks,
Rob

Grid

answered on 06 Sep 2012

0 answers

62 views

Drag and Drop between two RadPanes

I have two radpanes both having contenturl to different aspx pages.
One of the page contains the tree controls and the another page contains the grid control. So the structure would be two iframes as RadPane with contenturl translates to an iframe.
Now the requirement is to drag an item from the grid which is in page1 to the tree which is in the page2. Is it possible for telerik's drag and drop framework to get this functionality out of the box ?
Can you please reply me ASAP as we have some very important decisions dependent on this.

General Discussions

asked on 06 Sep 2012

1 answer

103 views

Sliding Pane Width Problem

Hi,

I am using a RadSlidingPane. It works just fine if the pane is docked, but as soon as i undock it and expand it again (just expand it, not dock it), the content shrinks to a few pixels on the left side of the pane, leaving the rest of it blank white.
I've got some sample code right here:

<telerik:RadPane ID="LeftPane" runat="Server" Height="100%" MinWidth="283" MaxWidth="283" Width="283">

<telerik:RadSlidingZone ID="RadSlidingZoneLeft" Skin="Windows7" runat="server"

DockedPaneID="RadSlidingPaneLeft" BorderStyle="None">

<telerik:RadSlidingPane ID="RadSlidingPaneLeft" Skin="Windows7" runat="server"

MinWidth="283" MaxWidth="283" Width="283" EnableResize="False"

Title="Test" Scrolling="None">

<telerik:RadSplitter runat="server" ID="RadSplitter3" Height="100%"

Orientation="Horizontal" MinWidth="283" MaxWidth="283" Width="283" CssClass="BorderLeft">

<telerik:RadPane runat="server" ID="Pane1" BorderStyle="None"

MinWidth="283" MaxWidth="283" Width="283">

[...]

</telerik:RadPane>

<telerik:RadPane runat="server" ID="Pane2" BorderStyle="None"

Height="120px" MinWidth="283" MaxWidth="283" Width="283" Scrolling="Y">

[...]

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

I can tell that the problem has to be connected to the RadSplitter3, because I used the .css attached to it for a border on the right side of it. However, that border shows up, but only after the already mentioned few pixels on the left side of the SlidingPane, seemingly limiting the whole content.

Thanks in advance,
Robin

Splitter

answered on 06 Sep 2012

5 answers

394 views

DatePicker Stop Postback onkeypress Enter

Hello,

I'm having trouble stopping a form from doing a postback when the Enter key is pressed inside the DatePicker. This should be pretty straight foward, I would think, but this code isn't working.

<

telerik:RadDatePicker ID="dtpDate" runat="server" onkeypress="dateStopEnter(this, event)"></telerik:RadDatePicker>

function dateStopEnter(sender, e) {
    e = e || window.event;
    if (e.keyCode == 13)
        return false;
}

The javascript event handler is called and it reaches the "return false" line, but it still allows a postback. I'm using File Version 2009.3.1104.35 of Telerik.Web.UI.dll and the form is contained in a .ascx file that is part of a Dot Net Nuke module. The module is installed in a DNN site...I don't know, maybe DNN is complicating this.

Tom

Calendar

answered on 06 Sep 2012

0 answers

37 views

disable onajaxupdate for one column

deleted

ToolTip

asked on 06 Sep 2012

2 answers

111 views

RadComboBox's problem ( ASP.NET AJAX Q2 2012 SP1 trial version)

Hi, I'm a newby with Telerik and using RadComboBox(ASP.NET AJAX Q2 2012 SP1 trial version) for testing within 30 days trial period. I set MarkFirstMatch="true" AllowCustomText="false" but they are not working. My local environments are: Visual Studio 2010 SP1, .NET Framework 4 and Windows 7. Your prompt reply will be appreciated.

Please see the code:

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxPanel ID="rapBroker" runat="server">

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="Textbox" ControlsToSkip="Scrollbars">

</telerik:RadFormDecorator>

<telerik:RadComboBox ID="rcbbBroker" Runat="server" EnableTextSelection="true" Filter="Contains" MarkFirstMatch="true" AllowCustomText="false"

DataSourceID="sdsBroker" DataTextField="full_Name" Width="400px" EmptyMessage="Type a broker" >

</telerik:RadComboBox>

</telerik:RadAjaxPanel>

<asp:SqlDataSource ID="sdsBroker" runat="server" ConnectionString="<%$ ConnectionStrings:ContractOnline%>"

SelectCommand="select full_Name from dbo.tblName_And_Address where broker_flag = 'Y' order by full_name "/>

</div>

Please see the screenshot:

ComboBox

answered on 06 Sep 2012

1 answer

92 views

RadGrid Paging Error

Hi,

I have a radgrid in my page that holds about 5000 records, page size is 15. If i change the page size to 100 then it shows 100 records in every page as per functionality. When when i navigate to next page i get a JS error which block me to navigate to second page. Please suggest me any solution to overcome this JS error.

Grid

answered on 06 Sep 2012

1 answer

93 views

RadioButton Set Current Selection

Hello,

I have three RadButton controls, each having two states: selected or not selected. I'm using RadioButton button type, so the three buttons are linked together. I'm trying to select the last radio button by doing:

LastButton.Checked = True

But this isn't working for me for some reason. So how do I programmably select the last radio button RadButton from the server?

Thanks.

Button

answered on 06 Sep 2012