Questions on UI for ASP.NET AJAX Forum

1 answer

43 views

tabstrip

i am creating tab by using tabstrip with scrolling for multitab .when multiple tab is created like for e.g consider the no. of tabs as 14. initially the scrolling appears but when i am deleting tab from 14,13, and so on at a point like when i am at tab 8 after deleting the scrolling disappears along with the starting tabs i.e tab1,tab2,tab3. Scrolling disappearing at a point is right but the starting tabs are hidden which causes a problem.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title></title>

    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
   <%-- <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />--%>

        <%--<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ScrollButtonsOptionsList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="PerTabScrollingCheckBox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>--%>

    <div class="exampleWrapper">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="true" ScrollButtonsPosition="Middle" PerTabScrolling="true" ScrollPosition="0"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Advanced">
                </telerik:RadTab>
                <telerik:RadTab Text="Automatic Updates">
                </telerik:RadTab>
                <telerik:RadTab Text="Remote">
                </telerik:RadTab>
                <telerik:RadTab Text="General">
                </telerik:RadTab>
                <telerik:RadTab Text="Computer Name">
                </telerik:RadTab>
                <telerik:RadTab Text="Hardware">
                </telerik:RadTab>
                <telerik:RadTab Text="System Restore">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>

    </div>

<%-- <div style="clear: both;"></div>--%>



    </form>
</body>
</html>

my code behind file:

using Telerik.Web.UI;

    public partial class Default2 : System.Web.UI.Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            var tabTemplate = new TabTemplate();
            foreach (RadTab tab in RadTabStrip1.Tabs)
            {
                tabTemplate.InstantiateIn(tab);
            }

        }
        protected void ScrollButtonsOptionsList_SelectedIndexChanged(object sender, EventArgs e)
        {
           // RadTabStrip1.ScrollButtonsPosition = (TabStripScrollButtonsPosition)Enum.Parse(typeof(TabStripScrollButtonsPosition), ((RadioButtonList)sender).SelectedValue);

        }

        protected void PerTabScrollingCheckBox_CheckedChanged(object sender, EventArgs e)
        {
            //RadTabStrip1.PerTabScrolling = ((CheckBox)sender).Checked;
            //RadTabStrip1.ScrollPosition = 0;

        }
        public class TabTemplate : ITemplate
        {
            public void InstantiateIn(Control container)
            {
                Label label1 = new Label();
                label1.ID = "ItemLabel";
                label1.Text = (container as RadTab).Text;
                container.Controls.Add(label1);
                ImageButton imgRemove = new ImageButton();
                imgRemove.Init += imgRemove_Init;
                imgRemove.ID = "ImageButton1";
                imgRemove.Width = Unit.Pixel(9);
                imgRemove.Height = Unit.Pixel(9);
                imgRemove.ImageUrl = "~/cut.png";
                container.Controls.Add(imgRemove);
            }
            void imgRemove_Init(object sender, EventArgs e)
            {
                ImageButton img = (ImageButton)sender;
                img.Click += imgRemove_Click;

            }

            void imgRemove_Click(object sender, ImageClickEventArgs e)
            {
                ImageButton img = (ImageButton)sender;
                RadTab tab = img.Parent as RadTab;

                tab.TabStrip.SelectedIndex = tab.Index - 1;

                tab.TabStrip.Tabs.Remove(tab);
            }
        }

        protected void ReorderTabsOnSelectCheckBox_CheckedChanged(object sender, EventArgs e)
        {

        }
    }

TabStrip

answered on 03 Dec 2013

1 answer

67 views

scroolbar in tabstrip

hi
i am creating tab by using tabstrip with scrolling for multitab .when multiple tab is created like for e.g consider the no. of tabs as 14. initially the scrolling appears but when i am deleting tab from 14,13, and so on at a point like when i am at tab 8 after deleting the scrolling disappears along with the starting tabs i.e tab1,tab2,tab3. Scrolling disappearing at a point is right but the starting tabs are hidden which causes a problem. pls help me fast.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title></title>

    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
   <%-- <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />--%>

        <%--<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ScrollButtonsOptionsList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="PerTabScrollingCheckBox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>--%>

    <div class="exampleWrapper">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="true" ScrollButtonsPosition="Middle" PerTabScrolling="true" ScrollPosition="0"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Advanced">
                </telerik:RadTab>
                <telerik:RadTab Text="Automatic Updates">
                </telerik:RadTab>
                <telerik:RadTab Text="Remote">
                </telerik:RadTab>
                <telerik:RadTab Text="General">
                </telerik:RadTab>
                <telerik:RadTab Text="Computer Name">
                </telerik:RadTab>
                <telerik:RadTab Text="Hardware">
                </telerik:RadTab>
                <telerik:RadTab Text="System Restore">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>

    </div>

<%-- <div style="clear: both;"></div>--%>



    </form>
