Questions on UI for ASP.NET AJAX Forum

1 answer

168 views

Hi, Telerik.

Please help, google map wont fill whole RadTab. I tried
<div id="map_canvas" style="width: 100%; height: 100%; margin: 0px;"/>
i also tried
<div id="map_canvas" style="width: auto; height: auto; margin: 0px;"/>

Map only shows if width and height is in px,
I just want the map to scale to fit the RadTab so that when a panel is collapsed, the map fills the new space. Is it a CSS issue?

Please help.

here is the whole code.

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 id="Head1" runat="server">
    <title>Map Demo</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
        Orientation="Horizontal" Skin="Black" LiveResize="true" VisibleDuringInit="false"
        ResizeWithBrowserWindow="true">
        <telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="35px"
            CssClass="TitleBarPane">
            <div id="TitleBar">
                 
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
        <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
            <telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Black">
                <telerik:RadPane ID="LeftRadPane" runat="server" Width="230" Scrolling="None">
                    <asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Label ID="label3" Text="Some text here" runat="server" Style="position: absolute; color: Red;
                                left: 20px; bottom: 50px; z-index: 100;" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
                        <ContentTemplate>
                            <telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal"
                                Skin="Black" LiveResize="true" VisibleDuringInit="false">
                                <telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
                                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
                                    <Tabs>
                                    <telerik:RadTab Text="Google Map"></telerik:RadTab>
                                    </Tabs>
                                    </telerik:RadTabStrip>
                                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" >
                                    <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" Width="100%">
                                    <br />
                                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                    <script type="text/javascript">
                                        function loadScript() {
                                            var script = document.createElement("script");
                                            script.type = "text/javascript";
                                            script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=true&callback=initialize";
                                            document.body.appendChild(script);
                                        }
                                        window.onload = loadScript;
                                        //initialization
                                        function initialize() {
                                            var latLng = new google.maps.LatLng(51.445517, -0.412006);
                                            //geocode init
                                            var geocoder = new google.maps.Geocoder();
                                            //map options
                                            var myMapOptions =
                                        {
                                            zoom: 10,
                                            center: latLng,
                                            mapTypeId: google.maps.MapTypeId.ROADMAP
                                        }

                                            //initialize map
                                            var map = new google.maps.Map(document.getElementById('mapDiv'), myMapOptions );
                                            //create makers
                                            var marker = new google.maps.Markers(
                                            { position: latLng,
                                                map: map,
                                                dgrabble: true
                                            });
                                        }
                                    </script>
                                    <div id="mapDiv" style="width: 750px; height: 650px; margin: 0px;"/>
                                    </telerik:RadScriptBlock>
                                    </telerik:RadPageView>
                                    </telerik:RadMultiPage>
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="MapRadSplitBar" runat="server"
                                    CollapseMode="Backward" />
                                <telerik:RadPane ID="DataGridPane" runat="server" Height="130" Scrolling="Both"
                                    MinHeight="150">
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" Enabled="False">
                                </telerik:RadSplitBar>
                            </telerik:RadSplitter>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>
</body>
</html>

TabStrip

answered on 14 Apr 2011

5 answers

266 views

How to change NavigateUrl at run-time?

Hello,

I am building a MVC program. When I test the menu in the View:

    <telerik:RadMenu ID="RadMenu1" runat="server">
        <Items>
            <telerik:RadMenuItem runat="server" PostBack="False" Text="M1-1"
                NavigateUrl="~/home/show?p1=10" >
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

it works. But in my case, I need to change the parameter value "p1" in run-time, depending on the combination of some previous user's inputs.

Ideally, if I can use some variables in the codes such as:

   ... NavigateUrl="~/home/show?p1=<%= Session['magic_number'] %>" ...

this will solve the issue. However, this code runs into parser error.

I wonder if there is any solution or workaround to address this situation. Many thanks.

Menu

answered on 14 Apr 2011

1 answer

135 views

Treeview XML - Mark checkboxes checked onload

Greetings,

I am working on a form to assign learning objectives contained in an XML file to a lesson plan stored in a SQL table. The source XML file looks like this.

<ObjectiveSet id="1" description="Firefighter II" parentID="">

