On my UWP app, I have added a CalendarView and programmatically selected several dates. Now I want to make it read only to the end user. But the control does not provide such functionality and making IsEnabled = False is not an option.
Please let me know a way of making the control read only.
Thanks.
NOTE: I get this problem with the keyboard. When a user hits enter key or space bar key, Calender changes its view. I want to make it static.
Setting IsEnabled to False is the right way to go. I guess the reason that you don't want to use it is because doing so would dim the whole control. So the real question comes down to - how to disable the control while making its appearance unchanged?
Generally, the appearance of a disabled (i.e. IsEnabled="False") control is defined in the Disabled state inside its style. In your case though things will get a little bit more complicated because you need to update more than one styles as the CalendarView is a complex control.
Here is how it can be done.
First, you need to find the default style of the CalendarView control and put it inside your App.xaml. Then, search for <VisualState x:Name="Disabled"> and comment out everything within this visual state. There should be two of them 'cause the first one is for the up/down button and second one is for all the day of week text.
Apart from this, you also need to manually update the color of each CalendarViewDayItem simply because the TextBlock which is used to display the day number doesn't live inside its style.
To do this in code, go to my answer here and copy overChildren extension method, then you just need to run the following code in your Loaded event. Note you might want to give it a little bit delay so the Disabled state is applied properly.
Loaded += async (s, e) =>
{
await Task.Delay(100);
var dayItems = MyCalendarView.Children().OfType<CalendarViewDayItem>();
foreach (var dayItem in dayItems)
{
var textBlock = dayItem.Children().OfType<TextBlock>().Single();
textBlock.Foreground = new SolidColorBrush(Colors.Black);
}
};
After doing all this, your CalendarView control will now appear just as normal when it's actually disabled.
Hope this helps!
You could also try
YourCalendarView.IsHitTestVisible = false;
or
<CalendarView IsHitTestVisible="False" />
For anyone who's looking for a complete code here it is. All this is thanks to Justin XL.
static int minOne = -1;
static int plsOne = 1;
public static async Task ManipCalenderUserInterface(List<CalendarView> calenders, List<List<DateTime>> datesListByMonth)
{
try
{
CoreDispatcher coreDispatcher = Window.Current.Dispatcher;
await Task.Run(async () =>
{
await Task.Delay(1000);
//coreDispatcher is required since you're not on the main thread and you can't manip UI from worker threads
await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
int cnt = 0;
bool cont = false;
bool stop = false;
//Highlight color. I get it from my resource file
SolidColorBrush colorBrush = (SolidColorBrush)Application.Current.Resources["FgBlue1"];
//This code wrote to manipulate multiple calenders
foreach (var item in calenders)
{
var dayItems = item.Children().OfType<CalendarViewDayItem>();
var firstDayOfMonth = new DateTime(dayItems.Skip(15).First().Date.Year, dayItems.Skip(15).First().Date.Month, plsOne);
var lastDayOfMonth = firstDayOfMonth.AddMonths(plsOne).AddDays(minOne);
foreach (var dayItem in dayItems)
{
var textBlock = dayItem.Children().OfType<TextBlock>().Single();
int dayNum = System.Convert.ToInt32(textBlock.Text);
if (dayNum == 1 && !stop) cont = true;
if (cont && dayNum >= 1 && dayNum <= lastDayOfMonth.Day)
{
textBlock.Foreground = new SolidColorBrush(Colors.Black);
//Bold the today date on this month's calender
if (dayItem.Date == DateTime.Now.Date)
{
textBlock.FontWeight = FontWeights.Bold;
}
//datesListByMonth: contains all the dates need to be highlighted on th calender
if (datesListByMonth[cnt] != null && datesListByMonth[cnt].Contains(dayItem.Date.Date))
dayItem.Background = colorBrush;
}
if (cont && dayNum == lastDayOfMonth.Day)
{
cont = false;
stop = true;
}
}
cnt++;
cont = false;
stop = false;
}
});
});
}
catch (Exception ex)
{
}
}
I know this is late, but assuming that you want the user to still be able to select and scroll through months, etc. this is all you should need to do:
<CalendarView SelectionMode="Multiple">
<CalendarView.Resources>
<Style TargetType="CalendarViewDayItem">
<Setter Property="IsHitTestVisible"
Value="False" />
<Setter Property="IsTabStop"
Value="False" />
</Style>
</CalendarView.Resources>
</CalendarView>
The IsHitTestVisible setter will ensure that the DayViewItem cannot be clicked or tapped, and the IsTabStop setter prevents keyboard focus on it.
This allows you to keep the full CalendarView functionality while simply disabling user date-selection.
Related
I have a Google Sheet set up with two buttons on the Form sheet, which are attached to two different scripts. They work perfectly on PC, but unfortunately, custom buttons still do not appear to work on the Google Sheets app for tablets. I was able to incorporate a workaround via a dropdown box, but that is still a bit finicky, so I'm wondering whether I could just switch both PC and tablet users to checkboxes instead.
If the checkbox in cell G3 is checked, the AUTOFILL script should run and the checkbox should be cleared; subsequently, if the checkbox in cell G5 is checked, the UPDATE script should run and its checkbox be cleared.
What would be the best way of doing this, now that checkboxes are a thing in Google Sheets?
Here is the code I am currently using, working for both the buttons and the dropdown:
function onEdit(e) {
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
function AUTOFILL() {
var sheet1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
var sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form');
var valueOfData = sheet1.getRange(sheet1.getLastRow(), 1).getValue();
sheet2.getRange('B3').setValue(valueOfData + 1);
}
function UPDATE() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var formSS = ss.getSheetByName("Form");
var dataSheet = ss.getSheetByName("Data");
var values = formSS.getRange("B3:B6").getValues().reduce(function(a, b) {
return a.concat(b)
});
var partNum = values[0];
var row;
dataSheet.getDataRange().getValues().forEach(function(r, i) {
if (r[0] === partNum) {
row = i + 1
}
})
row = row ? row : dataSheet.getLastRow() + 1;
var data = dataSheet.getRange(row, 1, 1, 4).getValues()[0].map(function (el, ind){
return el = values[ind] ? values[ind] : el;
})
var now = [new Date()];
var newData = data.concat(now)
dataSheet.getRange(row, 1, 1, 5).setValues([newData]);
formSS.getRange("B3:B6").clearContent()
}
A you correctly said, running scripts on button clicks does not appear to work on the Android mobile app. This is an issue that has already been reported (see this and this). A common workaround used to be using Android add-ons but they are now deprecated.
In order to make your script run using checkbox, one thing you can do is to modify your onEdit function. After the following modifications, it will check whether any of the checkboxes is enabled, run the appropiate function based on that, and then disable it again. You can see the updated onEdit function below:
function onEdit(e) {
var isAutofill = SpreadsheetApp.getActiveSheet().getRange("G3").getValue();
var isUpdate = SpreadsheetApp.getActiveSheet().getRange("G5").getValue();
if (isAutofill && isUpdate) {
Browser.msgBox("You cannot autofill and update at once!");
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
} else if (isAutofill) {
AUTOFILL();
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
} else if (isUpdate) {
UPDATE();
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
}
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
I have succesfully rendered my own component as the cellEditor and would like and on-leave I would like it to try to validate the value and prevent the closing if it fails.
If I look at this then https://www.ag-grid.com/javascript-grid-cell-editing/#editing-api there's cancelable callback functions for editing. But in this callback function is there a way to access the current instantiated component? I would think that would be the easiest way to handle this.
I'm using vee-validate so the validation function is async, just to keep in mind.
Use Full row editing.
Create a global variable like
var problemRow = -1;
Then Subscribe to this events:
onRowEditingStarted: function (event) {
if (problemRow!=-1 && event.rowIndex!=problemRow) {
gridOptions.api.stopEditing();
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
},
onRowEditingStopped: function (event) {
if (problemRow==-1) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
}
if (problemRow == event.rowIndex) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
else{
problemRow=-1;
}
}
},
I had a similar issue - albeit in AngularJS and the non-Angular mode for ag-grid - I needed to prevent the navigation when the cell editor didn't pass validation.
The documentation is not very detailed, so in the end I added a custom cell editor with a form wrapped around the input field (to handle the niceties such as red highlighting etc), and then used Angular JS validation. That got me so far, but the crucial part was trying to prevent the user tabbing out or away when the value was invalid so the user could at least fix the issue.
I did this by adding a value parser when adding the cell, and then within that if the value was invalid according to various rules, throw an exception. Not ideal, I know - but it does prevent ag-grid from trying to move away from the cell.
I tried loads of approaches to solving this - using the tabToNextCell events, suppressKeyboardEvent, navigateToNextCell, onCellEditingStopped - to name a few - this was the only thing that got it working correctly.
Here's my value parser, for what it's worth:
var codeParser = function (args) {
var cellEditor = _controller.currentCellEditor.children['codeValue'];
var paycodeId = +args.colDef.field;
var paycodeInfo = _controller.paycodes.filter(function (f) { return f.id === paycodeId; })[0];
// Check against any mask
if (paycodeInfo && paycodeInfo.mask) {
var reg = new RegExp("^" + paycodeInfo.mask + '$');
var match = args.newValue.match(reg);
if (!match) {
$mdToast.show($mdToast.simple().textContent('Invalid value - does not match paycode format.').position('top right').toastClass('errorToast'))
.then(function(r) {
_controller.currentCellEditor.children['codeValue'].focus();
});
throw 'Invalid value - does not match paycode format.';
}
}
return true;
};
The _controller.currentCellEditor value is set during the init of the cell editor component. I do this so I can then refocus the control after the error has been shown in the toast:
CodeValueEditor.prototype.init = function (params) {
var form = document.createElement('form');
form.setAttribute('id', 'mainForm');
form.setAttribute('name', 'mainForm');
var input = document.createElement('input');
input.classList.add('ag-cell-edit-input');
input.classList.add('paycode-editor');
input.setAttribute('name', 'codeValue');
input.setAttribute('id', 'codeValue');
input.tabIndex = "0";
input.value = params.value;
if (params.mask) {
input.setAttribute('data-mask', params.mask);
input.setAttribute('ng-pattern','/^' + params.mask + '$/');
input.setAttribute('ng-class',"{'pattern-error': mainForm.codeValue.$error.pattern}");
input.setAttribute('ng-model', 'ctl.currentValue');
}
form.appendChild(input);
this.container = form;
$compile(this.container)($scope);
_controller.currentValue = null;
// This is crucial - we can then reference the container in
// the parser later on to refocus the control
_controller.currentCellEditor = this.container;
$scope.$digest();
};
And then cleared in the grid options onCellEditingStopped event:
onCellEditingStopped: function (event) {
$scope.$apply(function() {
_controller.currentCellEditor = null;
});
},
I realise it's not specifically for your components (Vue.js) but hopefully it'll help someone else. If anyone has done it a better way, I'm all ears as I don't like throwing the unnecessary exception!
I'm trying to set the colour of my current selection in Illustrator using a .jsx script.
I can't find documentation on changing styles on (selected) objects. I have read most documentation out there, but I can't seem to find such a "simple" thing anywhere. Here is the code I've come up with:
thisThing = app.activeDocument.selection[0];
thisThing.filled = true;
thisThing.fillColor = '#ff0000';
When I run it, nothing happens sadly.
I have figured out a solution - it works, but it's very messy (due to being an edited solution). This gives a random grey colour to the selected item:
var myGrey= new CMYKColor()
myGrey.black=((Math.random()*80)+10);
if (app.documents.length && app.selection.length)
{
for (var a=0; a<app.selection.length; a++)
{
try {
app.selection[a].fillColor = myGrey;
} catch (e)
{
// ignoring all possible errors ...
}
}
}
In case you want to do non-grayscale: add myGrey.Yellow = value between 1-100;
What I have is a treegrid populated with values from ajax. Every 30 seconds the store is refreshed and new data is displayed.
I need to change the styling (color or background-color) of a treegrid cell when it's value differs from the old one. The requirement is to make the comparison and styling from javascript.
Any ideas on how this could be done ?
You could use dijit.Tree's getRowStyle method to modify the style dynamically. It will be called whenever a row needs to be rendered.
Something like this might get you started:
(function(){ // closure for private variables
var previousValues = {};
var myTree = ... // lookup dijit.Tree via dijit.byId, or create
myTree.getRowStyle = function(item){
var style = {};
var itemId = myTree.store.getIdentity(item);
var newValue = myTree.store.getValue(item, "MY_ITEM_VALUE");
if(newValue !== null &&
previousValues[itemId] !== null &&
previousValues[itemId] !== newValue) {
style.backgroundColor = "#0000FF";
previousValues[itemId] = newValue;
}
return style;
};
})();
There may be better ways to keep track of the previous values, but since your store is getting changed, I really can't think of one.
I have a page of checkboxes, in some cases more than 100. I'm currently doing this:
$('form[name=myForm] input[name=myCheckbox]').change(function(){
var numChkd = $('input[name=myCheckbox]:checked').size();
console.log(numChkd);
};
But as you could imagine this can get wicked slow. Is there a better way to bind an event to multiple elements? This works, but I want to know if there is a better way?
You can bind an event to the parent container that will wrap all of the checkboxes and then check if the object that caused an event is a checkbox. This way you only bind one event handler. In jQuery you can use $.live event for this.
Don't recount every time a checkbox changes. Just use a global variable, like this:
var CheckboxesTicked = 0;
$(document).ready(function() {
CheckboxesTicked = $(":checkbox:checked").length;
$(":checkbox").change(function() {
if ($(this).is(":checked")) {
CheckboxesTicked += 1
} else {
CheckboxesTicked -= 1
}
});
});
Btw, the documentation states that you'd better use .length instead of .size() performance wise.
You could create a container element (like a Div with no styling) and attach the event handler to the container. That way, when the change() event happens on one of the checkboxes and percolates up the DOM, you'll catch it at the container level. That's one way to make this faster.
You should use .delegate(). One binding on a parent element can replace all the individual bindings on the child elements. It's perfect for this situation (and also solves the problem of attaching behavior to dynamically-added elements, should the need arise).
$('form[name=myForm]').delegate('input[name=myCheckbox]','change', function(){
var numChkd = $(this).siblings(':checked').length; // assuming siblings
console.log(numChkd);
});
This is how I would approach it:
$('form[name=myForm]').each(function() {
var $form = $(this),
$boxes = $form.find('input[name=myCheckbox]');
$form.delegate('input[name=myCheckbox]', 'change', function() {
var numChkd = $boxes.filter(':checked').length;
console.log(numChkd);
});
});
This takes advantage of caching the $boxes selection. It will look for all the boxes when it sets up the event. It uses .delegate() to attach an event to the form which will get fired anytime an child input[name=myCheckbox] creates a change event. In this event handler, you can easily filter the already obtained list of checkboxes by which ones are :checked and get the length of the matched elements. (The documentation for .size() basically states there is no reason to ever use it... It just returns this.length anyway...)
See this fiddle for a working demo
demo: http://jsfiddle.net/kKUdm/
$(':checkbox').change(function(){
if($(this).is(':checked')){
var name = $(this).attr('name');
var value = $(this).val();
console.log(name + ':' + value);
}
});
Var $chks = $(":checkbox");
Var ChkCount =0;
Var chktimer =0;
Function updateChkCount(){
ChkCount = $chks.filter(":checked").length;
$chks.end();
// do something witb ChkCount
}
$chks.bind("check change", function(){
clearInterval(chktimer);
chktimer = setInterval("updateChkCount()",250);
});