How to create a RadComboBox that is initially not selecting any items? - telerik

I have a RadComboBox on a page. How do I initiate it without any items being selected?
The following box contains two items, I have tried to use both ClearSelection() and SelectedIndex = -1, without any luck.
It still looks like this (having its first item selected).
RadComboBoxTest.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RadComboBoxTest.aspx.cs"
Inherits="Foo.Bar.RadComboBoxTest" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>test</title>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server"/>
<div>
Items:<br/>
<telerik:RadComboBox ID="cmbTest" DataValueField="id"
DataTextField="name" runat="server"/>
</div>
</form>
</body>
</html>
RadComboBoxTest.aspx.cs
using System;
{
namespace Foo.Bar
{
public partial class RadComboBoxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
cmbTest.DataSource = new object[]
{
new { id = 23, name = "twentythree"},
new { id = 24, name = "twentyfour"}
};
cmbTest.DataBind();
cmbTest.ClearSelection();
}
}
}
}

Have you tried creating a new object, with the id of 0, and name = empty string (" "), and setting the default value to 0
Note: Comment below with Telerik link explains this much better

Related

ext.net combobox unable to load data from database

I also tried the following code..trying with a handler
in Index.aspx
<ext:Store ID="Store1" IsPagingStore="true" runat="server">
<Proxy>
<ext:AjaxProxy Url="../../Shared/JsonHandler.ashx">
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="names" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="name" Type="String" Mapping="nameList" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
In JsonHandler.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType ="text/json";
var requestParams = new StoreRequestParameters(context);
FormExampleController ex=new FormExampleController ();
var list = ex.getValue();
context.Response.Write(string.Format("{{'Names':{0}}}",JSON.Serialize(list)));
}
In FormController
public List<string> getValue()
{
FormUser user = new FormUser();
user.nameList = new List<string>
{
"A",
"B",
"C",
"D"
};
return user.nameList;
}
Here again the values are getting passed to the handler, but the combobox is shown as empty!!Any suggestions?
It appears binding the Store to a simple List or Array of strings is not possible.
The following is a test case that should work, but doesn't. I'm investigating a solution and will post an update soon.
Example
<%# Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var store = this.ComboBox1.GetStore();
store.DataSource = new List<string> { "A", "B", "C", "D" };
store.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="name">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>
The following sample binds to a simple List<object>, although obviously this is not a solution to the original problem, but I present here as a possible temporary work-around.
Example
<%# Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var store = this.ComboBox1.GetStore();
store.DataSource = new List<object> {
new { name = "A" },
new { name = "B" },
new { name = "C" },
new { name = "D" }
};
store.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="name">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>
Yes, such plain structure is not supported by Store. Store expects collection of objects (object should contain properties which are defined as fields in model)
You should transform your List of string to List of object, like
(new List<string>{"a", "b", "s"}).Select(s => new {FieldName = s})

rally: How to get a dropdown updated automatically after I change another dropdown menu?