</body>
</html>

my code behind file:

using Telerik.Web.UI;

    public partial class Default2 : System.Web.UI.Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            var tabTemplate = new TabTemplate();
            foreach (RadTab tab in RadTabStrip1.Tabs)
            {
                tabTemplate.InstantiateIn(tab);
            }

        }
        protected void ScrollButtonsOptionsList_SelectedIndexChanged(object sender, EventArgs e)
        {
           // RadTabStrip1.ScrollButtonsPosition = (TabStripScrollButtonsPosition)Enum.Parse(typeof(TabStripScrollButtonsPosition), ((RadioButtonList)sender).SelectedValue);

        }

        protected void PerTabScrollingCheckBox_CheckedChanged(object sender, EventArgs e)
        {
            //RadTabStrip1.PerTabScrolling = ((CheckBox)sender).Checked;
            //RadTabStrip1.ScrollPosition = 0;

        }
        public class TabTemplate : ITemplate
        {
            public void InstantiateIn(Control container)
            {
                Label label1 = new Label();
                label1.ID = "ItemLabel";
                label1.Text = (container as RadTab).Text;
                container.Controls.Add(label1);
                ImageButton imgRemove = new ImageButton();
                imgRemove.Init += imgRemove_Init;
                imgRemove.ID = "ImageButton1";
                imgRemove.Width = Unit.Pixel(9);
                imgRemove.Height = Unit.Pixel(9);
                imgRemove.ImageUrl = "~/cut.png";
                container.Controls.Add(imgRemove);
            }
            void imgRemove_Init(object sender, EventArgs e)
            {
                ImageButton img = (ImageButton)sender;
                img.Click += imgRemove_Click;

            }

            void imgRemove_Click(object sender, ImageClickEventArgs e)
            {
                ImageButton img = (ImageButton)sender;
                RadTab tab = img.Parent as RadTab;

                tab.TabStrip.SelectedIndex = tab.Index - 1;

                tab.TabStrip.Tabs.Remove(tab);
            }
        }

        protected void ReorderTabsOnSelectCheckBox_CheckedChanged(object sender, EventArgs e)
        {

        }
    }

TabStrip

answered on 03 Dec 2013

1 answer

144 views

Radsplitter Issue

Hi,
i am using radsplitter but during page load it loads like (load1.png) and then load completely (load.png).
How can i avoid this.
and i dont want any lining for radsplitter , but only want radsplitbar line to clearly separate page in two parts

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" SplitBarsSize=".5" Width="100%"

Orientation="Vertical" Skin="WebBlue" OnClientLoad="RadSplitter1_OnClientLoad">

<telerik:RadPane ID="LeftPane" runat="server" Width="200px" MaxWidth="300" ShowContentDuringLoad="false">

<h1>

Hello World</h1

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="MiddlePane1" runat="server" CssClass="contentPaneDecorator"

ShowContentDuringLoad="false">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

Thanks

Splitter

answered on 03 Dec 2013

1 answer

39 views

After applying Filter previous page functionality of Paging not working - throwing JS error

Hi

