I have tried to change the position of jquery bootgrid pagination and serach box but cant get proper way to solve the issue.How can i change the position of these?
Changing the Templates should do the trick.
$("#grid-basic").bootgrid({
templates: {
footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\"><div class=\"col-sm-3\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-9 infoBar\"><div class=\"row\"><div class=\"col-sm-3\" style=\"float:left;\"><p class=\"{{css.search}}\"></p></div><div class=\"col-sm-3\" style=\"float:left;\"><p class=\"{{css.infos}}\"></p></div><div class=\"col-sm-3\" style=\"float:right;\"><p class=\"{{css.actions}}\"></p></div></div></div></div></div>",
header: ""
}
});
Related
I am using numeric text box as an editor in my grid, when I change number by applying spinner, and then I click CRUD update button, model is not updated with the changed value, which I observed in "save" event of grid.
Is this a bug with Kendo? Although, it will work when we add trigger to spin event, but if we edit number typing in, it wont save? Any thoughts
And wierd thing is when after we enter number and click outside and then clicking update will save correctly. why its behaving like that?
positiveNumberEditor: function(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox(
{
format: " "
,min: 0
,max:9999
,step:1
,value:" "
, spin:function (e) {
this.trigger("change");
}
}
);
}
Finally I got answer for this.
(Answering here, so that it may help some one else!!!)
Well this is a shortcoming when we use an editable grid with reordering functionality. And hence easy fix could be adding a filter to avoid any editable row if any using css as below. And this filter is a config under kendoSortable setting of your grid.
filter: ">tbody >tr:not(.k-grid-edit-row)"
I need to add an image to one specific column, so I have something like that, This is good, I see the image, I just added am alert to see how is working. My problem is that after showing the alert, is executing the sorting. Is there a way to avoid the sorting when I just click on my image?
{
field: "ShipName", headerTemplate: "<a class='k-link pull-left' href='#'>Charge</a><img onclick='alert(1)' src='http://localhost/MyApp/images/Reports/filterApplied.png' title='this is a filter'/>",
title: "Ship Name"
}
If you do not want that particular column to sort, then disable it in your grid's configuration. API Reference.
Try adding return false;, which works like e.preventDefault():
onclick='alert(1); return false;'
I can't figure out how to make my treeview filterable.
Looking at the demos on http://demos.telerik.com/kendo-ui/treeview/api
function DoSearch() {
var treeView = $("#ItemList").kendoTreeView().data("kendoTreeView");
var filterText = $("#search-value").val();
if (filterText !== "") {
treeView.dataSource.filter({
field: "text",
operator: "contains",
value: filterText
});
} else {
treeview.dataSource.filter({});
}
}
If I do the implementation, when using filter method I am loosing my treeview
Here a fiddle with my sample treeview the same way that I'm getting, not using datasource, the ASPNET server code return the list as appears on the fiddle, then by javascript call the kendoTreeView method.
Here's my fiddle
http://jsfiddle.net/mspasiuk/hw4j4qt2/
To put in a nutshell what I want to do is have a textbox, when I type or hit on a button using a 'contains' clause, the treeview only have to show the items who match the criteria, If the search box is empty show the original treeview.
I would appreciate any help. Thanks
Alright, I was dealing with the same issue and with the help of this post I managed to do it. So make sure you check the existing thread I gave the link for. Hope that helps.
I have one problem with jQuery custom content scroller when I try to manipulate elements on page via ajax queries.
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
then I execute one ajax query to populate data from server
$.get(url, {'count':count, 'type':type}, function(data) {
masBlock.append(data);
$(".scroll").mCustomScrollbar("update");
deleteHoliday();
saveHoliday();
$('.add-holiday').hide();
})
but method "update" doesn't work and scroller doesn't resize. Please, what should I do to avoid this problem.
Thank you in advance.
Does the masBlock variable define the .scroll element or an element inside it?
Do you load images or plain text?
Instead of using the update method, you could try setting updateOnContentResize option parameter to true and see if that helps:
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize:true
}
});
});
In previous version when inline editing all looking good:
But in new version it is looking like that (i put read border over):
How to fix that?
I am using jQuery 1.6.1, jQueryUI 1.8.13
I also have using the latest jqGrid css file
The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:
onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');
see the source code of jquery.fmatter.js.
If I correct understand the problem the adding of 'ui-state-hover' class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.
So I suggest just remove the hover effects inside of loadComplete:
loadComplete: function() {
$("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
this.onmouseover = null;
this.onmouseout = null;
});
}
See the demo.
UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following
var iconHoverFixed = function(e) {
jQuery(this).addClass('ui-state-hover');
jQuery('span',this).removeClass('ui-state-hover');
},
iconNotHoverFixed = function(e) {
jQuery(this).removeClass('ui-state-hover');
};
and then we can fix the hovering problem so:
loadComplete: function() {
$("div.ui-inline-save, div.ui-inline-cancel").each(function() {
this.onmouseover = iconHoverFixed;
this.onmouseout = iconNotHoverFixed;
});
}
See the new demo here or here.
Looks like you need to update the jquerygrid css and the images folder the image is build from an offset inside an image (Sprite) http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png
and in you case it doesn't find the right place