I have dynamic columns in w2grid column, In such column we have add date picker and select2. Date picker and select2 initialize in visible column but not initialize when horizontal scrolling. And when i horizontal scrolling to last column my all initialize datepicker and selct2 not working and they are not working.
Please help me.
https://i.imgur.com/eRGY7kX.png
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Check every second either it is initialize or not.
<script>
setInterval(function(){
if($('class_name').hasClass("select2-hidden-accessible")) {
} else {
$("class_name").select2();
}
}, 2000);
</script>
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'd like to add more columns to my list day view. So far the only way I have found to achieve this is by manually adding columns in the eventRender function.
Like so:
$('#calendar').fullCalendar({
defaultView: 'listDay',
eventRender: function (event, element, view) {
element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
element.find(".fc-list-item-time").after("<td>Etc</td>");
}
});
Is there a better way of achieving more columns?
(I did find the relevant feature request on github and upvoted it.)
i would do that in the viewRender function.
$('#calendar').fullCalendar({
defaultView: 'listDay',
viewRender: function (view, element) {
element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
element.find(".fc-list-item-time").after("<td>Etc</td>");
}
});
Edit:
If you want to have dynamic cols content for each event you have to use eventRender to add the cols
adding more cols will break the row with the header, because this is set to a fixed colspan. you can add cols in eventRender and then in viewRender, count those cols and set the colspan of the header row to that.
viewRender: function(view, element){
var cols = element.find('.fc-list-item')[0].children.length;
$.each(element.find('.fc-widget-header'),function(){
$(this).attr('colspan',cols);
});
}
Hi I tried to add a column. It goes. But add a column to .fc-widget-header add in the same way element.find('.fc-widget-header').after('<td class=\"fc-widget-header\" colspan=\"1\"></td>'); it is not.
I'm using ui-grid and the first column have to be pinned on the left. When the user hovers on one row, I want to highlight the entire row, which is the logical thing to do.
The problem is that ui-grid creates two distinct elements, one for the pinned column and the other on for the "regular" ones. So I don't know how to highlight the entire row at once, and solutions with CSS don't work.
.ui-grid-row:hover .ui-grid-cell {
background-color: red;
}
Plunker here: http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview.
Do you know how to do that ? Ideally just with ui-grid settings and CSS.
Thanks!
I solved it!
I used a row template that grabs the row id, defines ng-mouseover and ng-mouseout functions that fills the background for all the cells in the row. For whatever reason I had to wrap the entire template in a div, simply adding something to the class of the template broke the entire table.
Content of the rowTemplate:
<div class="row-uid-{{row.uid}}">
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ng-mouseover="grid.appScope.onRowHover(row.uid);"
ng-mouseout="grid.appScope.onRowOut(row.uid);"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader}"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>
</div>
Added functions in the controller:
$scope.onRowHover = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'red');
});
};
$scope.onRowOut = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'white');
});
};
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.
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