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";
}
Related
I have a Blazor WASM application using a MudTable that displays many rows from List<T>.
The MudTable uses #ref="_mappingTable" to identify the table in code.
In code, I set the selected item:
_mappingTable.SetSelectedItem(specificItemFromTheList);
StateHasChanged();
This seems to work fine. However, I'd then like the table to automatically scroll so that item is now visible. It's not automatically doing that and not sure how to achieve that.
There is an open issue requesting a new function "Scroll to row in MudTable"
https://github.com/MudBlazor/MudBlazor/issues/5445
You can wait for that issue to be solved or try the alternative posted by the user geometrikal
Currently using this code to scroll a row into view. It assumes the
table rows are all the same height.
export function scrollMudTableToRow(rowIndex) {
var tableElement = document.querySelector("div.mud-table-container");
var tableHeight = tableElement.offsetHeight;
var tableOffset = tableElement.scrollTop;
var tableRowHeight = tableElement.querySelector("tr.mud-table-row").scrollHeight;
// Element is above view - scroll so it is at top
if (rowIndex * tableRowHeight < tableOffset) {
tableElement.scrollTo(0, rowIndex * tableRowHeight);
}
// Element is below view - scroll so that it is at bottom
else if ((rowIndex + 1) * tableRowHeight > tableOffset + tableHeight) {
tableElement.scrollTo(0, (rowIndex + 1) * tableRowHeight - tableHeight);
}
}
I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.
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');
I'm working on a Dart project where the user is able to add new custom elements at the click of a button. Each custom element is a div containing a table. The divs are resizeable by the user. My problem is that after a new element is added to the list of elements held by my dart file, the sizes of all the divs are automatically reset. Is there any way to add new elements to the template while keeping the attributes of the old ones the same?
Here is my CSS code that deals with the main divs in my custom element:
#superDivContainer {
border: 2px solid black;
resize: both;
display: inline-block;
}
#tableContainer {
height: 125px;
overflow: scroll;
}
Thanks in advance for the help!
When you change the backing list, the template reiterates, destroying all the old elements and recreating them from scratch, so all user resize information is lost.
When you add a new item to the list, you can store all the sizing information of the old elements and then after the item is added set the new elements size:
// Stores size information
List<List> sizes = [];
void add() {
// Store the old sizes
sizes.clear();
ElementList divs = queryAll(".superDivContainer");
for(int i = 0; i < divs.toList().length; i++) {
Element div = divs[i];
sizes.add([div.style.width, div.style.height]);
}
// Add the new item
yourList.add("new");
// Set the sizes of the new elements
Timer timer = new Timer(new Duration(milliseconds: 1), () {
divs = queryAll(".superDivContainer");
for(int i = 0; i < divs.toList().length && i < sizes.length; i++) {
Element div = divs[i];
div.style.width = sizes[i][0];
div.style.height = sizes[i][1];
}
});
}
Two notes:
I changed superDivContainer to be a class instead of an id since it seems that you are applying it to multiple elements; you will need to change your CSS reflect that
The 1 millisecond timer gets around the fact that there is a tiny delay until the new elements are added and accessible
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