I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.
The js code block I wrote for solution but it does not work properly:
// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
if ($(this).hasClass("k-i-expand")) { // if the grid is expand
// uid of tr element
var tr_UID = $(this).parents("tr").data("uid");
// master grid
var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
$(ustGrid.dataSource.data()).each(function (i, item) {
if (item.uid == tr_UID) {
var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
var rowCount = altGrid.dataSource.view().length;
$("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
}
});
}
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.
firstclick
secondclick
This code block let me give databound to child grid. It is worked for me.
Solution
Related
Anyone please tell me how can i select next consecutive row from first page to second page of my kendo grid and reverse back to the previous page ? Kendo Grid API just only gives me information on 'select' and from there I have no clue at all how to implement my desired selection. What I have now is only selecting the row of the selected/active cell. Any insight/references are also appreciated. So far I haven't came across with any examples or article.
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
data.select($("#grid_active_cell").closest("tr"));
},1);
}
});
http://dojo.telerik.com/eSUQO
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
var navrow_uid; ** add this tracking variable;
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
// break this up
// data.select($("#grid_active_cell").closest("tr"));
// fetch next row uid and compare to tracker
var nextrow = $("#grid_active_cell").closest("tr");
var uid = nextrow.data('uid');
if (navrow_uid == uid ) {
console.log("last navigable row");
data.dataSource.page(1+data.dataSource.page());
// best option here would be to set auto-page flag for databound event handler
} else {
data.select(nextrow);
navrow_uid = uid;
}
},1);
}
});
You will want to add a grid data bound handler, and have that check the aut-page flag to see if you need to select first or last row of page.
I'm trying to find if amcharts has a facility to have legends as checkboxes just like highcharts does. Some examples in here -
http://stackoverflow.com/questions/19174158/in-highchart-legend-want-to-bring-checkbox-at-start
http://jsfiddle.net/lukelarsen/yHGS9/9/
http://flexdevtips.blogspot.co.nz/2009/10/linechart-with-checkbox-legend.html
I tried to put checkboxes outside the chart & add listeners & so forth. it gets complicated. So wondering if anyone has had this requirement & has managed to implement it?
Any help would be highly helpful.
There you go:
First we have to add eventlisteners to create the boxes everytime the chart redraws. (this is necessary because the checkboxes are child elements of the legend and the legend is recreated everytime sth happens with the chart)
chart.addListener("init", function() {
chart.addListener("drawn", createCheckboxes);
chart.legend.addListener("showItem", createCheckboxes);
chart.legend.addListener("hideItem", createCheckboxes);
}
Then we're creating the one checkbox for each legend entry.
function createCheckboxes() {
var legend = chart.legend.legendData;
var div = $("<div style='position:absolute; top: 10px'></div>");
for(var i = 0; i < legend.length; i++) {
div.append("<input style='float: left; "
+ "position: absolute; top:" + legend[i].legendEntry.y + "px' "
+ "type='checkbox'" + (legend[i].hidden ? " " : " checked ")
+ "onclick=toggleItem(" + i + ")></input>");
}
div.appendTo($(chart.legend.div));
}
The last step is to handle the click event on the checkboxes.
var toggleItem = function(i) {
chart.legend.clickLabel(chart.legend.legendData[i], event);
}
That's it. Demo
If page is translated by Google translate when Kendo UI Dropdown (or Kendo UI Calendar) box appear 40 px lower.
I can fix it easy it there are only one or two Kendo UI dropdown box on the page.
I check if value of 'body' css 'top' become equal to 40px,
and change Dropdown position.
var pixelsTopBody = $('body').css('top');
var kendoCalendarPosition = (parseInt($('.k-animation-container:eq(0)').css('top')) - 40) + "px";
if (pixelsTopBody == '40px') {
$('.k-animation-container:eq(0)').css('top', kendoCalendarPosition);
}
Kendo UI element with class .k-animation-container does not exist on the page before I click the button with class .k-select. If there are only 2 Dropdown on the page and I start clicking the second one, then there will be only one element with class .k-animation-container on this stage. To fix it I need to check length of $('.k-animation-container').length. And everything works fine:
$("body").delegate(".k-select:eq(1)", "click", function () {
var pixelsTopBody = $('body').css('top');
if ($('.k-animation-container').length == 1 && pixelsTopBody == '40px') {
var kendoCalendarPosition = (parseInt($('.k-animation-container:eq(0)').css('top')) - 40) + "px";
$('.k-animation-container:eq(0)').css('top', kendoCalendarPosition);
}
if ($('.k-animation-container').length == 2 && pixelsTopBody == '40px') {
var kendoCalendarPosition = (parseInt($('.k-animation-container:eq(1)').css('top')) - 40) + "px";
$('.k-animation-container:eq(1)').css('top', kendoCalendarPosition);
}
});
But what to do if there are 5 Kendo UI Dropdowns on the page? The above approach does not work in this case. May be solution is to make all element with class .k-animation-container to exist on page load or after the first click? How to do it with Kendo UI?
I can fix offset by id of Kendo UI DropdownLists. For example if the 5th DropdownList has id= "ddlDownlineWithPendingOrDeclinedOrders".
$("body").delegate(".k-input:eq(4)", "click", function () {
var pixelsTopBody = $('body').css('top');
if ($('#ddlDownlineWithPendingOrDeclinedOrders-list').length == 1 && pixelsTopBody == '40px') {
var kendoCalendarPosition = (parseInt($('#ddlDownlineWithPendingOrDeclinedOrders-list').parent().css('top')) - 40) + "px";
$('#ddlDownlineWithPendingOrDeclinedOrders-list').parent().css('top', kendoCalendarPosition);
}
});
But I want to find more general approach to fix offset for 5 Kendo UI DropdownLists then translated by Google.
With ref. to above subject, I am using wookmark plugin to scroll our home page data dynamically….I have studied the tutorial provided on wookmark and I m using the exact script provided by wookmark and working fine shorts of not 100% working.
Things it stucks when it reaches at bottom of the window then we slightly press the up arrow key, that loads the products again and this is happens randomly some time it scrolls perfectly and some time it stucks and if presses up arrow key it starts working again.
Kindly help me out where I m going wrong. Kindly provide me the easy working script for the same.
I m using following code :
(function ($) {
$('#main').imagesLoaded(function () {
var handler = null;
// Prepare layout options.
var options = {
itemWidth: 200, // Optional min width of a grid item
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
outerOffset: 20, // Optional the distance from grid to parent
flexibleWidth: 300 // Optional, the maximum width of a grid item
};
function applyLayout() {
$('#main').imagesLoaded(function () {
// Destroy the old handler
if (handler.wookmarkInstance) {
handler.wookmarkInstance.clear();
}
// Create a new layout handler.
handler = $('#display li');
handler.wookmark(options);
});
handler.wookmark(options);
}
/**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
//var closeToBottom = ($(window).scrollTop() >= $((document)).height() - $((window)).height() - $("#footer").height() - 500); //(($(window).scrollTop() - 100)); //+ "%"
var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);
if (closeToBottom) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid.
var items = $('#display li'),
firstTen = items.slice(0, 10);
//$('#display').append(firstTen.clone());
applyLayout();
}
};
// Capture scroll event.
$(window).bind('scroll', onScroll);
// Call the layout function.
handler = $('#display li');
handler.wookmark(options);
});
$(window).load(function () {
handler.wookmark(options);
});
})(jQuery);
If you commented out
//$('#display').append(firstTen.clone());
then the new items will not be loaded on the end of list. You need to uncomment that line to get new items.
In real life instead of
var items = $('#display li'),
firstTen = items.slice(0, 10);
$('#display').append(firstTen.clone());
you would need a code that will load new items.
Also I think it might make sense to change > to >=
var closeToBottom = ($(window).scrollTop() + winHeight >= $(document).height() - 100);
to load new items if scroll position is more or equal to the height of window - 100, where 100 is just some value - you could try 200 or even more to see if it will work better for you.
main goal:
upon resizeStop, I need to resize the element's width inside the cell. e.g. edittype="select"
here's the scenario:
1) there's a jqgrid, has columns, let's say in column 3 has edittype="select".
2) user resize the column 3
3) after resizing, the resizeStop(newwidth, index) event
4) inside the resizeStop event, want to get a reference to all select element of the given index. Then resize it appropriately.
problem:
I don't know on how to implement the number 4...
please guide me or give me hints to investigate.
thanks in advanced.
Look at the getCol method it is probably what you need.
resizeStop: function (newwidth, index) {
var selectedRowId = jQuery("#jqgridElementId").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_' + (index-1) + '"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
},
onSelectRow: function(id){
if(id ){
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#jqgridElementId_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}