Questions on UI for ASP.NET AJAX Forum

3 answers

153 views

Getting Grid Row Context Menu Conflict with Grid in UserControl EditForm

Hi,

I have a page with 3 RadGrids and an UserControl (pop up EditForm) with a RadGrid. Here is my situation:

When you right click an item in one of the 3 RadGrid on the actual page a Context Menu shows - this is good
When you click Edit in the Context Menu, the UserControl appears in the edit pop up - this is good
When you right click an item in the RadGrid in the UserControl two "bad" things happen: the Context Menu for the 3 RadGrids on the page shows - this is bad; and the row in the RadGrid on the page (not the UserControl) with the same index as the row right clicked in the RadGrid in the UserControl becomes selected - this is also bad

Here is the code for one of the 3 RadGrids on the actual page (there's no conflict between the three), you'll note that I use a UserControl for the modal pop up EditForm:

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

OnNeedDataSource="GuestTabsGrid_NeedDataSource" OnInsertCommand="TabsGrid_InsertCommand" OnUpdateCommand="TabsGrid_UpdateCommand"

AutoGenerateColumns="false" AllowFilteringByColumn="false" AllowSorting="false" AllowPaging="true">

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<MasterTableView TableLayout="Fixed" CommandItemDisplay="Top"

ClientDataKeyNames="Id,Name,IsSystem,IsPublished" DataKeyNames="Id"

EditMode="PopUp">

<Columns>

<telerik:GridBoundColumn UniqueName="GuestNameCol" HeaderText="Tab Name" DataField="Name"/>

<telerik:GridTemplateColumn UniqueName="GuestSystemCol" HeaderText="Is System Tab?" DataField="IsDefault">

<ItemTemplate>

<asp:Label runat="server" Text='<%# Convert.ToBoolean(Eval("IsSystem")) == true? "Yes" : "No" %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="GuestPortletsCol" HeaderText="Portlets" DataField="LearningStudioPortletsXml">

<ItemTemplate>

<asp:Label runat="server" Text='' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="GuestSortOrderCol" HeaderText="Sort Order" DataField="SortOrder"/>

</Columns>

<EditFormSettings UserControlName="..\Controls\TabDetailsControl.ascx" EditFormType="WebUserControl"

InsertCaption="Add new tab" CaptionFormatString="Edit Tab: {0}" CaptionDataField="Name"

PopUpSettings-Width="750px" PopUpSettings-Modal="true">

<EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"

UniqueName="EditCommandColumn1" CancelText="Cancel edit">

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnPopUpShowing="PopUpShowing" />

<ClientEvents OnRowContextMenu="TabRowContextMenu" />

</ClientSettings>

</telerik:RadGrid>

Here is the code for the Context Menu for the 3 RadGrids on the page:

<telerik:RadContextMenu ID="TabGridMenu" runat="server" OnItemClick="TabGridMenu_ItemClick"

EnableRoundedCorners="true" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Edit" Value="Edit" />

<telerik:RadMenuItem Text="Delete" Value="Delete" />

<telerik:RadMenuItem Text="Set as default" Value="SetDefault" />

<telerik:RadMenuItem Text="Publish" Value="Publish" />

<telerik:RadMenuItem Text="Unpublish" Value="Unpublish" />

</Items>

</telerik:RadContextMenu>

Here is the JavaScript function for the Context Menu on that page, you'll note I have a check to make sure that the "sender" is one of the 3 RadGrids that use this Context Menu:

function TabRowContextMenu(sender, eventArgs) {

var menu = $find("<%=TabGridMenu.ClientID %>");

var evt = eventArgs.get_domEvent();

var clickedGridId = sender.get_id();

if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {

return;

}

if (clickedGridId != "<%=GuestTabsGrid.ClientID %>"

|| clickedGridId == "<%=SignInTabsGrid.ClientID %>"

|| clickedGridId == "<%=SignedInTabsGrid.ClientID %>")

) {

return;

}

var publish = menu.findItemByValue("Publish");

var unpublish = menu.findItemByValue("Unpublish");

var setDefault = menu.findItemByValue("SetDefault");

publish.set_visible(false);

unpublish.set_visible(false);

setDefault.set_visible(false);

var itemIsPublished = eventArgs.getDataKeyValue("IsPublished") == "True";

var itemIsDefault = eventArgs.getDataKeyValue("IsSystem") == "True";

var dataItem = eventArgs.get_gridDataItem();

var index = eventArgs.get_itemIndexHierarchical();

document.getElementById("<%=radGridClickedRowIndex.ClientID %>").value = index;

document.getElementById("<%=radGridClicked.ClientID %>").value = clickedGridId;

sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

if (itemIsPublished) {

unpublish.set_visible(true);

}

else {

publish.set_visible(true);

}

if (!itemIsDefault) {

setDefault.set_visible(true);

}

menu.show(evt);

evt.cancelBubble = true;

evt.returnValue = false;

if (evt.stopPropagation) {

evt.stopPropagation();

evt.preventDefault();

}

</script>

Here is the code for the RadGrid in my UserControl, note that it doesn't have a Context Menu:

<telerik:RadGrid runat="server" ID="TabAvailablePortlets" OnNeedDataSource="grdPendingOrders_NeedDataSource"

AllowPaging="false" Width="150px" OnRowDrop="grdPendingOrders_RowDrop" AllowMultiRowSelection="false"

AutoGenerateColumns="false">

<MasterTableView DataKeyNames="Id,Name,IsSystem,IsPublished,Content" TableLayout="Fixed">

<Columns>

<%--<telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" />--%>

<telerik:GridBoundColumn UniqueName="TANameCol" HeaderText="Portlet Name" DataField="Name"/>

</Columns>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">

<Resizing AllowColumnResize="true" />

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>

<ClientEvents OnRowDropping="onRowDropping" />

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

</ClientSettings>

<PagerStyle Mode="NumericPages" PageButtonCount="4" />

</telerik:RadGrid>

Any idea why this is happenning? I would really appreciate any help in resolving this.

Thanks!

Grid

answered on 14 Oct 2011

1 answer

79 views

Rotator bug with fb/gp1/twitter!?

Hello Telerik Team

I have a rotator which shows photos, and below each photo I have like buttons for facebook, gplus and twitter. When the first photo shows up, the links are there and seem to be ok, but when I click(or mouseover) the rotators buttons, the links just disappear. Can you spot the error or give me an idea please? Thx a lot! The code I use is this:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"

EnableAJAX="false">

<telerik:RadRotator runat="server" ID="RadRotator1" Skin="Black" RotatorType="Buttons"

DataSourceID="ObjectDataSource2" Width="850px" Height="520px" ScrollDirection="Right,Left "

SlideShowAnimation-Type="Fade" EnableAjaxSkinRendering="true" WrapFrames="true"

OnClientItemShown="ItemShown_handler" OnItemClick="RadRotator1_ItemClick" OnItemDataBound="RadRotator1_ItemDataBound">

<ItemTemplate>

<div>

<%#SetInitialIndex(Container) %>

<telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ResizeMode="Fit" DataValue='<%#Eval("Data") %>'

Style="padding-left: 5px;

padding-right: 5px;" />

<asp:Label runat="server" ID="lblTinyURL" Visible="true" ToolTip='<%#Eval("TinyURL") %>'

ForeColor="Black" Font-Size="XX-Small"></asp:Label>

</div>

</ItemTemplate>

</telerik:RadRotator>

</telerik:RadAjaxPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="LoadingPanel1"

EnableAJAX="false">

<div>

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

<table>

<tr>

<td>

<div id="fbDiv">

</div>

</td>

<td>

<div id="gp1Div">

</div>

</td>

<td>

<div id="twitterDiv">

</div>

</td>

</tr>

</table>

</div>

</telerik:RadAjaxPanel>

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

<script type="text/javascript">

function ItemShown_handler(sender, args) {

var ItemIndex = sender.get_currentItem().get_index();

// Get the wraper element ;

var wrapper = getWrapperElement(args.get_item());

// Find an asp control

var aspLabelLink_InsideTemplate = findAspControl("lblLink", wrapper);

var aspLabelTinyUrl_InsideTemplate = findAspControl("lblTinyURL", wrapper);

var fb = aspLabelTinyUrl_InsideTemplate.outerHTML;

var gp1 = aspLabelTinyUrl_InsideTemplate.outerHTML;

var twitter = aspLabelTinyUrl_InsideTemplate.outerHTML;

if (fb.length > 0 && fb.indexOf("title=") > -1)

fb = fb.substring(fb.indexOf("title=") + 6, fb.indexOf("></SPAN>"));

if (gp1.length > 0 && gp1.indexOf("title=") > -1)

gp1 = gp1.substring(gp1.indexOf("title=") + 6, gp1.indexOf("></SPAN>"));

if (twitter.length > 0 && twitter.indexOf("title=") > -1)

twitter = twitter.substring(twitter.indexOf("title=") + 6, twitter.indexOf("></SPAN>"));

//var fbDiv = findHtmlElement("fbDiv", wrapper);

fbDiv.innerHTML = "<div

class=\"fb-like\" data-href=\"" + fb + "\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-colorscheme=\"dark\"></

div>";

//var gp1Div = findHtmlElement("gp1Div", wrapper);

gp1Div.innerHTML = "<div class=\"g-plusone\" data-href=\"" + gp1 + "\"></div><span itemprop=\"description\"></span>";

//var twitterDiv = findHtmlElement("twitterDiv", wrapper);

var firstPartUrl = "<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\"" + twitter;

var restOfUrl1 = "\" data-text=\"Nice!!!\" data-count=\"horizontal\">Tweet</a>";

twitterDiv.innerHTML = firstPartUrl + restOfUrl1;

//$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(ItemIndex);

}

function findHtmlElement(id, wrapperElement) {

// Get the image ;

var image = $get(id, wrapperElement);

return image;

}

function findAspControl(id, wrapperElement) {

// Get the control ;

var control = $get(wrapperElement.id + "_" + id, wrapperElement);

return control;

}

function getWrapperElement(rotatorItem) {

var itemElem = rotatorItem.get_element();

var wrapper = itemElem.firstChild;

return wrapper;

}

</script>

</telerik:RadCodeBlock>

Rotator

answered on 14 Oct 2011

5 answers

345 views

RadTabStrip + RadMultiPage: Fade between tab/pages?

Hi Telerik,

I am just brainstorming some ideas on ways to make my dashboard more visually appealing. On my dashboard I have multiple tabs associated with multiple page views. In addition, I have a timer which runs and, on tick, increments the tab's selected index.

This all works fine and dandy -- the tabs cycle between page views and the data displayed changes. That being said, it's almost 'too' snappy. Think like UpdatePanels updating without any flash and wondering 'woah, what just happened.'

As such, I was hoping to be able to fade in/fade out page views. Obviously this isn't inherently supported in the Telerik control suite (maybe it could be in the future? :) Would be very sexy), but I was wondering if you guys had any ideas on how to make this happen? I'm fine with it being a 'modern browser only' type of thing -- using CSS3/HTML5 opacity elements... but I wasn't really sure where to start.

What do you guys think? Maybe I should change the selected indices of the TabStrip and MultiPage, but then instead of telling an UpdatePanel to refresh the content of the MultiPage I could, instead, set a client-side opacity-fader to bring the new page view up?

Sean

TabStrip

answered on 14 Oct 2011

2 answers

142 views

Unable to set value of the property 'OnClientClose': object is null or undefined

Hi moderator/admin,

When I click to open the radwindow in Internet Explorer 9 browser I got the following error:
Message: Unable to set value of the property 'OnClientClose': object is null or undefined
Line: 67
Char: 3
Code: 0

My js file is written as follows to open radwindow:

<code>
function openradwindow(windowname,TitleBarBackgroundColor,navigateurl,width,height,titleimage,titlename)
{
    try
    {

    var oWindow =window.radopen(navigateurl, windowname);
//   var oContentFrame = oWindow.get_ContentFrame();

    oWindow.SetTitle(titlename);
    var divWin = document.getElementById("RadWindowWrapper_ctl00_radwindow");
    divWin.style.backgroundColor = TitleBarBackgroundColor;
    //divWin.style.zIndex=3049;
    //divWin.style.position=relative;
     divWin.style.titlename=titlename;
    var i;

    for(i=0;i<10;i++)
    {
        if(document.styleSheets[i]!=null)
        {

            var strStyleSheetName = document.styleSheets[i].href;
            if(strStyleSheetName != null)
            {
            //added for radwindow icon image and background color of icon image
            if( strStyleSheetName.indexOf( "RadControls/Window.RadControls.css" ) != -1 )
            {
                try
                {
                    //document.styleSheets[i].rules[0].style.backgroundImage = "url("+titleimage+")";

                    document.styleSheets[i].rules[0].style.backgroundColor =TitleBarBackgroundColor;
                }
                catch(err)
                {

                    //document.styleSheets[i].cssRules[0].style.backgroundImage = "url("+titleimage+")";

                    document.styleSheets[i].cssRules[0].style.backgroundColor = TitleBarBackgroundColor;

                }
            }
            }
        }
    }
    oWindow.SetWidth(width);
    oWindow.SetHeight(height);
    oWindow.show();
}
catch(err)
{
}

oWindow.OnClientClose = function()
{
    oWindow.SetUrl("about:blank");
    oWindow.remove_close(OnClientClose);
}

}
</code>

The above javascript function is working fine in all other browsers.
How to open my radwindow in IE 9? Please reply.

Regards,
Tinoy Malayil

Window

answered on 14 Oct 2011

6 answers

185 views

Paging and Aggregate Function

Hi

I have a radgrid in my page with Paging enabled, i want to show the Aggregate function for some of the columns. Assume that i have 100 records in grid, i set pagesize=50, so my 100 records will displayed in two pages(50 per page) and also i set Count Aggregate function for the EmployeeID Column, it displays the Count as 50 in first page and again 50 in second page but i want to show the count as 100 for that Column in all the pages.

Is there any possibility to do this? if it so please send me the solution.

Thanks

Grid

answered on 14 Oct 2011

5 answers

162 views

Error when trying to update ajaxified textbox through a button

Hello
I have a multi-line textbox ajaxified with a RadAjaxManager to be updated through an <asp:Button>
Everything worked fine until Web.UI Q2 SP1 (2011_2_915)
Now I got this javascript error when the Button is clicked (roughly translated):
"unable to read the property "id": object is null or not defined"

The VS debugger stops here:

}if(this.Type=="Telerik.Web.UI.RadAjaxManager"){if(i.get_postBackElement()!=this.get_element()){var c=this._updatePanels.split(",");

if(Array.contains(c,i.get_postBackElement().id)){this._isRequestInProgress=true;

In this particular statement:

if(Array.contains(c,i.get_postBackElement().id))

The button postback event is never fired.
If I change the Button with a RadButton everything works fine, but this is not a feasible solution for me at the moment.
Thank you for your help

Ajax

answered on 14 Oct 2011

1 answer

264 views

RadWindows Dispose

I'm working with the RadWindow, and all is OK - except, on the close of the RadWindow;

If an unrelated button is clicked on the same web page, the RadWindow re-appears as a popup;

I'm writing to ask if the RadWindow can be disposed of - after intended utilization;

The DestroyOnClose, and Dispose, methods did not resolve the issue of the popup window re-appearing after intened use;

//Set its properties

rw1.Width = Unit.Pixel(400);

rw1.Height = Unit.Pixel(400);

//rw1.NavigateUrl = "http://www.google.com";

rw1.NavigateUrl = "PopupFileUpload.aspx";

//Make sure that the window will be shown after the postback

rw1.VisibleOnPageLoad = true;

//Add it to the RadWindowManager's Windows collection

RadWindowManager1.Windows.Add(rw1);

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<Windows>

<telerik:RadWindow ID="Window1" runat="server" NavigateUrl="PopupFileUpload.aspx"/>

</Windows>

</telerik:RadWindowManager>

Window

answered on 14 Oct 2011

1 answer

236 views

RadEditor - export to pdf problem (final pdf)

Hi,
I have two problems with exporting to PDF from RadEditor.
My html code is:

<div style=

"font-size: 10pt; line-height: 1.2; font-family: calibri; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; text-align: justify;"

>

<p style="text-align: right;">2011</p>

<br />

<h1 style="font-size: 14pt; font-weight: bold; text-align: center;">LOREM IPSUM</h1>

<span style="position: relative; bottom: -5px;">LOREM:</span>

<ul style="margin-top: 0px; padding-top: 0px; padding-left: 15px;">

<li style="margin-top: 0px; padding-top: 0px;">cccccccccccccccccc vvvvvvvvvvvvvv</li>

<li><span style="line-height: 15px; font-family: calibri; font-size: 13px;">cccccccccccccccccc vvvvvvvvvvvvvv</span></li>

</ul>

<p style="font-size: 8pt; font-weight: bold; text-align: center;">Pouczenie:</p>

<ol style=

"margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 15px; font-size: 8pt; list-style-type: decimal;"

>

<li>LOREM IPSUM</li>

<li><span style="line-height: 12px; font-family: calibri; font-size: 11px;">LOREM IPSUM</span>:

<ol style=

"margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 15px; font-size: 8pt; list-style-type: decimal;"

>

<li><span style="line-height: 12px; font-family: calibri; font-size: 11px;">LOREM IPSUM</span></li>

</ol>

</li>

<li><span style="line-height: 12px; font-family: calibri; font-size: 11px;">LOREM IPSUM</span></li>

</ol>

</div>

I pasted it to your demo sample: http://demos.telerik.com/aspnet-ajax/editor/examples/pdfexport/defaultcs.aspx
After exporting:
- there is a big space at the top
- bottom list left numbers (they are letters (a,b and c).
Screen - http://imageshack.us/photo/my-images/840/przechwytywaniek.png/
I have Telerik in version: 2010.1.519.35.
How to fix this?
Thanks in advance.

Editor

answered on 14 Oct 2011

1 answer

133 views

problems with Handler

Hello, i try using AsyncUploadHandler, on local machine its working well,
but on remote IIS, i got error /Handler.ashx?type=rau 500 (Internal Server Error)
_message: NotFound."
but with same parametrs on local machine working, if some one get problems like this, help me please.
thanks

AsyncUpload

answered on 14 Oct 2011

3 answers

70 views

LiveResize for sliding panes?

Hi Telerik,

This feature doesn't seem to exist implicitly, but I was wondering if there was a way to achieve this? I really like the feel of live resize and I was hoping to apply it to a RadSlidingPane inside of a click-to-open RadSlidingZone. Is this possible?

Thanks

Sean

Splitter

answered on 14 Oct 2011