Using the MVC #Html.DevExpress().ColorEdit component I couldn't find a way to detect color changed by user.The is no "ClientSideEvents" on this control.The DevExpress Help mention a "ColorChanged" event but after exhaustive search couldn't find anything related. Bellow is the code that is working:
#Html.DevExpress().ColorEdit(s => {
s.Name = "ColorEdit";
s.Properties.AllowUserInput = true;
s.ClientEnabled = true;
}).GetHtml()
You can find the "ColorChanged" event in "Properties". Also make sure to set the property "EnableClientSideAPI" to true.
#Html.DevExpress().ColorEdit(s => {
s.Name = "ColorEdit";
s.Properties.AllowUserInput = true;
s.ClientEnabled = true;
s.Properties.EnableClientSideAPI = true;
s.Properties.ClientSideEvents.ColorChanged = "onColorChanged";
}).GetHtml()
Javascript:
function onColorChanged(s, e) {
alert("color has changed");
}
Related
I want to disable some controls on my asp page from a ControlCollection.
This is my code.
foreach (System.Web.UI.Control c in ControlCollection)
{
if (c.GetType().FullName.Equals("System.Web.UI.WebControls.Table"))
{
TableRow t = (TableRow)c;
t.Enabled = false;
}
else if (c.GetType().FullName.Equals("System.Web.UI.WebControls.TextBox"))
{
TextBox t = (TextBox)c;
t.Enabled = false;
}
.......
......
///Like this I do for all controls
}
I need a better approach at this. I searched on Internet but didn't find any solution.
You can use the .OfType<> extension like this in order to have more elegant code:
collection.OfType<Table>().ToList().ForEach(c => c.Enabled = false);
collection.OfType<TextBox>().ToList().ForEach(c => c.Enabled = false)
Do all controls in your list inherit from System.Web.UI.WebControl? If so, than this code may help. (Didn't test it myself)
Type wc = new System.Web.UI.WebControls.WebControl(HtmlTextWriterTag.A).GetType();
foreach (System.Web.UI.Control c in ControlCollection)
{
if (c.GetType().IsSubclassOf(wc))
{
((System.Web.UI.WebControls.WebControl)c).Enabled = false;
}
}
And even more elegant (thanx to Shadow Wizard )
ControlCollection.OfType<System.Web.UI.WebControls.WebControl>().ToList().ForEach(c => c.Enabled = false);
Try to use is.
if (c is Table)
{
}
else if (c is TextBox)
{
}
Or consider doing a switch statement on the type name.
switch (c.GetType().Name.ToLower())
{
case "table":
break;
case "textbox":
break;
}
I have develop a Telerik Radscheduler in that i have write the code like below in that i want disable/Enable the perticuler time-slot for an event,in this disable is working fine but enable not working i can't understand why it is not enable to allow-insert.please help me where i need to change to resolve this problem...
protected void RadScheduler1_TimeSlotCreated1(object sender, TimeSlotCreatedEventArgs e)
{
//Getting Business hour time
mybusinesscalendarEntities objEntity = new mybusinesscalendarEntities();
var Result = from bhours in objEntity.businesshours where bhours.BusinessId == businessid select bhours;
if (Result.Count() > 0)
{
var Hours = (from bhours in objEntity.businesshours where bhours.BusinessId == businessid select bhours).First();
//Get particular day businee hour timings and disable the time slot
string Day = System.DateTime.Today.DayOfWeek.ToString();
if (Day == "Monday")
{
string WorkDay = Hours.MondayFromTime.Value.ToShortTimeString();
string WorkDayStart = WorkDay.Remove(WorkDay.Length - 2, 2);
string WorkDayEnd = Hours.MondayToTime.Value.ToShortTimeString();
string WorkDayEndTime = WorkDayEnd.Remove(WorkDayEnd.Length - 2, 2);
if ((e.TimeSlot.Start.TimeOfDay < TimeSpan.Parse(WorkDayStart.Trim())) || (e.TimeSlot.Start.TimeOfDay > TimeSpan.Parse(WorkDayEndTime.Trim())))
{
e.TimeSlot.CssClass = "Disabled";
RadScheduler1.ReadOnly = true;
}
else
{
RadScheduler1.ReadOnly = false;
RadScheduler1.AllowInsert = true;
RadScheduler1.AllowEdit = true;
RadScheduler1.AllowDelete = true;
}
If when your last timeslot is created (last time event is fired) this part evaluates to true.
if ((e.TimeSlot.Start.TimeOfDay < TimeSpan.Parse(WorkDayStart.Trim())) || (e.TimeSlot.Start.TimeOfDay > TimeSpan.Parse(WorkDayEndTime.Trim())))
{
e.TimeSlot.CssClass = "Disabled";
RadScheduler1.ReadOnly = true;
}
Then your entire scheduler will be in read only mode. This means no editing inserting deleting moving etc.
Your intention seems to be to disabled specific timeslots. I dont think you intend to set these properties in this particular event.
RadScheduler1.ReadOnly = false;
RadScheduler1.AllowInsert = true;
RadScheduler1.AllowEdit = true;
RadScheduler1.AllowDelete = true;
Test by commenting out the lines that set the readonly, allowinster, allowedit, allowdelete properties since they are not per timeslot, rather for the entire scheduler
Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.
Currently it does what I want when I open the page (i.e. the first time)...
function changeParent() {
}
tinymce.create('tinymce.plugins.MoePlugin', {
createControl: function(n, cm) {
switch (n) {
case 'mylistbox':
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts',
onselect: function(v) {
tinyMCE.execCommand("mceInsertContent",false,v);
}
});
<% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET
yourobject = '<%= insert %>'; // This is JS AND .NET
mlb.add(yourobject, yourobject); // This is JavaScript
<% } %>
// Return the new listbox instance
return mlb;
}
return null;
}
});
<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>
I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the 'mylistbox' object and reassign it, but am unsure how to put it all together.
As far as updating the TinyMCE listbox goes, you can try using a tinymce.ui.NativeListBox instead of the standard tinymce.ui.ListBox. You can do this by setting the last argument to cm.createListBox to tinymce.ui.NativeListBox. This way, you'll have a regular old <select> that you can update as you normally would.
The downside is that it looks like you'll need to manually hook up your own onchange listener since NativeListBox maintains its own list of items internally.
EDIT:
I played around a bit with this last night and here's what I've come up with.
First, here's how to use a native list box and wire up our own onChange handler, the TinyMCE way:
// Create a NativeListBox so we can easily modify the contents of the list.
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
As far as updating the list box at runtime, your idea of calling a controller action to get the new items is sound; I'm not familiar with ASP.NET, so I can't really help you there.
The ID of the <select> that TinyMCE creates takes the form editorId_controlId, where in your case controlId is "mylistbox". Firebug in Firefox is the easiest way to find the ID of the <select> :)
Here's the test button I added to my page to check if the above code was working:
<script type="text/javascript">
function doFoo() {
// Change "myEditor" below to the ID of your TinyMCE instance.
var insertsElem = document.getElementById("myEditor_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
optElem.value = "1";
optElem.text = "Foo";
insertsElem.add(optElem, null);
optElem = document.createElement("option");
optElem.value = "2";
optElem.text = "Bar";
insertsElem.add(optElem, null);
}
</script>
<button onclick="doFoo();">FOO</button>
Hope this helps, or at least gets you started.
Step 1 - Provide a JsonResult in your controller
public JsonResult GetInserts(int containerId)
{
//some code to get list of inserts here
List<string> somedata = doSomeStuff();
return Json(somedata);
}
Step 2 - Create javascript function to get Json results
function getInserts() {
var params = {};
params.containerId = $("#184").val();
$.getJSON("GetInserts", params, updateInserts);
};
updateInserts = function(data) {
var insertsElem = document.getElementById("183_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
for (var item in data) {
optElem = document.createElement("option");
optElem.value = item;
optElem.text = data[item];
try {
insertsElem.add(optElem, null); // standards compliant browsers
}
catch(ex) {
insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list)
}
}
};
Step 3 - Create NativeListBox (code above provided by ZoogieZork above)
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
//populate inserts on listbox create
getInserts();
I have an ASP.NET code-behind page linking several checkboxes to JavaScript methods. I want to make only one JavaScript method to handle them all since they are the same logic, how would I do this?
Code behind page load:
checkBoxShowPrices.Attributes.Add("onclick", "return checkBoxShowPrices_click(event);");
checkBoxShowInventory.Attributes.Add("onclick", "return checkBoxShowInventory_click(event);");
ASPX page JavaScript; obviously they all do the same thing for their assigned checkbox, but I'm thinking this can be reduced to one method:
function checkBoxShowPrices_click(e) {
if (_hasChanged) {
confirm(
'All changes will be lost. Do you wish to continue?',
function(arg) {
if (arg.toUpperCase() == 'YES') {
var checkBox = document.getElementById('<%=checkBoxShowPrices.UniqueID%
>');
checkBox.checked = !checkBox.checked;
eval("<%=base.GetPostBackEventReference(checkBoxShowPrices)%>");
_hasChanged = false;
}
});
return false;
} else {
eval("<%=base.GetPostBackEventReference(checkBoxShowPrices)%>");
}
}
function checkBoxShowInventory_click(e) {
if (_hasChanged) {
confirm(
'All changes will be lost. Do you wish to continue?',
function(arg) {
if (arg.toUpperCase() == 'YES') {
var checkBox = document.getElementById('<%
=checkBoxShowInventory.UniqueID%>');
checkBox.checked = !checkBox.checked;
eval("<%=base.GetPostBackEventReference(checkBoxShowInventory)%>");
_hasChanged = false;
}
});
return false;
} else {
eval("<%=base.GetPostBackEventReference(checkBoxShowInventory)%>");
}
}
Add to the event the checkbox that is raising it:
checkBoxShoPrices.Attributes.Add("onclick", "return checkBox_click(this, event);");
Afterwards in the function you declare it like this:
function checkBoxShowPrices_click(checkbox, e){ ...}
and you have in checkbox the instance you need
You can always write a function that returns a function:
function genF(x, y) {
return function(z) { return x+y*z; };
};
var f1 = genF(1,2);
var f2 = genF(2,3);
f1(5);
f2(5);
That might help in your case, I think. (Your code-paste is hard to read..)
In Flex I'm using the following code to allow sorting in a DataGrid (the data is paged and sorted serverside).
private function headerReleaseHandler(event:DataGridEvent):void
{
var column:DataGridColumn = DataGridColumn(event.currentTarget.columns[event.columnIndex]);
if(this.count>0)
{
if(this.query.SortField == column.dataField)
{
this.query.SortAscending = !this.query.SortAscending;
}
else
{
this.query.SortField = column.dataField;
this.query.SortAscending = true;
}
this.fill();
}
event.preventDefault();
}
This works perfectly, except that the arrows that indicate sorting isn't shown. How can I accomplish that?
Thanks!
/Niels
There is an example here if this is what you are looking for:
http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/
It looks like you need to refresh the collection used by your dataprovider.
I have encountered the same problem and the only solution I found was to override the DataGrid and create a custom one.
Here is the class:
public class DataGridCustomSort extends DataGrid
{
public function DataGridCustomSort()
{
super();
addEventListener(DataGridEvent.HEADER_RELEASE,
headerReleaseHandlerCustomSort,
false, EventPriority.DEFAULT_HANDLER);
}
public function headerReleaseHandlerCustomSort(event:DataGridEvent):void {
mx_internal::sortIndex = event.columnIndex;
if (mx_internal::sortDirection == null || mx_internal::sortDirection == "DESC")
mx_internal::sortDirection = "ASC";
else
mx_internal::sortDirection = "DESC";
placeSortArrow();
}
}
You have to specifically call the placeSortArrow() method when you get the HEADER_RELEASE event and set the column index and direction information.
in the above code what does "this" refer to is it the datagrid because I am confused by this.query.SortField , I am assuming 'this' and "query' are your own custom objects. and why are you checking for count. what count is that.
Regards
-Mohan