I am trying to setup two dropdown menus. The values in one depend on the current value of the other. How do I link them in a way that when i changed the selected value in one drop down menu, it automatically updates the other dropdown menu?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User Stories By Iteration</title>
<meta name="Name" content="App Example: User Stories Table" />
<script type="text/javascript" src="/apps/1.32/sdk.js"></script>
<script type="text/javascript">
var rallyDataSource;
var relDropdown;
var table;
var relDropdown2;
function onReleaseSelected(releases, eventArgs) {
var queryConfig = {
type : 'testset',
attribute : 'Name',
query: '(Release.Name = "' + releases.getDisplayedValue() + '")'
};
relDropdown2 = new rally.sdk.ui.ObjectDropdown(queryConfig, rallyDataSource);
relDropdown2.display(document.getElementById("releaseDiv2"));
}
function onLoad() {
rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
var relConfig = {};
relDropdown = new rally.sdk.ui.ReleaseDropdown(relConfig, rallyDataSource);
relDropdown.display(document.getElementById("releaseDiv"), onReleaseSelected);
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div>
<div id="releaseDiv"></div>
<div id="releaseDiv2"></div>
</div>
<br/><br/>
</body>
</html>
SDK 1.x dropdowns cannot have their values refreshed once they are rendered. What you can do however is destroy the second dropdown and recreate it in response to the first dropdown's change event.
So in your onReleaseSelected just add the following code before creating and displaying a new one:
if(relDropdown2) {
relDropdown2.destroy();
}

iOS 6 Mobile Safari Session Variables not retained when set via AJAX [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is Safari on iOS 6 caching $.ajax results?
I have been having a problem with session variables set via AJAX in mobile Safari iOS 6. I included a sample that will set a session variable, redirect to another page, abandon the session and start over. This works fine the first 2 times. On the third time through the process, the session variables get lost. The problem only happens in iOS 6 safari. It works in all other browsers I have tried.
The sample consists of 3 pages. Page1 sets the session variable and redirects to Page 2. Page 2 displays the session variable. Page 3 abandons the session variable.
Page 1 HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Page1.js" />
</Scripts>
</asp:ScriptManager>
<div onclick="setSessionVariable()">Set session variable and redirect to page 2</div>
</form>
</body>
</html>
Page 1 Javascript:
function setSessionVariable() {
PageMethods.SetSessionVariable(displaySetSessionVariable);
}
function displaySetSessionVariable(bReturn) {
window.location = "Page2.aspx";
}
Page 1 Code:
using System.Web.Services;
namespace SafariSessionProblem {
public partial class Page1 : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
[WebMethod]
public static Boolean SetSessionVariable() {
System.Web.HttpContext.Current.Session["TestVariable"] = 1;
return true;
}
}
}
Page 2 HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="lbl" runat="server" Text="Label"></asp:Label><br /><br />
<div onclick="window.location = 'Page3.aspx'">Redirect to page 3 and abondon session</div>
</form>
</body>
</html>
Page 2 Code:
namespace SafariSessionProblem {
public partial class Page2 : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
lbl.Text = Session["TestVariable"].ToString();
}
}
}
Page 3 HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div onclick="window.location = 'Page1.aspx'">Start over</div>
</form>
</body>
</html>
Page 3 Code:
namespace SafariSessionProblem {
public partial class Page3 : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
Session.Abandon();
}
}
}
I have figure out the issue its because in IOS6 Safari cached ajax requests and responses, so instead on sending request to server it uses cached requests. in order to over come this just add timestamp into your Ajax requests, it will work fine. i have placed code that I have used update your code with the help of this. hope will help you.
this is new variable to overcome this issue parameters.timeStamp = new Date().getTime();
parameters.qString = location.hash;
parameters.timeStamp = new Date().getTime();//this new line for safari issue
application.ajax({
url: application.ajaxUrl + "ajax",
type: "post",
dataType: "json",
data: $.extend({method:parameters.method}, parameters),
success: function( response ){
stop_spinner();
})
});
Thanks

Use of Update Panel of AJAX Extension Tab

