How to add CssClass for nested childrows in wijmo - wijmo

I have a requirement to add cssClass for nested child rows.
I can add class for parent row but how to add nested child rows.
this.dataGrid.rows[i].cssClass


You need to add an event handler for the formatItem event of FlexGrid and then iterate over all the rows and set their cssClass property.
JS:
grid.formatItem.addHandler((s, e) => {
s.rows.forEach(r => {
r.cssClass = 'custom-back';
})
});
CSS:
.custom-back {
background: rgb(18, 148, 148) !important;
}

Related

How to style an entire row in a Blazorise datagrid?

Is it possible to style an entire row in a Blazorise datagrid conditionally?
for example, if Active == false, I want to gray out an entire row, using css
.inactive {
text-color: gray;
}
I tried to use the RowStyling attribute but I am not sure how to use that (or if it can be used at all). If it can be used, I would like to pass the current TItem to the function. I can set the style at the row level () and use CSS to set global row colors.

Yes you can use RowStyling parameter. Example:
<DataGrid ...
RowStyling="#OnRowStyling"
private void OnRowStyling(Employee employee, DataGridRowStyling styling)
{
if (!employee.IsActive)
styling.Class = "inactive";
}
Change Employee with your own model.

Is there a way to make a css property reactive with vuejs #scroll?

I'm making a vuejs component in my project, and i need to create a zoom with scroll, in a div (like googlemaps).
<div #scroll="scroll">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
<style>
div {
transform: scale(property1);
}
<\style>
<script>
export default {
methods: {
scroll(event) {
},
},
created() {
window.addEventListener('scroll', this.scroll);
},
destroyed() {
window.removeEventListener('scroll', this.scroll);
}
}
</script>
How can i make a method that make the "property1" reactive? Or there is another way to zoom with scroll only the div?

you can bind a dynamic style object to your div which includes the transform property with a dynamic value (see docs for deeper explanation):
<div #scroll="scroll" :style="{ transform : `scale(${property1})`}">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
new Vue({
...
data() {
return {
property1: defaultValue
}
},
methods : {
scroll(e){
// e is the event emitted from the scroll listener
this.property1 = someValue
}
}
})
You can also add some modifiers in the template as shown in the documentation to reduce the method code (here we could be preventing the page from scrolling whenever the user will be scrolling while hovering this specific element):
<div #scroll.self.stop="scroll" :style="{ transform : `scale(${property1})`}">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

show the tooltip only when ellipsis is active

I have the next div:
<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>
How can I show the tooltip only when ellipsis is active?
I find this function
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
But I didn't know how to use it knowing I use jsp and struts

Try something like this:
Working DEMO
Working DEMO - with tooltip
$(function() {
$('div').each(function(i) {
if (isEllipsisActive(this))
//Enable tooltip
else
//Disable tooltip
});
});
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}

For anyone using qtip (being quite popular).
First, add a class to each of your overflowing elements.
<span class="ellipsis-text">Some very long text that will overflow</span>
Then, use the jQuery selector to select multiple such elements, and apply the qTip plugin (or any other tooltip that comes to mind) on to your elements as such:
$('.ellipsis-text').each(function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).qtip({
content: {
text: $(this).text()
},
position: {
at: 'bottom center',
my: 'top center'
},
style: {
classes: 'qtip-bootstrap', //Any style you want
}
});
}
});

Toggling css in knockout.js for changing select list width

I am using Knockout.js with jQuery tmpl plugin. The template I have defined has a few select lists. I need to expand the width of the select items (on IE 8) when a select list is clicked (to accomodate the longest element in the list). I was thinking of toggling the css class when a user clicks on the select list to achieve this but am not sure how to go about it. Here is what I have so far:
//CSS classes
<style>
.bigclass
{
width: 200px;
}
.normalclass
{
width: auto;
}
</style>
// Call makeBig javascript method on mouseover.
<script id='criteriaRowTemplate' type='text/html'>
<tr>
<td style="width: 23%"><select style="width: 100%" data-bind='event: { mouseover: makeBig, mouseout: makeNormal}, options: criteriaData, optionsText: "Text", optionsCaption: "--Select--", value: SearchCriterion' /></td>
</tr>
</script>
var CriteriaLine = function() {
this.SearchCriterion = ko.observable();
//Control comes to this method. Not sure though if the element captured is correct.
makeBig = function(element) {
$(element).addClass("bigclass")
};
makeNormal = function(element) {
$(element).addClass("normalclass")
};
};
So my questions are:
How do we pass the select list to the makeBig javascript function? I believe I need to change the following syntax in my code:
data-bind='event: { mouseover: makeBig, mouseout: makeNormal
How do we add the class to the passed select list. I have added the code but it's not working, maybe because element doesn't have a value.
Alternatively, is there any other approach to ensure that the user sees the full text of the dropdown in IE 8?

Here is a custom binding to add a CSS class to the element on hovering:
http://jsfiddle.net/BL9zt/
Note that it subscribes to the IE specific mouseenter and mouseleave event, so you also have to reference jQuery which simulates those events in the other browsers.
Another, knockout-independent approach is described here:
http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

Hide Checkbox Icon for a ListItem in checkboxlist

Is there a way to hide the checkbox icon for an ListItem and just display the value-text.
Like Below - Checkbox for items is hidden.
I could figure out that I could disable (grey-out) or completely hide (invisible) a list item but not just hide the checkbox icon (square)

I recently did this as part of a project and accomplished it via setting an attribute when creating the ListItem and then using CSS to style it.
li.Attributes.Add("id", "removecheckbox");
Since the attribute is added as part of a tag, you can use the following descriptor in your CSS.
#removecheckbox
{
color: Gray;
}
#removecheckbox input
{
display: none;
}
Of course, you can format the CSS any way you'd like, but this should get you started.
If you'd like more information using selectors in CSS, check out this reference from w3.org.
HTH!

CSS3 will help you, define Inline style, good point is to make special UserControl for CheckBoxList to use following solution
<style>
input:disabled {
display: none;
}
</style>
and in CheckBoxList PreRender event disable ListItem to apply CSS input:disabled selector
protected void CheckBoxListMajad_PreRender(object sender, EventArgs e)
{
foreach (ListItem it in this.CheckBoxListMajad.Items)
{
if (it.Value.Equals("0"))
{
it.Enabled = false;
it.Selected = false;
it.Attributes.Add("style", "font-size:14px;height:16px;font-weight:bold;");
}
}
}
CheckBoxListMajad.RepeatColumn=3

Resources