<objective id="2" description="Module A" parentID="1">

<objective id="3" description="2-1 FIRE DEPARTMENT ORGANIZATION" parentID="2">

<objective id="4" description="2-1.1 Identify the organization of the fire department. (3-1.1.1)" parentID="3" />

<objective id="5" description="2-1.2 Identify the firefighter’s role as a member of the organization." parentID="3"/>

<objective id="6" description="2-1.3 Identify the mission of the fire service and of the local fire department." parentID="3"/>

<objective id="7" description="2-1.4 Identify the function of standard operating procedures. (3-2.1)" parentID="3"/>

<objective id="8" description="2-1.5 Identify the fire department’s rules and regulations that apply to the" parentID="3"/>

<objective id="9" description="2-1.6 Identify the basic components of incident management and the" parentID="3"/>

<objective id="10" description="2-1.7 Identify the role of other agencies that may respond to emergencies." parentID="3" />

<objective id="11" description="2-1.8 Identify the components of a member assistance program. (3-1.1.1)" parentID="3"/>

<objective id="12" description="2-1.9 Identify the components of a member assistance program. (3-1.1.1)" parentID="3"/>

</objective>

<objective id="13" description="FIRE BEHAVIOR" parentID="2">

<objective id="14" description="Identify the following terms: (3-3.10)" parentID="13">

<objective id="15" description="Fire/combustion" parentID="14" />

<objective id="16" description="Heat" parentID="14" />

<objective id="17" description="Ignition Temperature" parentID="14" />

</objective>

</ObjectiveSet>

I can build the tree with no problem. I can update the lesson plan record with the selected objective id's from the tree with no problem.

The ID's from the selected objectives in the XML tree are stored in a SQL table with columns as follows:

lessonPlanID objectiveID
1 4
1 5
2 17

When the user goes back another day to edit the objectives for lesson plan one, they will be presented the tree again. When the page loads, it should appear with the previously assigned objectives already checked. So, in the example, the tree would have objectiveID 4 and objectiveID 5 already checked.

I can not figure out how to check the items when the page loads. I assume it has to do with databinding, instead of using XMLDataSource to build the tree. I am very new to vb.net, so I am not certain how to create the tree and check off the appropriate boxes.

Is this possible? Any ideas?

Thank you in advance for any thoughts or help that anyone may be able to provide.

John

TreeView

answered on 14 Apr 2011

0 answers

60 views

Multiple texbox to check dinamic server side

Hi:
I have add some textbox created dinamically to myradspell.controlstocheck. I attached the error. The problem is the textboexes were created so:

public

partial class LogrosEquivalentes : System.Web.UI.Page

{

protected

void Page_Load(object sender, EventArgs e)

{

TemplateField

Columna1 = new TemplateField();

Columna1.ItemTemplate =

new TextBoxTemplate3("CodValoracion", false, !ingreso, 180, null,"Descripcion");

Columna1.HeaderText =

"Cdigo Logro";

MiGridView0.Columns.Add(Columna1);

MiGridView0.AutoGenerateColumns =

false;

MiGridView0.DataSource = DtCodigos;

MiGridView0.DataBind();

string[] VectorOrtografia = new string[MiGridView0.Rows.Count];

for (int i = 0; i < MiGridView0.Rows.Count - 1; i++)

{

VectorOrtografia[i] = ((

TextBox)MiGridView0.Rows[i].Cells[0].Controls[0]).ClientID;

}

RadSpell1.ControlsToCheck = VectorOrtografia;

}
}

public class TextBoxTemplate3 : ITemplate //Aqui asigno las propiedades y los eventos para cada TextBoxTemplate