i had binding some data to gridview in a page loadevent.....
And the gridview is in update panel..
i had included a Button in Each row of gridview using template field..
Every thing is working fine, But when i click on Button i am assigning a Row content's to a labels which is outside the update panel...
But this is not happening......
The Code Snippet inside the Button is working fine!!!!!
Because it was working good before the use of Update Panel........ Since the Whole page was Posting to a server to avoid this i used Update Panel..
But it is arrising another problem..
Can any Suggest how can i get out this kind of problem!!!!!!!!!!!
Thank in Advance!!!!
When you generates a postback inside an UpdatePanel, by default, only the content within the panel is updated. That's the magic of the UpdatePanel :)
You'll need to include the labels you want to modify inside the same update panel the grid is or wrap them on a separated UpdatePanel and update it if the grid panel get updated.
Here you have a sample about how to trigger the update of a second update panel.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (LastUpdate.AddSeconds(5.0) < DateTime.Now)
{
UpdatePanel1.Update();
LastUpdate = DateTime.Now;
}
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
if (!IsPostBack)
{
LastUpdate = DateTime.Now;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:Panel ID="Panel1"
GroupingText="UpdatePanel1"
runat="server">
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
The content in this UpdatePanel only refreshes if five or more
seconds have passed since the last refresh and the button in
UpdatePanel2 was clicked. The time is checked
server-side and the UpdatePanel.Update() method is called. Last
updated: <strong>
<%= LastUpdate.ToString() %>
</strong>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="Panel2"
GroupingText="UpdatePanel2"
runat="server">
<asp:UpdatePanel ID="UpdatePanel2"
runat="server">
<ContentTemplate>
<p>
This UpdatePanel always refreshes if the button is clicked.
Last updated: <strong>
<%= DateTime.Now.ToString() %>
</strong>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="Button1" Text="Button1" runat="server" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

MVC3, Ajax and a modal form with client-side unobtrusive validation

I can't get the combination of things in the title to work together. I've read various questions but not found one that covers everything I'm trying to do.
I'm using jqModal for my modal window. I'm using Ajax.BeginForm. My models are decorated with [Required], [Display(...)] etc.
This stuff is all being placed on a page using #Html.RenderAction(...)
Depending on whether I use OnBegin or OnComplete in the ajax call, I either get no client-side validation (the update just doesn't take), or the modal gets stuck in a state where the whole page is "modalled out" without a dialog in place. But actually what I want is for the modal to stay in place if there is either a client or server side validation error.
The site does not require any functionality to work without javascript being available/enabled.
head:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jqModal.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.cleditor.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.timeago.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jqModal.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/functions.js")"></script>
The model:
public class ReplacedTextModel {
public ReplacedTextModel() { }
public ReplacedTextModel(int id, string text, string replaced) {
Id = id;
Text = text;
Replaced = replaced;
}
public int Id { get; set; }
[Required, Display(Description = "The text of the question", Prompt = "Please enter the question text."), UIHint("MultilineString")]
public string Text { get; set; }
public string Replaced { get; set; }
}
The editor template (this contains some extension methods but they're not relevant to the problem, so please ignore):
#model string
<div class="form-element">
#Html.Label("", new Dictionary<string, object> { { "title", Html.Description("") } })
#if (Html.IsRequired()) {
<span class="form-required">*</span>
}
<div class="form-control">
#Html.TextArea("", Model, new Dictionary<string, object> { { "title", Html.Prompt("") } })
<div class="form-validation">
#Html.ValidationMessage("")
</div>
</div>
</div>
The view (there may be many of these on a page, and they may be repeated, so I'm using the Guids for uniqueness):
#model ReplacedTextModel
#{
var id = Guid.NewGuid().ToString("N");
var windowId = "id_" + id + "_window";
var triggerId = "id_" + id + "_trigger";
var replaceId = "id_" + id + "_replace";
var functionId = "id_" + id + "_closeForm";
}
<div id="#replaceId">
#Html.Raw(Model.Replaced)
<span class="edit-mode"><a id="#triggerId" href="#">edit</a></span>
<div id="#windowId" class="jqmWindow" style="display: none">
#using (Ajax.BeginForm("Text", new AjaxOptions { UpdateTargetId = replaceId, OnBegin = functionId, HttpMethod = "POST" })) {
#Html.HiddenFor(x => x.Id)
#Html.EditorFor(x => x.Text)
<input type="submit" value="Save" />
}
<div>Cancel</div>
</div>
<script type="text/javascript">
$(function () { $("##windowId").jqm({ trigger: "##triggerId" }); });
function #(functionId)() {
// THIS IS A PROBLEM
// if it's not called or is called on OnBegin then the modal doesn't close properly
// if OnComplete is used, the dialog disappears but the validation doesn't work
// in either case, validation failure on backend (try posting whitespace) doesn't show validation errors.
$("##windowId").jqmHide();
};
</script>
</div>
The controller methods:
public ActionResult Text(int id) {
return PartialView("Text", ReplacedTextModel.Get(id));
}
[HttpPost]
public ActionResult Text(int id, string text) {
if (ModelState.IsValid) {
try {
if (string.IsNullOrWhiteSpace(text)) throw new ArgumentException("No text was provided for the question.", "text");
ReplacedTextModel.Update(id, text);
} catch (Exception ex) {
ModelState.AddModelError(ex);
}
}
return Text(id);
}
Sorry for the long post, but I've seen others mention that it's not a bad thing! Happy to post any additional code/info if requested. I may have missed something as I have copy/pasted from a few locations in the project.
Thanks in advance.

Resources