I am creating a grid in which a cell with the value "Y" should be green and a cell with value "N" should be red. To do this I have assigned a cssClass "YN" to the cells and I have created an attribute containing the value of the cell. It looks something like this:
CSS:
.slick-cell.YN[val="N"]{...
grid cell:
<div class="slick-cell l10 r10 YN" val="N">N</div>
This works great but as soon as I scroll or sort, the attribute is destroyed and does not reappear when the element is recreated.
I need a way to get the cell value and create an attribute each time the element is created. Perhaps there is an easier way than creating an attribute? Can the CSS directly reference the div html?? Any help would be most appreciated.
PS: slickgrid is awesome!
Whenever the grid is scrolled,sorted or changed page the grid DOM is recreated. So all the attributes you applied are lost...you have to apply them again..
so you need to recall your code in onscroll and onsort functions..
grid.onScroll.subscribe(function(e) {
grid.invalidate();
grid.render();
yourCodeToStyleAgain();
});
grid.onSort.subscribe(function(e) {
grid.invalidate();
grid.render();
yourCodeToStyleAgain();
});
Related
I used a grid display on the body with some control elements in column 1, and a fullpage view in the second column. The first column may contain a lot of elements and requires vertical scroll (overflow-x:auto).
I have an input element within the other elements in the grid column to which I assign flatpicker.
https://codepen.io/dbauszus-glx/pen/wvpamZr
flatpickr("#date-input", {
static: true,
//appendTo: "scroll-parent"
});
My issue is that without the static property the flatpickr control displays but doesn't scroll.
With the static property the flatpickr control scrolls together with the input element but the display overflows the parent container with scroll.
I'd like the control to show as seen without static but be linked to the input element when scrolled.
I tried to work with the appendTo property which doesn't seem to have any effect.
Trawling the flatpickr issues I found an issue related to the positioning of the flatpickr instance inside a scrollparent.
I put together a small util method which takes the flatpickr instance and a scrollParent element and attached a scroll event listener to the parent when the flatpickr instance opens.
The scroll event method will reposition the absolute flatpickr container.
The onClose event will remove the scroll eventlistener from the scrollParent element.
function appendFlatpickrToScroll(fp, scrollParent) {
fp.config.onOpen.push(() => {
scrollParent.addEventListener("scroll", scrollEvent, { passive: true });
});
fp.config.onClose.push(() => {
scrollParent.removeEventListener("scroll", scrollEvent);
});
function scrollEvent() {
fp._positionCalendar();
}
}
I have a grid that has child grid for each item, when i add a new item to the main grid, there is a stub for the child (with the toolbar etc and an empty grid for the child), I would like to hide the child grid when adding new one, i know i need the edit event, i just dont know how to get reference to the detailgrid for the item that the row was just created for input.
edit event has e.sender, e.container, e.model, first 2 reference the main grid of course as the event is raised by the main grid
The required behavior is not supported out of the box, however you can for example attach click event handler to the expanding arrows in the Grid. In the event handler you can prevent the expanding if current model is new. Please check the example below:
//Change Employees with your grid name
//the grid should have model ID defined
$("#Employees table").on("click", ".k-hierarchy-cell a", function (e) {
dataItem = $("#Employees").data("kendoGrid").dataItem($(e.srcElement).closest("tr"));
//check if is new record
if (dataItem.isNew()) {
e.preventDefault();
e.stopImmediatePropagation();
}
})
UPDATE (as requested): The above code should be executed in script tag (wrapped in document "ready" event handler) which is placed just after the Grid initialization code.
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
Can anyone please tell how to get the click event of an empty grid.
i have an empty grid, and after inserting i need to refresh the grid for that i use a right click menu in the grid.
So at first there will be no data and need a click event of the grid,
Thanks,
Devan
It seems to me that you should trigger 'reloadGrid' after the filling of the grid.
If you do need implement 'click' or 'right click' event handler to the whole grid and not only the grid body you can use gbox div which will be constructed by jqGrid and which includes all jqGrid elements (see here for details):
var myGrid = $("#list");
// ...
$('#gbox_'+myGrid[0].id).click(function(e) {
alert("click!");
}).bind('contextmenu', function(e) {
alert("right click!");
});
See the corresponding demo here.