I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?
The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.
$('#gridtable').qtip({
content: 'Some text',
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.
if((gridRow['photo'] != "false"))
{
$("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});
path = '<img src="images/winephotos/'
+ gridRow['id']
+'.jpg" width="350" height="450" alt="Wine Image"'
+' class="resize"/>';
$('.imageicon'+i).qtip({
content: $(path)
,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
},
show: {
when: 'click',
//ready: true,
solo: true
},
hide: {
when: {
event: 'click',
event: 'mouseout'
}
},
style: {
width: { max: 280 },
name: 'dark'
}
});
}
gridRow=false;
}
Related
I use free jqgrid 4.8.
I use the jqgrid inside a modal dialog.
When I try to use the delete button of the pager, all the dialogs are disabled.
http://jsfiddle.net/9ezy09ep
$(function ()
{
$("#Ecran").dialog(
{
dialogClass: 'Ecran',
autoOpen: false,
width: 500,
height:400,
modal: true,
open: function (event, ui) {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 480,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
del: true, add: false, edit: false,
beforeRefresh: function () {},
afterRefresh: function () {}},
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{}, // search options
{}
);
},
close:function () {}
});
});
Any ideas ? thanks
I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.
I recommend you to include the line
$.fn.jqm = false;
to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.
UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/
jqGrid should utilize ui-dialog class when it creates modal dialog.
you will have to modify jquery.jqGrid.min.js file.
As per version 5.0.0 ,
Just add ui-dialog class to follwing line,
modal: { modal: "ui-widget ui-widget-content ui-corner-all ",
e.g.
modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",
As per free jqGrid version,
Add ui-dialog class to following line,
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front",
...
e.g.
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
...
I have one Kendo UI Grid in my view page (MVVM Concept). Bind the data from view model. When I reduce the page size.
Kendo UI grid change to Kendo UI Listview. See this image:
How can I do this?
Define one single DataSource for both Grid and ListView.
var ds = {
data : ...,
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
};
Then define both a DIV for the Grid and for the ListView:
<div id="grid"></div>
<div id="list"></div>
And initialize the Grid and the ListView:
$("#grid").kendoGrid({
dataSource: ds,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
]
});
$("#list").kendoListView({
dataSource: ds,
template : $("#template").html()
});
Now, what you should do is display one or the other depending on the width:
// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
Where CSS class ob-hidden is:
.ob-hidden {
display: none;
visibility: hidden;
width: 1px;
}
Now, the only remaining question is invoke one or the other depending on the width. You can user jQuery resize event for detecting changes.
So, enclose both ListView and Grid in a DIV with id container:
<div id="container">
<div id="grid"></div>
<div id="list" class="ob-hidden"></div>
</div>
and define the resize handler as:
$("window").on("resize", function(e) {
var width = $("#container").width();
console.log(width);
if (width < 300) {
console.log("list");
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
} else {
console.log("grid");
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
}
});
IMPORTANT: Whatever you do for getting this same result, please, don't create and destroy the Grid and the ListView each time there is a resize. This a computationally expensive operation.
See it in action here: http://jsfiddle.net/OnaBai/JYXzJ/3/
I am using kendo ui grid detail Template. In the grid i have a dropdown with some values like dropdown, textbox etc. If i add the new record then i don't want to show the expand/collapse icon. After selecting the dropdown and the selected value will be dropdown then only i want to show the expand/collapse icon. How can i able to do this using kendo ui. Hope you understand my quesion.
I have tried to access that in the dataBound Event like this
dataBound: function (e) {
var dataSource = this.dataSource;
this.element.find('tr.k-master-row').each(function() {
this.tbody.find("tr.k-master-row>.k-hierarchy-cell>a").hide();
});
}
Try this:
function dataBound() {
var grid = this;
//expand all detail rows
grid.tbody.find("tr.k-master-row").each(function () {
grid.expandRow($(this));
})
//remove hierarchy cells and column
$(".k-hierarchy-cell").remove();
$(".k-hierarchy-col").remove();
}
Another option is to set the Width() to look like it's hidden.
function dataBound() {
$(".k-hierarchy-cell", "#gridName").width(0.1);
$(".k-hierarchy-col", "#gridName").width(0.1);
}
If you use Kendo's MVC helper, it' way easier to do this that way:
$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").remove();
It hides first default column (with icon) but in the same time it keeps other columns in right position.
if you wonder how to do it with React without using jQuery, I ended up using cellRender props.
....
const cellRender = (tdElement, cellProps) => {
if (cellProps.field === 'expanded') { // this is the expand column you want to hide
if (cellProps.dataItem.ProductName !== 'Chai') { // Condition goes here. I disabled all expand icon if ProductName is not Chai
return <td> </td>;
}
}
return tdElement;
};
return (
<Grid
...
cellRender={cellRender}
...
>
<Column field="ProductName" title="Product" width="300px" />
<Column field="ProductID" title="ID" width="50px" />
<Column field="UnitPrice" title="Unit Price" width="100px" />
<Column field="QuantityPerUnit" title="Qty Per Unit" />
</Grid>
);```
To conditionally show the grid row details arrow, add a databound event to your grid that has the detail template. In the databound event, call this function:
dataBound: function (e) { // on data bound
var items = e.sender.items(); // find all rows
items.each(function() { // for each row
var row = $(this); //
var dataItem = e.sender.dataItem(row); // get the data item of the row
if (!dataItem.HasChildren) { // check for children
row.find(".k-hierarchy-cell").html(""); // if no children, hide arrow
}
});
}
<div id="example">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
some content
</script>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: [
{FirstName: "name1", hasChildren: true},
{FirstName: "name2", hasChildren: false}
],
height: 550,
sortable: true,
pageable: false,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function(e) {
var items = e.sender.items();
items.each(function(){
var row = $(this);
var dataItem = e.sender.dataItem(row);
if(!dataItem.hasChildren){
row.find(".k-hierarchy-cell").html(""); //It will hide
}
})
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "120px"
}
]
});
});
function detailInit(e) {
}
</script>
</div>
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.
I have an Image Component in ExtJS which loads an image via URL like this:
{
xtype: 'image',
width: 200,
height: 200,
src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
},
The image is displayed at 100%. 200x200 px are shown and the rest is clipped. I didn't find any property to allow scaling.
What is the best way to achieve a resizing image in ExtJS?
You can use xtype:'image' , shrinkWrap:true
Please check with Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap
A bit late...but I think this is kind of what you wish to have, I happened to use the image as a scaled background behind a panel instead of an image on top inside a panel, but the theory is the same:
//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
extend: 'Ext.container.Viewport', //my root view port
layout: {type: 'fit'},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container', //my background image
html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
layout: {type: 'border'},
items: [{
xtype: 'panel', //my panel on top of background
region: 'center',
bodyCls: 'transparent',
title: 'My Panel'
}]
}]
});
me.callParent(arguments);
}
});
Note that I didn't use image component, I used a container. html: <img ... and bodyCls: transparent... did the trick. You can change the image dynamically in a handler. Something like this:
//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
backgroundImage: 'wallpaper.jpg',
width: '100%',
height: '100%'
}).show();