RadComboBox SelectedIndexChanged inside Advanced Edit Template in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

RadComboBox SelectedIndexChanged inside Advanced Edit Template

9 Answers 313 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Joe asked on 18 Dec 2009, 03:31 PM

I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.

I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:

                    RadComboBox resource = (RadComboBox)e.Container.FindControl("ResourceInput");         
            resource.Skin = _skin;         
            resource = LoadResources(resource);         
            resource.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(resource_SelectedIndexChanged);         
                     

In the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.

Thanks!

9 Answers, 1 is accepted

answered on 22 Dec 2009, 08:15 PM

Peter,

Unfortunately, this is a requirement. I would much rather if it wasn't, but not my choice....

I tried implementing your suggestion, but I ran into 2 stumbling blocks.

1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class. Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method.
2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control. I tried adding the javascript through the main web part class, but in the LoadCountries() function I need to have access to this: $find("<%= CountriesRadComboBox.ClientID %>") which I don't have since the control only exists in the Template class.

So I might be pretty much stuck on this approach. Is there any other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow get access to the controls within the AdvancedForm Template through that event.

Thanks.

answered on 25 Dec 2009, 01:07 PM

Hi Joe,

I think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:

<script type="text/javascript">

function OnClientSelectedIndexChanged(sender, eventArgs) {

var selectedValue = document.getElementById("selectedValue");

selectedValue.value = eventArgs.get_item().get_text();

}

</script>

<asp:HiddenField ID="selectedValue" runat="server" />

<telerik:RadScheduler ID="RadScheduler1"

runat="server" onformcreated="RadScheduler1_FormCreated"> </telerik:RadScheduler>

protected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)

{

if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)

{

RadComboBox resource = new RadComboBox();

resource.Items.Add(new RadComboBoxItem("a"));

resource.Items.Add(new RadComboBoxItem("b"));

resource.Items.Add(new RadComboBoxItem("c"));

resource.OnClientSelectedIndexChanged = "OnClientSelectedIndexChanged";

resource.AutoPostBack = true;

Panel basicPanel = (Panel)e.Container.FindControl("BasicControlsPanel");

basicPanel.Controls.Add(resource);

Label selectedValueLbl = new Label();

if (selectedValue.Value != null)

selectedValueLbl.Text = selectedValue.Value;

basicPanel.Controls.Add(selectedValueLbl);

selectedValue.Value = null;

}

Let us know how it goes.

All the best,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 06 Jan 2010, 11:11 PM

Peter,

Thanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help.

When the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field is still null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel?

Here is my JS for reference:

    
            function LoadProjects(sender, eventArgs) {  
        
            var selectedValue = document.getElementById('" + lblResourceValue.ClientID + "');  
        
            selectedValue.value = eventArgs.get_item().get_text();  
        
            alert(selectedValue.value);  
        
            }

Thanks again!

answered on 07 Jan 2010, 09:39 PM

Peter,

I never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work.

I did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method working.

Thanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!

answered on 06 Sep 2010, 05:05 AM

Hello Milind,

Did you try the code from the post on12/25/2009? Do you experience any problems with the following code?:

protected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)

{

if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)

{

RadComboBox resource = new RadComboBox();

resource.Items.Add(new RadComboBoxItem("a"));

resource.Items.Add(new RadComboBoxItem("b"));

resource.Items.Add(new RadComboBoxItem("c"));

resource.OnClientSelectedIndexChanged = "OnClientSelectedIndexChanged";

resource.AutoPostBack = true;

Panel basicPanel = (Panel)e.Container.FindControl("BasicControlsPanel");

basicPanel.Controls.Add(resource);

Label selectedValueLbl = new Label();

if (selectedValue.Value != null)

selectedValueLbl.Text = selectedValue.Value;

basicPanel.Controls.Add(selectedValueLbl);

selectedValue.Value = null;

}

Kind regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 12 Nov 2011, 02:17 PM

What I think is going on here is: (though not exactly related to the topic header)

You have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data)

So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events)

Lets assume you have a the following attibutes "Parent" and "Children". You know what "Parent"'s value is, before or during the FormCreated event, and you want "Children" to be a combobox with items retrieved each time from the database (dynamic), based on a value from "Parent".

protected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)

{

RadTextBox txtChildren = (RadTextBox)e.Container.FindControl("AttrChildren")

txtChildren.Visible = false;

RadComboBox rcbChildren = new RadComboBox();

rcbRegister.Label = "Select Child:"

rcbChildren.Width = Unit.Pixel(250);

rcbChildren.DataValueField = "childIdFromDataSet";

rcbChildren.DataTextField = "childTextFromDataSet";

rcbChildren.Attributes.Add("theclientid", txtChildren.ClientID.ToString());

rcbChildren.OnClientSelectedIndexChanged = "OnChildrenSelectedIndexChanged";

//...........

//create you DataTable,HasTable,2DArray here, and use your parameters (Parent's value in this example)

//........

//da.Fill(dt)

//...........

rcbChildren.DataSource = dt;

rcbChildren.DataBind();

if (txtChildren.Text != "") {

rcbChildren.SelectedValue = txtChildren.Text;

rcbChildren.Text = rcbRegister.txtChildren.Text;

}

txtChildren.Parent.Controls.Add(rcbChildren);

}

And your Javascript function

function OnChildrenSelectedIndexChanged(sender, eventArgs) {

var newvalue = eventArgs.get_item().get_value();

var passedclientid = sender.get_attributes().getAttribute("theclientid");

var field1 = document.getElementById(passedclientid);

var field2id = passedclientid + "_text";

var field2 = document.getElementById(field2id);

field1.value = newvalue;

field2.value = newvalue;

}