I have ListView in my page. I have applied paging and filter on list. Once I apply filter and use pagging, it allows to me to access the next page (if I am at page#1 it allows to go to page 2 or 3 or so on) but If I try to come back (go to page# 1 from page# 2 or so) it doesn't change the paging and throws below JS error.

Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

I have seen this post related to same problem. I think that, we might be missing something. I have checked the demo on the site and it is working fine but in my case it is error out. Please assist.

Thanks.

ListView

answered on 03 Dec 2013

1 answer

162 views

Get GridBoundColumns Values which are in Grouping Panel of Rad Grid

HI,

Is there any way to get the list of GridBoundColumn DataField or UniqueName value which are in Grouping panel list. My Requirement is to get the columns which are in grouping panel and save it in Database or any where so that later those columns i need to dynamically add to grouping panel.

Thanks and Regards,
Rajender.A

Grid

answered on 03 Dec 2013

1 answer

71 views

Press enter button get grid item Id

Hi Telerik,

if,grid item double click,we can show item detail

<ClientSettings EnablePostBackOnRowClick="true" ><br> <ClientEvents OnRowDblClick="SelectTab" /><br> <Selecting AllowRowSelect="true" /><br> </ClientSettings>

<script type="text/javascript"><br><br> function SelectTab() {<br> var tabStrip = $find("<%= rdDisputeOutputTabStripDetail.ClientID %>");<br> var tab = tabStrip.findTabByText("Detail");<br> if (tab) {<br> tab.select();<br> $('html,body').scrollTop(0);<br> }<br> } <br> </script>

the same process, the Enter button you want to make a pressure,

I tried this code,

<ClientSettings AllowKeyboardNavigation="true"> <br> <ClientEvents OnKeyPress="keyPressed" /> <br> <Selecting AllowRowSelect="true" /><br> </ClientSettings> <br>

<script type="text/javascript"><br><br function keyPressed(sender, args) {<br if (args.get_keyCode() == 13) {<br alert("Hello");<brvar e = args.get_domEvent().rawEvent;<br e.returnValue = false;<br e.cancelBubble = true;<br><brif (e.stopPropagation) {<br e.preventDefault();<br e.stopPropagation();<br> }<br> } <br> <br> } <br> </script>

because I could not get ID does not show details,

Thank you for your answer.

Grid

answered on 03 Dec 2013

1 answer

91 views

Radgrid Header Image Border

Hi,

After upgrading to the most recent release of Ajax Radcontrols I'm now seeing an ugly border around an image in a radgrid header. No border is present in the row items, just the header (See image). I've tried all manner of css antics to remove it but nothing works including:

a img
{
border: none;
}

.RadGrid a img
{
border: none !important;
}

I'm using the Office2010Blue Skin. Here's the RadGrid line:-

<telerik:GridImageColumn DataImageUrlFields='Docs' HeaderImageUrl="paperclip.png" SortExpression="Docs" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"></telerik:GridImageColumn>

Here's the source html that gets generated:-

<th scope="col" class="rgHeader" style="text-align:center;"><input type="image" name="GridView1$ctl00$ctl02$ctl01$ctl00" src="paperclip.png" /></th>

Thanks

Grid

answered on 03 Dec 2013

3 answers

246 views

Abort Previous Requests on Keypress

Hi,

I have a query regarding Rad search box. Suppose I'm typing "SCOTT" in the search area. In the firebug console I found 5 different requests to the server. What I need to know is while typing continuously, how can I make the searchbox abort "s", "sc", "sco", "scot" requests and accept only "scott" as the search term so that the server is hit only once and not 5 times.

I have used Ajaxcontroltoolkit autocomplete before which has the same functionality of aborting requests. How can I achieve the same for rad search box. Any idea?

Thanks
Abi

SearchBox

answered on 03 Dec 2013

1 answer

89 views

Render issue when refreshing page in Firefox 25.01

I have not tried this outside of our application, that is going to be my next step. I just wanted to ask the question to see if anyone had any ideas to look at before I dug any further into the issue. What I am seeing started with the latest version of Firefox (25.0.1). Basically what is happening is we have a combobox dynamically rendered on the page from the server side inside of a asp.net update panel and it renders fine until the user refreshes the page. I have attached two screenshots, one before the refresh to show the combobox rendering properly and a second screenshot to show what the combobox looks like after a refresh. The combobox functions properly it is just missing it's styles.

ComboBox

answered on 03 Dec 2013

8 answers

595 views

RadAsyncUpload in RadGrid

Hello,

I have a radgrid in one of the web pages and in the template column i am using RadAsyncUpload to upload the documents(including PDF). Saving the documents in the database is fine. My problem is with viewing the documents, after they are saved. I saw in some threads that opening these pdf docs in seperate radwindow is a way to achieve this. How do i do that?

1) Using the ExportPDF is the right way to do this?
2) RadBinaryImage still not supporting PDF format?
3) How do i send the binary data of the document to the RadWindow?
4) If i have multiple rows in the grid, then, do i have to select the row first and then click on export pdf?
5) If the file size is 1 MB. Obviously, i don't want to save the document without compressing or resizing it. How do i do that without decreasing the resolution, Since the document will be pulled up for reporting purpose in the future?
6) When i click the export button now, a new window is opening with grid information in it. It is not showing the document.

Where am i doing wrong?

string url, path = "";

bool isExport = false;

protected void Page_Load(object sender, EventArgs e)

{

url = String.Format("~/{0}.pdf", RadGrid1.ExportSettings.FileName);

path = Server.MapPath(url);

}

protected void RadGrid1_GridExporting(object source, GridExportingArgs e)

{

if (File.Exists(path))

{

File.Delete(path);

}

using (FileStream fs = File.Create(path))

{

Byte[] info = System.Text.Encoding.Default.GetBytes(e.ExportOutput);

fs.Write(info, 0, info.Length);

}

Response.Redirect("~/frm_UploadDocs.aspx");

}

protected void RadToolBar1_ButtonClick(object sender, RadToolBarEventArgs e)

{

if (e.Item.Value == "Export")

{

//RadGrid1.ExportSettings.ExportOnlyData = false;

isExport = true;

RadGrid1.MasterTableView.ExportToPdf();

}

else if (e.Item.Value == "Delete")

{

if (File.Exists(path))

{

File.Delete(path);

}

I followed the demo link below.
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandradasyncupload/defaultcs.aspx?product=grid

http://blogs.telerik.com/vladimirenchev/posts/08-12-08/how-to-export-grid-to-pdf-file-and-show-the-result-using-the-window.aspx

Appreciate the help
Thanks

Grid

answered on 03 Dec 2013