I have a column with a celltemplate of checkbox. It can be selected/unselected, which works fine as correct events are fired everytime. However, when I select multiple checkboxes on the grid and start scrolling up and down, the checkboxes seem to be scrolling as well. That means that they are not fixed to the rows they are checked against, and get lined up against a wrong row.
This issue has already been reported here a couple of years ago. But the solution posted, does not solve the problem.
Here is a plunker link to demonstrate the issue. Anyone had any similar issue or a workaround to this?
You are not binding the checkboxvalue to your dataset. Thanks to your provided Plunker I can provide an updated Version that works.
The ng-model is bound to the gridscope and has a private scope for each row, so its fine to use somethnig generic
ng-model="foo" ng-change="row.entity.active = foo"
You can use active == 1 but I used true/false for convenience
ng-checked="row.entity.active" //since foo becomes true or false on click
If you want more complex checks, you can use their appScopeProvider.
Related
My question is related to Angular and Typescript. My problem is quite tricky. I've created a dropdown menu with 3 items. But I'm not creating it using select tag of HTML. I'm using my company's toolkit. Which is just a wrapper around primeng components with our font and our color scheme. They call it PLK toolkit. Their code have a bug. It is not clearing the previously selected item. Here is their sample dropdown code (i feel it is ok to share the code because it is few lines of plain html only and that too written by me):
Note: In below code, plk-dropdown is like select tag, while plk-option is like option tag. There's nothing special about it.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
So, when I click it first time it is good.But after first click it keeps on selecting the other options along with previous. I looked into their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
and I fixed this bug by adding 1 line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
Now the compoenent is working but the problem is that I can't make changes to their js file. Firstly, I'm not supposed to do so. Secondly, if in future we update our repositories, that bug will come back.
Is there any way I can fix this with my typescript code. I cant implement jquery in between. I tried this:
How to clear all selected items in a SELECT input using jQuery?
Please help me. I'm blocked because of this. I really need help.
I use a null option so when the dropdown has no values unselected option is selected , I thing it 's related to primeng the set the first option as selected even the value don't match with ngModel property I have create a demo to show this but so far that how we solve abd this will give to the use an option to undo the selection in case this was not required.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="null">Unselected</plk-option>
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
demo 🚀
I have an interesting scenario happening right now and it's confusing me, this question is initially meant for those who are familiar with Angular UI Grid. However, you are welcome to answer.
I have a UI Grid that I call a drop down through a separate html page in the grid itself because the dropdown values dynamically change. Now I have ng-model of this drop as ng-model="row.entity.someValue" this would be the value of the $scope.someDate.someValue that is obtained from the grid with field: 'someValue'. The issue I'm having at hand is after selection I cannot fire a function call, I'm avoiding id="" calls because I want the code to be consistent and not use getElementById calls. I've tried ng-selected, ng-change even ng-class (knowing it wouldn't work) What I'm trying to do is fire a function with the selected value as a parameter and I cannot get the function to fire. What am I missing here?
Here is a same code of what I'm trying to achieve:
<div>
<select ng-model="row.entity.someValue" class="dropdownWidth" ng-selected="someFunction(selectedValue)" >
<option ng-repeat="selectedValue in grid.appScope.someArray" value={{selectedValue}}>{{selectedValue}}</option>
</select>
</div>
UPDATE Answer below
The answer was right there in front of me, which I keep forgetting. Every time a call to a grid cell is made outside of the controller you always apply grid.appScope in anything thing pertaining to the cell's value
in my case I was just calling ng-selected="someFunction(selectedValue)" when in fact I should've been calling ng-selected="grid.appScope.someFunction(row.entity.someValue)". Now it works perfectly, hopefully this scenario will be of some good use for anyone in the future!
I have a series of checkboxes for each day of the week with an "All" checkbox to check/uncheck all days. My use case requires multiple sets of these checkboxes, and as I'm creating them dynamically, I used the jQuery.clone() function to duplicate the set and add them to a new row; however the cloned checkboxes do not work correctly. The OnClick event fires; but for whatever reason, I can't access the 'checked' property on any of the cloned checkboxes in Chrome. I have tried the following methods (using the All checkbox as an example):
$('input[name="all"]:last').prop('checked')
$('input[name="all"]:last')[0].checked
$('input[name="all"]:last').attr('checked')
All return undefined. The only method I have found that actually returns anything with regards to the checked state is:
$('input[name="all"]:last').is(':checked')
I have the bug replicated here: http://jsfiddle.net/YfY5U/
Really hoping someone has some idea of what's going on, because I'm totally stuck :(
In this part of code:
var new_content = $('.initial').clone()
.removeClass('initial')
.find(':checkbox').each(function(){
$(this).removeProp('checked');
}).end().appendTo('fieldset');
You are removing property "checked" after cloning. So no surprised that it is undefined.
Just change
$(this).removeProp('checked');
to
$(this).prop('checked', false)
In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.
Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.
In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...
basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs