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');
Related
I have a strange issue with jQuery ui-sortable. In my example I have multiple columns and in each column I have multiple sortable items.
I want to drag and drop in any column, sorting within one column is no problem.
I have two problems:
When dragging from one column to another column I need the destination column to auto scroll to the bottom.
Horizontal scroll does not auto scroll for the column on the very right side.
See my example
https://jsfiddle.net/maidanhcongtu/9ws2unLa/11/
var configuration2 = {
cursor : 'move',
placeholder : 'highlight',
dropOnEmpty : true,
connectWith : ".connectedSortable",
containment : "body",
};
$(".connectedSortable").sortable(configuration2).disableSelection();
Okay, I have found a solution to disable scrolling when you're no longer sorting in the original parent, so that the sortable item does not scroll the parent when dragging over another sortable.
I also made the sortable list you're sorting over auto scroll to the bottom.
Sorry, I changed your code up a bit because it's easier for me to keep track of things this way.
Also, I added ID's to each sortable list.
see updated fiddle: https://jsfiddle.net/Souleste/ktxeu35p/46/
$('li').addClass('item');
var y;
var og;
var n, nB, half;
$(".connectedSortable").sortable({
cursor : 'move',
placeholder : 'highlight',
dropOnEmpty : true,
connectWith : ".connectedSortable",
containment : "body",
items: '.item',
start: function(event,ui) {
og = $(this).closest('.connectedSortable');
},
over: function(event,ui) {
n = $(this).closest('.connectedSortable');
nB = n.outerHeight(true) + n.position().top;
half = nB / 2;
},
sort: function(event,ui) {
console.log(half);
if ( n.attr('id') != og.attr('id') ) {
og.sortable( "option", "scroll", false );
if (event.pageY > half) {
n.scrollTop(n.scrollTop() + 5);
} else if (event.pageY < half) {
n.scrollTop(n.scrollTop() - 5);
}
} else {
og.sortable( "option", "scroll", true );
}
}
});
I'm using a table to display assignments. The table row has an initial height value of 300px. When the table is loaded, the table row height is reduced to 50px so that some of the details are hidden and this is done by adding a style.
.hidedetails {
max-height: 50px;
}
To show the hidden details, the user needs to click on the down-arrow. By doing that, the .hidedetails style is removed and the following is added, at the same time the down-arrow changes to an up-arrow.
.showdetails {
min-height: 300px;
}
To hide the details again, the user simply clicks on the up-arrow, which then changes again to the down-arrow. The result is the following:
I would like to know how can I hide the details of the table row that is showing them if I click on the down-arrow of the table row that is not selected. I have tried with JQuery but it won't work.
In case anyone is interested, I was able to achieve what I wanted by adding this to the onClick event of the arrow icon which is a button widget.
var tableRow = widget.parent.parent;
var rows = tableRow.parent.children._values;
if (widget.text === ("keyboard_arrow_down") ) {
for (var i = 0; i < rows.length; i++) {
if (rows[i].name.indexOf('Table2Row') > -1) {
rows[i].styles = ['hidedetails'];
rows[i].descendants.Button3.text = "keyboard_arrow_down";
}
}
tableRow.styles = ['showdetails'];
widget.text = "keyboard_arrow_right";
} else if (widget.text === ("keyboard_arrow_right")){
tableRow.styles = ["hidedetails"];
widget.text = "keyboard_arrow_down";
}
I would like to customize the shape of Kendo Tooltips for a grid.
I saw the example on kendo site, it has the arrow outside the box, and the box has a nice rounded shape.
Working on css, using .k-tooltip I can change width, height, background. But I get a square box with the arrow inside which sometimes overrides part of the text content.
I thought that callout would help but I was not able to get anything.
How can I change shape, image and position of the arrows, shape of the box ?
Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible ?
Thanks a lot for any hint
regards
Marco
I think "arrow" you mean callout. You can turn off callout by:
$(document).ready(function() {
$("#target").kendoTooltip({
callout: false
});
});
About your question "Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible?"
If I understand you correctly you would like to show tooltip only when there is text with ellipsis (partially visible in the cell), but you don't want to show a tooltip if there is a full text is visible or if there is no text in the cell. If that is the case, you can do this way:
function initializeTooltip(element, filter) {
return element.kendoTooltip({
autoHide: true,
filter: filter,
callout: false,
content: function (e) {
var target = e.target,
tooltip = e.sender,
tooltipText = "";
if (isEllipsisActive(target[0])) {
tooltipText = $(target).text();
}
tooltip.popup.unbind("open");
tooltip.popup.bind("open", function (arg) {
tooltip.refreshTooltip = false;
if (!isEllipsisActive(target[0])) {
arg.preventDefault();
} else if (tooltipText !== $(target).text()) {
tooltip.refreshTooltip = true;
}
});
return tooltipText;
},
show: function () {
if (this.refreshTooltip) {
this.refresh();
}
}
}).data("kendoTooltip");
};
// determanes if text has ellipsis
function isEllipsisActive(e) {
return e.offsetWidth < e.scrollWidth;
}
$(function () {
initializeTooltip($("#yourGridId"), ".tooltip");
});
tooltip in this case is class name of the column that you would like to use tooltip for, but you can call that class anyway you wish. In case if you are using Kendo ASP.NET MVC it will look something like this
c.Bound(p => p.ClientName)
.Title("Client")
.HtmlAttributes(new {#class = "tooltip"});
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