I am looking for a example for using kendo-grid Kendo for angular Grid for angular with tooltip on all cells and header.
I found they have this tooltip
EDIT!!!!
I need to put in the template a field from the dataItem (from the row)
I have this template but the dataItem doesnt work
What am I missing?
<ng-template #template let-anchor let-dataItem>
{{dataItem.NAME}}
<span *ngIf="anchor.nativeElement.textContent.length > 0">{{ anchor.nativeElement.textContent + dataItem.NAME}} </span>
</ng-template>
It is not clear what you want to show in the tooltip but generally you can just add the tooltip directive to the grid and set a filter for the cells:
<kendo-grid [data]="gridData" [height]="410"
kendoTooltip filter="td, th" [tooltipTemplate]="template">
https://plnkr.co/edit/448cL6c5iCK76rgXf8GW?p=preview
Edit:
They don't seem to have API to get the dataItem from the element but they seem to render the item index on the row and I was able to use it to get the dataItem for the anchor. Also, the filter input of the tooltip seems to conflict with the filter input of the grid so the tooltip should be initialized on a parent element:
https://plnkr.co/edit/9OmHXgDkcMprgw3oso3D?p=preview
For kendo MVC we use javascript like this for tooltip
$("#GridName").kendoTooltip({
filter: "th", //this filter selects all th and td cells
position: "top",
// apply additional custom logic to display the text of the relevant element only
content: function (e) {
var cell = $(e.target);
var content = cell.text();
return content;
}
}).data("kendoTooltip");
Related
For my site, I code a button allowing to change the css of a class present in a div card. My button is located in the card-footer. Having several cards, I can't / don't think to retrieve the element with an id (as there will be X times the same ID)
In order to circumvent this system, I therefore use a parentElement which goes up to the div card
<div class="card">
<div class="card-body">
<p class="change">Change one</p>
<p class="change">Change two</p>
<p class="change">Change three</p>
</div>
<div class="card-footer">
<i id="updateData">change</i>
</div>
</div>
jQuery($ => {
$('#updateData').click(e => {
var element = e.target.parentElement.parentElement;
$('.change').css('display','none');
});
});
I would like to indicate that only the class "changes" present in my element variable and not all the classes in the page.
I don't know how to add a variable to my ".css" command, do you know how ?
Thanks in advance !
First of all since you will have multiple elements with same id that means that you should not use ID and use class instead. Id is meant to be unique. So yours id="updateData" should become class="updateData". Now you can grab all of those buttons and assign event to all of them instead of just first like you were by using id selector.
$('.updateData').click(e=> {});
Next in order to be able to use clicked element in jQuery way convert from arrow function to regular anonymous function since arrow function overrides this keyword. And now you can use jQuery to hide like
$('.updateData').click(function() {
element = $(this).parent().parent();
element.hide();
});
If you want more precise selection to hide only .change elements use
$('.updateData').click(function() {
element = $(this).parent().parent();
element.find(".change").hide();
});
Not bad, but more efficient, when you have multiple click targets, is delegation:
$(document).on("click", ".updateData", function() { ... });
Also .hide() is convenient, but rather then "change the css of a class" add a class "hidden" or something! In best case the class further describes what the element is. CSS is just on top.
original title: VueJS with Bootstrap, stretched link with hidden button
I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class
<b-card
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-button v-b-toggle="'collapse-' + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>
I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")
In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?
ok I figured out a solution for my particular use case with JQuery,
What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.
In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.
<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>
Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.
In this case I'm using the bootstrap button to trigger a unique modal.
<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>
Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.
<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>
I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
My dom repeat displays a list of icons which I can bookmark or unbookmark ,which generating dom-repeat I call a function to find if this icon is bookmarked or not,that will return CSS class
.book-marked {
color: red;
}
.not-book-marked {
color: green;
}
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark"></iron-icon>
</template>
Once I get all my list of icon now if user click that icon I need to toogle css class.so I wrote on-tap function
_toogleBookMark:function(e) {
var userData = e.model.item; //gets entire data object of that element
var index = e.model.index; //gets index of that element
},
I can't use ID since its dom-repeat ,Is there any other ways so that I can change CSS of that dom-repeat element in _toogleBookMark() function on clicking? or is it possible to change CSS with index??or using "e" reference in _toogleBookMark(e) function !!
Not sure if I understood correctly - you want to access the element you've tapped?
Just use the event.target property then. It will return the element on which the event happened, in this case, the icon you have tapped.
_toogleBookMark = function(e) {
e.target.classList.toggle("not-book-marked");
}
Check this example.
Mind you:
1) When using Shady DOM, assuming our element is a custom element, target can be a component from the element's template, not the element itself. To prevent that, use Polymer.dom(e).localTarget (read more here).
2) When using a custom element with light DOM children, the above may not be enough, your (local)target will be a light DOM child, not the element you wished for. In that case, use Element.closest(selector) to (optionally) go up the DOM to the element you want. Read more about the method here.
As you just want to swap your class on tap, do it like this:
Add an own attribute, like data-id="1" and the id attribute, but be sure they have the same value:
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark" data-id="{{item.userId}}" id="{{item.userId}}"></iron-icon>
</template>
Now, inside your _toggleBookMark function, you can access the current tapped element and swap CSS classes by:
_toogleBookMark:function(e) {
// this gives you your userId from the data-id attribute
var userId = e.path[0].dataId;
// we can access the element now with
var element = this.$$('#' + e.path[0].dataId);
if (element.classList.contains('book-marked')) {
element.classList.remove('book-marked');
element.classList.add('not-book-marked');
} else {
element.classList.add('book-marked');
element.classList.remove('not-book-marked');
}
},
I want to show a tooltip when the content of a kendo grid element is only partially visible. I am not able to control the display of a tooltip on the elements of a kendo grid.
I saw this issue has been discussed but I'm not able to find The problem, it seems to be the values of offsetWidth and scrollWidth.
The ellipsis works as expected defining in a css
.k-grid td {
white-space: nowrap;
text-overflow: ellipsis;
table-layout: fixed;
}
As I saw on this forum I use a function to detect when ellipsis, namely
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
and I call it on the mouseenter event as
kendoGrid.tbody.on("mouseenter", "> tr > td", function (e) {
var target = e.target;
if (isEllipsisActive(target)) {
return target.outerText;
}
return false;
});
The problem is that misteriously I get scrollWidth and offsetWidth equal, while I expected scrollWidth to vary according to the content of the element.
How is this possible, and what am I doing wrong ?
Thanks for any help
best regards
Marco
Here is an example of how to show tooltip only when there is a text with ellipsis (partially visible in the cell) and don't show tooltip if there is a full text is visible or if there is no text in the cell.