{

string NombreColumna,NombreColumnaToolTip;

bool Habilitado, ReadOnly;

int Ancho,NumeroNombre;

string GridViewCodigosId;

//int ContadorControles = 0;

public TextBoxTemplate3(string Columna, bool habilita, bool readOnly, int AnchoControl, string gridviewcodigosid,string ColumnaToolTip)

{

GridViewCodigosId = gridviewcodigosid; NombreColumna = Columna; Habilitado = habilita; Ancho = AnchoControl;

ReadOnly = readOnly; NombreColumnaToolTip = ColumnaToolTip;

}

public void InstantiateIn(System.Web.UI.Control container)

{

TextBox TextBox1 = new TextBox();

TextBox1.ID =

"TextBox" + "&" + NombreColumna + "&" + GridViewCodigosId;// + ContadorControles;

TextBox1.ToolTip = TextBox1.ID;

TextBox1.Width =

Unit.Pixel(Ancho);

TextBox1.Height =

Unit.Pixel(20);

TextBox1.Enabled = Habilitado;

TextBox1.ReadOnly = ReadOnly;

TextBox1.Style.Add(

"vertical-align", "middle");

TextBox1.DataBinding +=

new EventHandler(TextBox1_DataBinding);

container.Controls.Add(TextBox1);

//ContadorControles++;

}

void TextBox1_DataBinding(object sender, EventArgs e)

{

TextBox TxtBox = (TextBox)sender;

GridViewRow container = (GridViewRow)TxtBox.NamingContainer;

TxtBox.Text = ((

DataRowView)container.DataItem)[NombreColumna].ToString();

//if (!(NombreColumnaToolTip == "")) TxtBox.ToolTip = ((DataRowView)container.DataItem)[NombreColumnaToolTip].ToString();

string Alumno = ((DataRowView)container.DataItem)[0].ToString();

TxtBox.Attributes.Add(

"onchange", "javascript:OnTextChanged(this,'" + GridViewCodigosId + "')");

TxtBox.Attributes.Add(

"onfocus", "javascript:OnFocus('" + TxtBox.ClientID + "','" + GridViewCodigosId + "');");

}

Grid

asked on 14 Apr 2011

1 answer

114 views

Controls attributes not displayed

When i insert a new checkbox or radio button, its attributes are not are not displayed while using chrome and firefox, but in IE its working good..!!!!!

Editor

answered on 14 Apr 2011

1 answer

170 views

Change Height of Items in ComboBox

Hi there,

I'm currently building a web application to be used on a Tablet/Touch based computer. I've got a lot of RadComboBoxes on my page that are both binded to a DataSource or called by a WebService.
The problem is, my ComboBoxes are pulling a multitude of items, and depending on the size of the User's fingers it may be hard for them to select items in the drop-down area of the RadComboBox.

Is there a way of setting the height of the ComboBox Items? I'm guessing it should just be slight CSS change.

Here's an example of one of my boxes.

<telerik:RadComboBox

runat="server"

ID="LabourName1"

Width="180px"

Skin="WebBlue"

AllowCustomText="true"

MaxHeight="200px"

EmptyMessage="Employee Name"

CssClass="LabourCell"

EnableTextSelection="true"

MarkFirstMatch="true"

EnableLoadOnDemand="true"

Filter="Contains">

<webservicesettings path="~/FieldService.asmx" method="GetEmployees" />

</telerik:RadComboBox>

Best Regards,

Landon

ComboBox

answered on 14 Apr 2011

1 answer

86 views

ToolTip not support right to left languages!!!

when I use direction:rtl; in css of ToolTip, border not show correctly!!!

ToolTip

answered on 14 Apr 2011

1 answer

58 views

RadTicker Item Target

Is it possible to define the target for a radTickerItem?

Some of our tickeritems are external links and we would like these to open in new windows. i.e. Target="_blank"
I cannot find any option to specify that the NavigateUrl should use a specific Target, is there any way to do this?

Rotator

answered on 14 Apr 2011

1 answer

260 views

Copy In Clipboard

Hello,

I am using tooltip manager and radgrid to display drilled down data on muse over. I want to copy the grid on right click / printscreen to paste it in emails directly. Is it posible to copy complete radgrid from tooltipmanager and paste ?

Thanks,
Prayag

Grid

answered on 14 Apr 2011

6 answers

66 views

Browse button bigger

Hi,
I want the browse button a little bigger than the default 65px. I am using the windows skin 7. I tried this Css without success:

<style type="text/css">

div.RadUpload .ruBrowse

{

width: 120px;

}

</style>

The result is not ok because the background image still remains fixed to 65px. Is something missed here? How can I choose the bigger button background?

Best regards,
Igor

Upload (Obsolete)

answered on 14 Apr 2011