I use Jqgrid in my MVC project. Because the view has many column, not all column are showned in screen same time. There is horizon scrollbar to allow user see an others columns. Page size is 20.
But, when user use mouse to scroll. The header text is disappeared. This issue is occur only in IE10.
More information, if i press next page, the current header text is shown, but, an others header text disappear.
I also refer to this post http://forums.asp.net/t/1990281.aspx?Jqgrid+Header+text+is+overlapped+in+IE10 but cannot resolve.
Anyone has idea for this?
Thank you
Update:
I fake it by using this code:
$(function () {
$("#gview_" + viewId + "top").scroll(function () {
//// This code fixes issue: headers disappear in jqgrid view when the view has horizontal scrollbar
$(".ui-jqgrid-htable").css('background-color', 'rgb(66, 139, 202)');
var headers = $("div[id*='jqgh" + viewId + "']");
if (headers != null && headers.length > 0) {
for (var i = 0; i < headers.length; i++) {
var header = headers[i];
//// Just reset text
header.innerText = header.innerText;
}
}
});
});
This seems to be related to this issue described here:
https://stackoverflow.com/a/25305317/435280
And as reported bug in IE 10:
IE 10 elements with relative position disappearing when scrolling in parent element on Windows 7
The only proposed resolution from MS was to upgrade to IE11 which doesn't really solve the problem if trying to support IE10 users.
Related
I have a kendo grid with a custom popup:
columns.Command(commands =>
{
commands.Edit();
}
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
Each time I click the edit button the window pops up but when I close it the window is not removed from the DOM.
I saw this post: http://www.telerik.com/forums/popup-windows-do-not-get-removed-from-dom and Telerik says the issue has been fixed.
What are some things that would cause this behavior?
UPDATED
This grid is nested in a Kendo TabStrip if that helps. Other than that I don't see anything out of the ordinary. The popup is entirely managed by the grid.
UPDATED 2
So I got the un-minimized code for the grid (kendo.grid.min.js, version 2013.3.1119, starting at line 1172), slopped it into my project and modified just the following with the two log statements to verify that destroy is being bound and called:
_destroyEditable: function () {
var that = this;
var destroy = function () {
if (that.editable) {
// My edit
console.log("...destroy() called");
that._detachModelChange();
that.editable.destroy();
that.editable = null;
that._editContainer = null;
}
};
if (that.editable) {
if (that._editMode() === "popup") {
// My edit
console.log("Binding destroy() to 'deactivate'...");
that._editContainer.data("kendoWindow").bind("deactivate", destroy).close();
} else {
destroy();
}
}
},
Each time I click edit and then close the window I see the expected two messages yet the window is not removed. Here is a screenshot of the debugger:
The outlined windows are the dom elements generated.
After much trial and error and deep diving it turns out this problem has to do with our scripts in our site's layout. At some point whomever setup the kendo scripts put in not only the 'kendo.all.min.js' but right after it 'kendo.web.min.js', 'kendo.aspnetmvc.min.js' and then about 10 individual kendo.*.js including the grid.
After viewing this link:
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
I realized that the site is creating these objects multiple times. Removing the script references in accordance to the link above resolves the issue.
I have set 'enableTextSelectionOnCells' option to true to select text in slickgrid but I can only select text in IE and chrome but not in firefox. I know this is bug in slickgrid and it had been fixed in slickgrid 2.2 but I am using slickgrid V2.1 and don't want to upgrade to V2.2. Is there any way to select text in firefox using slickgrid 2.1
I had the same problem as you have and I finally found the solution from a pull request made by the user icoxfog417 (thanks mate), the pull request is not yet approved (hopefully soon) but I tried it and it works on all 3 browsers which I tried (in my case FF27, IE8, Chrome31). You do have to modify 1 of the core file slick.grid.js but it's worth it :) The pull request is this one: Pull Request #746: fix issue#739
The code change is simple and looks like this:
Modify the file slick.grid.js at line 2236, replace the code with this:
// if this click resulted in some cell child node getting focus,
// don't steal it back - keyboard events will still bubble up
// IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
var selection = getTextSelection(); //store text-selection and restore it after
setFocus();
setTextSelection(selection);
}
then insert at line 2418 (after the setFocus() function), insert this new code:
//This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
function getTextSelection(){
var textSelection = null;
if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
textSelection = selection.getRangeAt(0);
}
}
return textSelection;
}
function setTextSelection(selection){
if (window.getSelection && selection) {
var target = window.getSelection();
target.removeAllRanges();
target.addRange(selection);
}
}
Voilà!!! Quite happy about it :)
I am building a website using slickgrid and I have these two problems:
I want to select the entire column whenever the user clicks on the column header. I have been able to change the style of the cells as given in this example. I have not been able to figure out how to change the style of the column header
How to get to know when the end of scroll has happened in slickgrid. I am currently doing
$(".slick-viewport").scroll(function () {
if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
handle_end_of_scroll()
}
})
But I am dependent on the css class name of the slick grid body and I might have issues if I end up updating slickgrid later to a newer version. I might have to update this part of the code if the implementation of slickgrid changes.
Change the style of a header
You could force an update to a header which would trigger a onHeaderCellRendered event in which you could then change the class on the header. Pretty messy, though.
grid.onHeaderCellRendered.subscribe(function (e, args) {
var headerCell = args.node;
});
grid.updateColumnHeader('columnID');
Check if scrolled to end
Binding to scroll events directly is always bad. You should subscribe the the onViewportChanged event and getViewport method to check if you have reached the end.
grid.onViewportChanged.subscribe(function () {
var lastRow = grid.getViewport().bottom;
if (lastRow >= grid.getDataLength() - 1) {
console.log('at bottom');
}
});
Hello I need some help with a bug in Internet Explorer 9. I am currently developing some CRUD screens in ASP.NET 4 MVC 3 Razor. In a multiple screen I use the #Html.DropDowListFor to create easy links for Foreign keys.
But when I few these in IE9 (and only IE9) the DropDownList will be rendered smaller than its usual size, the text will be displayed a few pixels lower than normal, and the if the word that is displayed is larger than a small amount of characters(not sure what number, I think it's about 10) it will not be fully rendered. The weird part is that when I click on the DropDownList it will fix itself.
The View code:
#Html.DropDownListFor(model => model.Asset.FkAssetTypeId, new SelectList(Model.AssetTypes, "AssetTypeId", "Name"))
#Html.ValidationMessageFor(model => model.Asset.FkAssetTypeId)
The Model code:
[Display(ResourceType = typeof(I18N_Asset), Name = "Label_Asset_FkAssetTypeId")]
public int FkAssetTypeId { get; set; }
Anybody have any experience with this issue, and know a way to fix this? thank you for the help.
I have found what the problem was, I was using JQuery tabs on the same page. This caused the frontsize of the dropdownlistfor-s to not scale to the css that is set for the whole site. but instead renders the dropdownboxfor with the frontsize of the JQuery tabs and than sets the frontsize to the css.
I have solved this issue by using Javascript to set the font-size in a Document.ready function:
// IE9 causes a bug where the dropdownlists will not be displayed correctly because they won't adapt to their current font-size
// this javascript fixes that by resetting the font-size
if (window.navigator.systemLanguage && (!document.documentMode || document.documentMode === 9)) { //check if IE9 is being used
var list = document.getElementsByTagName('Select'); // get all dropdownlists
for (i = 0; i < list.length; i++) {
list[i].style.fontSize = list[i].style.fontSize; // reset the font-size
}
}
How can i maintain scroll position on postback after sorting a grid table that uses MvcContrib framework?
The usual way is to use some javascript to set the current scroll position to a hidden field, then restore that position on page load (usually in a jquery ready event).
However, that's really just a side effect. You should be doing some kind of ajax command to update the grid rather than a postback, then no scrolling required.
Use jQuery and client side cookie.
$(function(){
var posName = location.href + "_top";
$(window).unload(function() {
var top = $(document).scrollTop();
$.cookie(posName, top);
});
var goTop = parseInt($.cookie(posName));
if (goTop) {
$(document).scrollTop(goTop);
$.cookie(posName, "");
}
});
Hope this code.
A useful solution is posted here : http://www.experts-exchange.com/Hardware/Servers/Q_28082177.html
$(function(){
var top = parseInt($.cookie("top"));
if(top) $(document).scrollTop(top);
$(document).scroll(function() {
var top = $(document).scrollTop();
$.cookie("top", top);
})
});
This is a very old thread but I have posted this for developer who will be searching for this kind of issue, may help.