Guys I have a gridview control.I'm getting record from database and adding to gridview table.I want to drag table's head and drop in x axis.While I dragging a table head,I want to drag its value too.I tried something like below
<script>
$(function () {
$(".gvLanguageClass").sortable({
items: 'th',
cursor: 'pointer',
dropOnEmpty: false,
axis: 'x'
}).disableSelection();
});
</script>
I couldn't find what can I write to items attribute to make table head and its td value draggable?Can anyone show a way to do it?
I found a library designed for draggable columns.
https://github.com/akottr/dragtable
You can import this files and all you should do is $(selector).datatable();
and done.
Related
I was trying to use JQuery UI Sortable plugin for multiple tables. The idea was to grab and drop elements in cells of a table, by connecting all <td> tags with this plugin.
It looks like this: https://jsfiddle.net/Lhm3z0bw/3/
By changing zoom with mouse wheel controls, we can actually grab the elements already placed in the table.
However, when the scale is changing, moving them makes a shift on the current grabbed element.
I tried adding some functions from the JQuery UI API for resetting positions for the element or updating the helper, but there's no good results on it.
$(".sortableCards").sortable({
connectWith: ".sortableCards",
containment: "window",
scroll: false,
placeholder: "sortable-placeholder",
items: ".card1",
forcePlaceholderSize: false,
sort: function(evt,ui) {
//////////
// Maybe some fix needed here ?
//////////
}
receive: function(event, ui) {
if ($(ui.sender).hasClass('cards')) {
if ($(this).find('.card1').length > 2) {
$(ui.sender).sortable('cancel');
} else {
ui.item.clone().appendTo($(ui.sender));
}
}
}
});
Here is another linked question with the same issue : How to get JqueryUI Sortable working with Zoom/Scale - mouse movements
I want to style a grid row after clicking on it. I get the grid row / item in the itemClickListener, but I need to avoid using grid.select(item). I have achieved the desired output which would highlight the row I clicked on with the grid select method, but this causes problems for my app since I do not want that row to be selected, but I want it to be just highlighted, e.g. apply a CSS style to said row. This is my code so far:
grid.addItemClickListener(e -> {
grid.deselectAll();
grid.select(e.getItem());
});
as well as:
grid.setStyleGenerator(row -> grid.getSelectedItems().contains(row)
? getRowSelectedStyle(row)
: null);
I cannot seem to find anything on the forums which could apply a style name for the clicked row.
You probably need to add a property to your item Bean, se "clicked".
Then you could do
grid.addItemClickListener(e -> {
e.getItem().setClicked(true);
grid.getDataProvider().refreshItem(e.getItem());
});
And
grid.setStyleGenerator(row -> row.isClicked()
? getRowSelectedStyle(row)
: null);
I am using jQgrid version 4.6.0 (Free version) and trying to edit the height of textbox which gets rendered when we set editable: true in Column model. I want the textbox height to fit into complete grid cell.
Here the width of rendered textbox is fine and fits in the cell but how can I increase the height of textbox?
Trying to achieve:-
There are some trick which you can use. You can editoptions in the column defined something like
editoptions: { style: "height:40px;" }
It will set style attribute on the textbox creating during editing. I think that the trick will work for any editing mode which you will use.
UPDATED: One can do the following in case of usage cell editing:
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
var tr = this.rows[iRow], h = $(tr).height(),
$input = $(tr.cells[iCol]).find("input"),
delta = $input.outerHeight() - $input.height();
$input.height(h - delta);
}
Inside of the most callbacks this will be initialized to the DOM of the <table> element (see here), which supports rows property to quick access to the row by rowIndex and the row (<tr>) supports cells array which can be used to get the cell by cell index. The rest of the code should be clear I hope.
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}
I am new to DoJo development so this could be basic.
I have created an EnhancedDatagrid and it shows the data fine.
The data comes from an JSON store in a different page.
I have a button which causes that one new entry is created in the datastore and then my datagrid is 'refreshed'. This works fine.
But now i want only as the last step to change the style of the first row in my datagrid.
(I need to make the newly added row more visible.)
But i simply can't figure out how to get a handle on the first row in a datagrid.
...
grid = new dojox.grid.EnhancedGrid({
id: strId,
store: store,
structure: layout,
}, document.createElement('div'));
dojo.byId(placeHolder).appendChild(grid.domNode);
grid.startup();
var row = grid.getItem(0); // ---get the first row. How ? And how to apply new style ?
...
Thank you in advance.
Solved the problem like this:
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
I use the 'Claro' theme and it prevented me to set the background color of the row-cells.
The solution was to set the customClasses to a style like this:
.highlightRow tr
{
background-color: #FF6A00 !important;
}
Found part of the solution here: http://dojo-toolkit.33424.n3.nabble.com/row-customStyles-was-overwrite-by-claro-theme-td3763079.html