I want to select option group based on option select.
Option Group name is Class and class has two option (Class A , Class B).
If i select Class A, Class B then automatically Option Group selected. suppose if i deselected Class A then Option Group is deselected.
I want to do with select picker of bootstrap functionality.
I have tried but not got any hint. Please help me to solve this.
Thanks in advance.
I have added the following line to the bootstrap-select.js in my project to allow this functionality: find clickListener: function() { and insert
it will work when you click on the group title
this.$newElement.find('li').on('click', function(e) {
e.preventDefault();
console.log('Bootstrap-Select.js - line #1438');
var base = $(this).closest(".bootstrap-select");
var select = base.find("select");
// check if this .dropdown-header is part of bootstrap-select AND multiple or not
if (base.length && select.prop("multiple")) {
var group = $(this).data("optgroup") - 1;
var group2 = group + 1;
var select = $(this).closest(".bootstrap-select").find("select");
if ($(this).hasClass("dropdown-header")) {
if (base.find("li[data-optgroup=" + group2 + "]:not(.selected)").length === 1)
$(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected", false);
else
$(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected", true);
select.selectpicker('render');
//select.change();
}
}
});
Related
I'm having a problem with TinyMCE 4.6. I've implemented a custom button that bumps the font size of selected text:
ed.addButton('finc', {
image: '/tinymce/plugins/zackel/button_images/big.png',
title: '+ font size',
id : 'finc',
onclick:function(editor,url) {
console.log("************ In finc: ", ed);
var delta;
var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
console.log("************ finc: currentFontSize = " + currentFontSize);
var node = ed.selection.getNode(); // <======= LINE 565
var nodeName = node.nodeName; // for example 'DIV ' or 'P'
console.log("************ finc: node is ", node, "nodeName = " + nodeName);
if (currentFontSize >= 24) {
delta = 2;
}
else {
delta = 1;
}
currentFontSize = currentFontSize + delta;
console.log("************ finc: New font size = " + currentFontSize);
ed.formatter.register('incfont', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'}
});
ed.formatter.apply('incfont');
console.log("********** finc: posting to val box " + currentFontSize);
$("div#px_val button").text(currentFontSize + 'px'); // show value in value box
}
});
If the text is initially in a P the button works fine but puts the text into a span inside the P when it's done. If I then just hit the button again it fails because the node it brings back on line 565 is still the P, which still has the original font size. So if he initial font size is 16, it goes to 17 but then every bump after that stays at 17. If I deselect the text after bumping it and reselect it, line 565 gets the span and the bumps work every time.
How can I force a reselection from my code, so 565 finds the span the second time instead of the P, without me deselecting and reselecting the text?
Thanks
It seems to me that I understand you problem, but i believe that the text re-selection should not happen every time you apply the formatting - just only in the case TinyMCE is adding the new SPAN.
Here is my proposal:
var delta;
var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
var node = ed.selection.getNode();
var nodeName = node.nodeName; // for example 'DIV ' or 'P'
if (currentFontSize >= 24) {
delta = 2;
}
else {
delta = 1;
}
currentFontSize = currentFontSize + delta;
ed.formatter.register('incfont', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'}
});
var cnt = ed.selection.getContent({format : 'html'});
var lenBefore = $(cnt).length;
ed.formatter.apply('incfont');
var cnt = ed.selection.getContent({format : 'html'});
var lenAfter = $(cnt).length;
if(lenAfter > lenBefore) {
var newText = ed.selection.selectedRange.startContainer;
var rng = ed.dom.createRng();
rng.setStart(newText, 0);
rng.setEnd(newText, newText.nodeValue.length);
ed.selection.setRng(rng);
ed.nodeChanged();
}
Explanation:
when you apply the formatter for the first time, TinyMCE is adding the SPAN and you will find the new selection inside the ed.selection.selectedRange.startContainer node of type text. This is the same as the first child node of type text of the newly inserted SPAN. For subsequent actions, there shall be no need to do any re-selection.
Moreover, IMHO i feel somehow unusual to change the font size in mouse click, i would prefer a standard plugin button which works only with a already existing text selection (but this is up to you):
Of course, the main question of the re-selection is solved, and the plugin will work repeatedly with subsequent mouse clicks also by using a plugin button.
Just in case, as said before, you may also check at the very top if there is any content:
var hasContent = ed.selection.getContent({format : 'text'}.length > 0);
if(!hasContent) return;
So i believe the whole stuff should do the job but anyway, i feel there is still room for some improvements, for example if you need also to reduce the font size, and thus you will also need to delete the already existing - but no longer necessary - SPAN which contain the formatting.
I have a grid with row. I want to give a strike on click of particular button. Here is my code.
{
xtype: 'button',
text: 'Exclude',
handler : function(){
debugger;
var cohartgrid = Ext.getCmp('abc');
var cohartstore = cohartgrid.getStore();
var record = Ext.getCmp('abc').getSelectionModel().getSelected();
var st = cohartstore.getRange();
if (record) {
Ext.fly(row).addCls('row-deleted');// This line is not working.
}
if(record.data.EXL == "No"){
record.set("EXL","YES")
}
}}
What css I have to put. Thanks for help.
I answered same kind of question in other post. Here you need to get the index of your row and then place strike css by using addClass. remember extjs 3 is not supporting addCls
var selection = grid.getSelectionModel();
for(var i=0;i<gridstore.data.length;i++){
if(selection.isSelected(i)){
var test = grid.getView().getRow(i);
var dsd=Ext.fly(test);
dsd.addClass('StrikeCSS'); // Placing css to that perticular row.
}
}
In answer grid is your grid. In selection you getting row index and placing Strike
.StrikeCSS {
text-decoration: line-through !important;
color : BLACK !important;
}
Use code to add class in selected row :
rowIndex = cohartgrid.getStore().indexOf(selectedRecord);
cohartgrid.getView().addRowCls(rowIndex, 'row-deleted');
Rather than create events for Christmas and Easter and the like, I'd like to be able colour the date cells affected, and even perhaps have a grey translucent text for each event. Is there any easy way to do this in FullCalendar?
EDIT
It's been pointed out to me that fc-state-highlight is used to highlight fc-today, so perhaps a similar thing could be done, applying a css class to cells and defining it as "public holiday colour". A thought. The problem is how does one apply this class to the relevant dates such that it works within FC without breaking anything.
This could be done using eventAfterAllRender. Make a separate ajax call to find all of the holidays then change the color of the td. Example for month and holiday being June 1st, done with FC 2.0.1: http://jsfiddle.net/marcrazyness/C8jpm
eventAfterAllRender: function (view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for(var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name =='agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for(var i = 0; i < classNamesArray.length; i++) {
if(classNamesArray[i].indexOf('fc-col') > -1) {
$("td." + classNamesArray[i]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
when doc ready, have a js function to select all TDs, with data-date the ones you want, and add CSS class to them. I don't know if it works, just an idea.
I am trying to display some aggregate value (like total) in the last row of an ng-grid. The style and css class of the last row needs to be different than the other cells in that column. How to acheive this?
The cellTemplate in a column definition applies to all cells in that column, but in my case I need to have a different style for the last row in that column. Can anyone please suggest me a solution.
Thanks
Sudipta
I was able to add a class to the last row through a plugin:
function ngGridAddClassToLastRow(className) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var addClass = function () {
var lastRow = self.scope.renderedRows[self.scope.renderedRows.length - 1];
lastRow.elm[0].className = lastRow.elm[0].className + ' ' + className;
};
self.scope.$watch(grid.config.data, addClass);
};
}
And with this added to the gridOptions:
...
plugins: [new ngGridAddClassToLastRow('<some class name>'),
...
And of course add some css, e.g. in my case:
.lastRow {
border-bottom: 0px;
}
That worked for me. I cannot say for certain that is the way to go since, needless to say, i'm a noob with Angular and ngGrid. I've constructed the plugin from flexible height plugin.
You can set a special property "isLast" (or however you like to name it) of the item that should be displayed in the last row. This item can be accessed through row.entity.isLast.
... somewhere in your controller ....
$scope.getRowClass = function(row) {
return row.entity.isLast === true ? 'lastRow' : '';
}
... somewhere inside the gridOptions ...
rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="[col.colIndex(), getRowClass(row)]" class="ngCell {{col.cellClass}}">....</div>'
Based on the .lastRow class you could define a custom style for the last grid row.
Is there any way of making a single row within an AspxGridView flash different colours based on a value within a cell. E.g. continually changing the background colour of the row between red and green if a value in a cell is 5 so that it stands out on the page?
I have found one article that says it cant be done, but this was in 2008..
http://www.devexpress.com/Support/Center/p/Q135996.aspx
With a css class added to row as advised in the previous answer you can apply following script and style:
$(function () {
setInterval(flashRow, 500);
});
function flashRow() {
$("tr.blink").toggleClass("red");
}
Css style:
tr.blink
{
background-color: Green;
}
tr.red
{
background-color: Red;
}
Where blink - css style that you add to the row in the RowDataBound method.
See demo here
Take a look at the E3324 Code Central example.
You can use the described approach as a starting point.
<dx:ASPxTimer ID="ASPxTimer2" runat="server" Interval="250"
ClientSideEvents-Tick="function(s,e)
{
var table = document.getElementById(gridUsers.name);
for (i = 0; i <= table.rows.length; i++)
{
var tableRow = document.getElementById(gridUsers.name + '_DXDataRow' + i);
if (tableRow.getAttribute('flicker') != '1')
return;
if (tableRow.style.backgroundColor == '' || tableRow.style.backgroundColor == 'white')
tableRow.style.backgroundColor = 'red';
else
tableRow.style.backgroundColor = 'white';
}
}">
</dx:ASPxTimer>
you can do that on the event rowdatabount
check the current row is it with the value you want to highlight
then change the color of the current row by adding css attributes to it or assigning a cssclass