Questions on UI for ASP.NET AJAX Forum

4 answers

121 views

Hi,

I'm trying to create dynamic dock controls with customs command in their title bar. I've read everywhere that those dock must be re-created in the OnInit event which I think I'm doing.
Here's my code:
1 - I'm adding a dock to the DockLayout by clicking on a radbutton (RadButtonCreate_Click) and load a control within that dock via Loadcontrol.
Everything looks fine at that stage.

2 - When I click on my custom command "SaveToDB", it does work the way I like and insert all the data to the DB and update the title of my dock via a Dock Title Template implementing ITemplate.

3 - When I click again on that command "SaveToDB", nothing happens. The OnClientCommand is fired but the server side handler is no longer called.

What am I doing wrong here ?

private List<DockState> CurrentDockStates

{

get

{

//Store the info about the added docks in the session. For real life

// applications we recommend using database or other storage medium

// for persisting this information.

List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesDynamicDocks"];

if (Object.Equals(_currentDockStates, null))

{

_currentDockStates = new List<DockState>();

Session["CurrentDockStatesDynamicDocks"] = _currentDockStates;

}

return _currentDockStates;

}

set

{

Session["CurrentDockStatesDynamicDocks"] = value;

}

private RadDock CreateRadDockFromState(DockState state)

{

RadDock dock = new RadDock();

try

{

dock.ID = string.Format("RadDock{0}", state.UniqueName);

dock.ApplyState(state);

dock.EnableRoundedCorners = true;

dock.Command += new DockCommandEventHandler(dock_Command);

dock.Commands.Add(new DockCloseCommand());

dock.Commands.Add(new DockExpandCollapseCommand());

var dockSaveCmd = new DockCommand();

dockSaveCmd.Name = "SaveToDB";

dockSaveCmd.Text = "Save";

dockSaveCmd.CssClass = "sdSaveCmd";

dockSaveCmd.OnClientCommand = "SaveStopToDB";

dock.Commands.Add(dockSaveCmd);

}

catch (Exception ex)

{

return null;

throw new Exception(ex.Message, ex.InnerException);

}

return dock;

}

protected void Page_Init(object sender, EventArgs e)

{

//Recreate the docks in order to ensure their proper operation

for (int i = 0; i < CurrentDockStates.Count; i++)

{

RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);

RadDockLayout1.Controls.Add(dock);

CreateSaveStateTrigger(dock);

}

private void CreateSaveStateTrigger(RadDock dock)

{

//Ensure that the RadDock control will initiate postback

// when its position changes on the client or any of the commands is clicked.

//Using the trigger we will "ajaxify" that postback.

dock.AutoPostBack = true;

dock.CommandsAutoPostBack = true;

AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "DockPositionChanged";

UpdatePanel1.Triggers.Add(saveStateTrigger);

saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "Command";

UpdatePanel1.Triggers.Add(saveStateTrigger);

}

void dock_Command(object sender, DockCommandEventArgs e)

{

if (e.Command.Name == "Close")

{

ScriptManager.RegisterStartupScript(

UpdatePanel1,

this.GetType(),

"RemoveDock",

string.Format(@"function _removeDock() {{

Sys.Application.remove_load(_removeDock);

$find('{0}').undock();

$get('{1}').appendChild($get('{0}'));

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),

true);

}

else if (e.Command.Name == "SaveToDB")

{

var dock = ((RadDock)sender);

var stop = new Stop()

{

Id = int.Parse(dock.Tag),

Name = ((RadTextBox)stopCtrl.FindControl("rtbName")).Text,

Description = ((RadTextBox)stopCtrl.FindControl("TB_description")).Text,

};

if (stop.Id < 0)

{

stop.Id = stop.Insert();

dock.Tag = stop.Id.ToString();

}

else

stop.Update();

}

protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

{

//Populate the event args with the state information. The RadDockLayout control

// will automatically move the docks according that information.

foreach (DockState state in CurrentDockStates)

{

e.Positions[state.UniqueName] = state.DockZoneID;

e.Indices[state.UniqueName] = state.Index;

}

protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)

{

//Save the dock state in the page Session. This will enable us

// to recreate the dock in the next Page_Init.

CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();

}

protected void RadButtonCreate_Click(object sender, EventArgs e)

{

var dock = new RadDock();

dock.DockMode = DockMode.Docked;

dock.EnableRoundedCorners = true;

dock.UniqueName = Guid.NewGuid().ToString();

dock.ID = string.Format("RadDock{0}", dock.UniqueName);

dock.Tag = "-1";

StopFormTplEmpty widget = (StopFormTplEmpty)GlobalUtils.LoadControl(this, "~/Templates/StopFormTplEmpty.ascx");

widget.EnableViewState = true;

dock.ContentContainer.Controls.Add(widget);

dock.TitlebarTemplate = new DockTitleTemplate(dock, StopType.Unknown, "New");

dock.Width = Unit.Percentage(100);

dock.Height = Unit.Pixel(420);

dock.Commands.Add(new DockCloseCommand());

dock.Commands.Add(new DockExpandCollapseCommand());

var dockSaveCmd = new DockCommand();

dockSaveCmd.Name = "SaveToDB";

dockSaveCmd.Text = "Save";

dockSaveCmd.CssClass = "sdSaveCmd";

dockSaveCmd.OnClientCommand = "SaveStopToDB";

dock.Commands.Add(dockSaveCmd);

dock.CommandsAutoPostBack = true;

dock.Command += new DockCommandEventHandler(dock_Command);

UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

ScriptManager.RegisterStartupScript(

dock,

this.GetType(),

"AddDock",

string.Format(@"function _addDock() {{

Sys.Application.remove_load(_addDock);

$find('{1}').dock($find('{0}'),{2});

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_addDock);", dock.ClientID, RadDockZoneStops.ID, 0),

true);

CreateSaveStateTrigger(dock);

}

Dock

answered on 04 Jul 2012

1 answer

101 views

Creating Hierarchical RadGrid via Code

Hello Team,
I am facing problem in dynamic creation grid structure and bind data and not able to see nested grid data below is code for same. Please do help me asap.

Looking forward to your response.

RadGridData.AutoGenerateColumns = false;

            //generate grid columns/ grid structure
            GridBoundColumn ZoneColumn;
            GridTableView gridTableView = new GridTableView();
            for (int ColumnCount = 0; ColumnCount < ZoneData.Tables[0].Columns.Count; ColumnCount++)
            {
                ZoneColumn = new GridBoundColumn();
                RadGridData.MasterTableView.Columns.Add(ZoneColumn);
                ZoneColumn.DataField = Convert.ToString(ZoneData.Tables[0].Columns[ColumnCount]);
                ZoneColumn.HeaderText = Convert.ToString(ZoneData.Tables[0].Columns[ColumnCount]);
                ZoneColumn.UniqueName = Convert.ToString(ZoneData.Tables[0].Columns[ColumnCount]);
                ZoneColumn.SortExpression = Convert.ToString(ZoneData.Tables[0].Columns[ColumnCount]);

                gridTableView.AutoGenerateColumns = false;
                for (int innerColumnCount = 0; innerColumnCount < ZoneData.Tables[1].Columns.Count; innerColumnCount++)
                {
                    ZoneColumn = new GridBoundColumn();
                    gridTableView.Columns.Add(ZoneColumn);
                    ZoneColumn.DataField = Convert.ToString(ZoneData.Tables[1].Columns[innerColumnCount]);
                    ZoneColumn.HeaderText = Convert.ToString(ZoneData.Tables[1].Columns[innerColumnCount]);
                    ZoneColumn.UniqueName = Convert.ToString(ZoneData.Tables[1].Columns[innerColumnCount]);
                    ZoneColumn.SortExpression = Convert.ToString(ZoneData.Tables[1].Columns[innerColumnCount]);
                }
                RadGridData.MasterTableView.DetailTables.Add(gridTableView);
            }

            RadGridData.MasterTableView.AutoGenerateColumns = false;
            RadGridData.MasterTableView.DetailTables[0].AutoGenerateColumns = false;
            GridRelationFields relationFields = new GridRelationFields();
            relationFields.MasterKeyField = "ID";
            relationFields.DetailKeyField = "ID";
            gridTableView.ParentTableRelation.Add(relationFields);

            RadGridData.MasterTableView.DataSource = ZoneData.Tables["Zone"]; //ZoneData is dataset with table data
            RadGridData.MasterTableView.DetailTables[0].DataSource = ZoneData.Tables["ZoneContract"];

Thanks & Regards

Chart (Obsolete)

answered on 04 Jul 2012

5 answers

107 views

[Solved] RadFormDecorator and GridHTMLEditorColumn

I have a grid with a GridHTMLEditorColumn containing, obviously, HTML. When I access the value of the cell client-side it appears as if the RadFormDecorator is attempting to decorate controls INSIDE the GridHTMLEditorColumn. For example, this is what it does to a button:
<a class="rfdSkinnedButton" href="javascript:void(0)">
<button id="Button3" class="rfdDecorated" tabIndex="-1">

I had the same problem using just a GridBoundColumn and a GridTemplateColumn containing a textarea.

How do I get the RadFormDecorator to leave my HTML data alone without disabling it completely (which might be difficult, since it is on the Master Page)?

Grid

answered on 04 Jul 2012

1 answer

228 views

radHTMLChart styling

Is there a way to modify the styling of the RadHTMLChart? I have done this many times with the radGrid and other telerik controls. For example, I would like to change the font of the legend, add borders around the legend, or change spacing between series in the bar chart. Is there a way to do that or is this under development and to be released at a later date?

Chart (HTML5)

answered on 04 Jul 2012

2 answers

138 views

Font size in HTMLChart

We have started replacing the ASP.NET charts with RadHTML Charts. How do we adjust the font size for the X and Y series. I can't seem to find a property to do that. Setting up the font size property at the chart level doesn't seem to impact anything.

Thanks.

Chart (HTML5)

answered on 04 Jul 2012

1 answer

116 views

Loop through selected items

How to loop through selected items in radgrid in external button click and retrieve their cell value?

General Discussions

answered on 04 Jul 2012

3 answers

131 views

[Solved] Window Does not Close until a Refresh

Good Day Support

I am using a RadWindow to load another page that shows Google map , onClientClose event of the Window i successffully pass the Arguments and that works nice.

The issue i have is sometimes the Window does not close it keeps it open. i Open the Window with this code

Copy code

function GoogleEarthExtended() {

var x = $("#ctl00_ContentPlaceHolder_Main_Wizard1_x").val();

var y = $("#ctl00_ContentPlaceHolder_Main_Wizard1_y").val();

var url = 'InsertGoogleEarthPhoto.aspx?type=roadmap' + '&x= ' + x + '&y= ' + y +'&hfGoogleMapsURLImage=' + document.getElementById("<%=hfGoogleMapsURLImage.ClientID%>").value +'&isHybrid=No';

var wnd = window.radopen(url);

wnd.setSize(900, 600);

}

Copy code

<asp:Button ID="butGoogleMap" runat="server" CssClass="but_lrg" Height="32px"

OnClientClick="javascript:GoogleEarthExtended(); return false;"

Text="Insert Google Earth Map"

ToolTip="Insert a map of the property by using Google Earth."

UseSubmitBehavior="False" Width="197px" />

onload of the Popup there is Javascript that has a Popup a user can choose Yes or no depending on the Asnwer it can keep the popup open else close it , so i have provided the javascript that is related to the issue

Copy code

//Check if there is a URL to for the Google map image

if (getParameterByName('hfGoogleMapsURLImage') != "") {

//if there is ask a User if he wants to use the current Image but of type "RoadMap"

var desc = confirm('Do you want to insert a roadmap version of the above satellite image?');

}

else {

var desc = false

}

//if the yes Choose Yes to use the RoadMap

if (desc == true) {

center = getParameterByName('center');

zoom = "15";

maptype = "roadmap";

x = getParameterByName('x');

y = getParameterByName('y');

//set the X and Y for Logic

document.getElementById("Latitude").value = x;

document.getElementById("Longitude").value = y;

CloseWithArg();

}

so if the variable "Desc" it will assign the textbox that is on the popup with variables and go to the method("CloseWithArg()")that will close the popup with Args as depicted below

Copy code

function CloseWithArg()

{

var customArg;

if (getParameterByName('isHybrid') == "Yes") {

// alert("inside first If");

customArg = document.getElementById("Latitude").value; //0

// alert("After x Assignment" + customArg);

customArg = customArg + ";" + document.getElementById("Longitude").value; //1

//alert("After y Assignment" + customArg);

customArg = customArg + ";" + map.getCenter(); // 2

//alert("After NA Assignment" + customArg);

customArg = customArg + ";" + zoom; //3

//alert("After ZOOM Assignment" + customArg);

customArg = customArg + ";" + "hybrid"; //4

//alert("After MAPTYPE Assignment" + customArg);

customArg = customArg + ";" + getParameterByName('isHybrid'); //5

//alert("After IShybrid Assignment" + customArg);

GetRadWindow().close(customArg);

}

else {

//alert("Entered else");

//alert("X: " + document.getElementById("Latitude").value);

//alert("Y: " + document.getElementById("Longitude").value);

//alert("center: " + getParameterByName("center"));

//alert("zoom: " + getParameterByName("zoom"));

customArg = document.getElementById("Latitude").value; //0

customArg = customArg + ";" + document.getElementById("Longitude").value; //1

customArg = customArg + ";" + getParameterByName("center"); // 2

customArg = customArg + ";" + getParameterByName('zoom'); //3

customArg = customArg + ";" + "roadmap"; //4

customArg = customArg + ";" + "No"; //5

GetRadWindow().close(customArg);

this.Close();

}

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function Close() {

GetRadWindow().close();

}

So if the "Desc" is "true this will go to the else of this code. as you can see at the end i close it

GetRadWindow().close(customArg);

and even emphesize closing it but it works sometimes, what is it that i am doing wrong?

Checked the F12 Error Chrome debugger there is no Error.

Thanks

Window

answered on 04 Jul 2012

2 answers

244 views

[Solved] onCellClick method or equivalent ?

Hello world,

Currently working with RadGrid of telerik "RadControls for ASP.NET AJAX Q2 2012" version, I try to perform an event by clicking on a cell. I read the following topic : http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window

But it is not exactly what I want. By double clicking on a cell, i want to open a simple alert window wich display cell information instead of an edit form, and not all information of the row. This event must happen on some cells only, depending on an argument (true or false test) Is there any simple way to perform this ?

Thanks.

ASP.NET version: 4.0
OS: WS2008R2
exact browser version: Firefox 13.0 & IE9.0
exact version of the Telerik product: RadControls for ASP.NET AJAX Q2 2012
preferred programming language : C#

Grid

answered on 04 Jul 2012

3 answers

201 views

[Solved] Disable Edit & HTML mode on checkbox click using javascript

Dear Telerik Admin,
Can you please help me fnd solution to my problem.
I have a checkbox within my application & on client click of it I call an javascript function which display & hide panel control. Now I have also an RadEditor within my form, now what I want to do here is that, when I unchecks my check box I want Content within the RadEditor to be in only PREVIEW MODE (i.e I wont allow user to view edit & HTML view modes), but when user check an checkbox control all I want to show is EDIT & HTML view modes & no preview mode.

Though I have tried to implement the same as shown below :-

function OnClientClick() {

var IsCustomPageHeaderCheckBox = document.getElementById('<%= IsCustomPageHeaderCheckBox.ClientID %>');

var TemplateHeaderPanel = document.getElementById('<%= TemplateHeaderPanel.ClientID %>');

var editor = $find("<%=PageHeaderRadEditor.ClientID%>");

var selectedvalue = IsCustomPageHeaderCheckBox.checked; // getting the selected value

if (selectedvalue == true) {

TemplateHeaderPanel.style.display = 'none';

editor.set_mode(1); //Design mode

editor.set_mode(2); //Html mode

}

else {

TemplateHeaderPanel.style.display = 'block';

editor.set_mode(4); //Preview mode

}

But its not working for me.

Also, I want the same feature on (!PageIsPostBack) on code behind.

Can you help me out ?

Thanks

Ajay

Editor

answered on 04 Jul 2012

2 answers

361 views

[Solved] Insert text into rad editor at cursor position.

I have setup a page with rad editor. I have a related a customer combo box on the menu on the rad editor. I have not put any code or anything being the custom dropdow box. Basically, what I want to do is, any time an item is selected from the combo, the contents of the combo are inserted into the rad editor. The important part is, the contents are inserted into the place of the cursor.

Editor

answered on 04 Jul 2012