A have a checkbox column inside my grid. With another different chechbox I want to toggle the enabling and disabling of the checkbox column inside the grid. The checkbox column is the first column inside my grid.
I have done something like this:
onCheckBoxFieldChange() {
var testGrid = Ext.getCmp('testGrid');
var cm = testGrid.getView().getHeaderCt().getGridColumns();
if (newValue === true) {
cm[0].setDisabled(true);
cm[0].addCls('noClick');
}
else {
cm[0].setDisabled(false);
cm[0].removeCls('noClick');
}
}
CSS:
.noClick {
pointer-events: none;
}
I have tried two approaches. One with the method setDisabled and the other with setting a CSS class. Both approaches did not work. Please help...
Try this:
grid.getView().getHeaderCt().child('checkcolumn').setDisabled(newValue);
This will search for the grid's column whose type is checkcolumn then disable it.
Related
I want to hide a drop-down on the basis of a selected user input.
So far I have done
var getText = document.getElementById('issuemeters-issuance_type').value;
Then in if else condition
if(getText == 'HESCO/OEM')
{
$('.field-issuemeters-issuer').hide();// the drop-down which i want to hide
$('#issuemeters-issuer').val('');// setting the text value to null
}
else
{
$('.field-issuemeters-issuer').show();
}
It will work when getText is equal to HESCO/OEM. I have also checked the value in console but I don't know why it's not working.
Any help would be highly appreciated.
try with a listener on "issuemeters-issuance_type" change:
$('#issuemeters-issuance_type').on('change',function(){
if($(this).val() === 'HESCO/OEM')
{
$('.field-issuemeters-issuer').hide();// the drop-down which i want to hide
$('#issuemeters-issuer').val('');// setting the text value to null
}
else
{
$('.field-issuemeters-issuer').show();
}
});
assuming that "issuemeters-issuance_type"
I have a Kendo Grid whose values get populated based on a post call. I need to gray out an entire row if one of the column has a value "REGISTERED".
Is there a way we can achieve this?
Add a handler function for the onDataBound event. In the onDataBound event handler, add jQuery that grey out column, something like this:
function onDataBound(event) {
// ...
// Assumes your Kendo grid DOM element, or other appropriate element enclosing your disabled rows, is in the "el" variable
el.find( ":contains('REGISTERED')" ).addClass("disabled");
}
<style>
.disabled { color: #999; } /* Or however you want to grey it out */
</style>
Look this example, I'm checking every row to see if it matches a condition, then colouring it. You just need to add this event in the DataBound event of the grid like this
.DataBound("onRowBound")
Then, check the condition
static onRowBound(e) {
var grid = $("#Funciones").data("kendoGrid");
grid.tbody.find('>tr').each(
function () {
var dataItem = grid.dataItem(this);
if (dataItem.ColumnName == "REGISTERED") {
$(this).css('background', 'gray');
}
});
}
I want to make a column visible if its checkbox is selected. I have this function:
function SaveTableSettings() {
var notChecked = [], checked = [];
var table = $('#data-table');
$(":checkbox").each(function() {
if(this.checked){
checked.push(this.id);
} else {
notChecked.push(this.id);
}
});
And I want to use the elements of the "checked" array and change corresponding column visibility with this function :
if (dataTableId == "data-table"&&toShow.length<1) {
alert("in if");
table.column(1).visible(false);
table.column(2).visible(false);
table.column(3).visible(false);
table.column(4).visible(false);
} else {
for (i = 0; i < toShow.length; i++) {
}
}
where "toShow" is the same array with to "checked" I passed it as parameter. I want to make the column which is in the array visible .But I do not know what to do in the for loop. Thanks for any help
You can use the Buttons extension for that purpose, and to be more precise you should use the column visibility plug-in for Buttons.
Here is the basic usage example:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'colvis'
]
} );
} );
You have to include the relevant JavaScript files, for example:
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.colVis.min.js
Alternatively, use Download builder and include DataTables with Buttons and Column visibility modules.
p.s In case that you use old datatables (1.9.x you should use the ColVis extension
It is hard to debug your code without the markup / HTML, but to me it somehow seems like you are trying to use a sledgehammer to crack a nut.
Instead of id's (?) simply use an attribute to bind the checkbox to a certain column :
<input type="checkbox" data-column="0" checked/>
And in your SaveTableSettings() or whatever :
$("[data-column]").each(function() {
table.column($(this).data('column')).visible($(this).is(':checked'));
})
a small demo -> http://jsfiddle.net/c0o48jmv/1/
The above can easily be changed to target id's instead of column indexes. Simply add id's to your <th>'s
<th id="col0">columnHeader</th>
and refer to those id's instead of the indexes
<input type="checkbox" data-column="#col0" checked/>
http://jsfiddle.net/d9q06cg0/
I've got a "tablesorter table" containing a category names in the first column. I filter the rows using shortcut buttons which trigger the specific "search" actions depending on which one is active:
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
var columns = [];
columns[0] = category;
$('table').trigger('search', [columns]);
}
Contents of the table may change. Until now I triggered on the table two events: "updateCell" and "search" and it got properly updated.
I need to separate these calls:
"updateCell" would be triggered by the cell editor (attached by a "sorter" for that specific columns' content)
"search" would be triggered after the cell is updated.
Unfortunately filtering in the "updateComplete" handler doesn't work, please see: http://jsfiddle.net/8cg4f/352/
How can I retain the search criteria after updating the table?
Well, the problem seems to be that since the filter inputs are empty, the filter widget is showing all rows after the update. I have two solutions, the second one probably being the better one because the first method causes flickering:
1) Add a setTimeout in the callback, with a time of 1 millisecond (demo):
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
setTimeout(function(){ do_filtering(); }, 1);
}]);
});
2) Update the filters, and hide the filter row (demo):
CSS
.tablesorter-filter {
display: none;
}
Code
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
$('.tablesorter-filter:first').val(category).trigger('search');
}
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
do_filtering();
}]);
});
I have a jqGrid with a navBar that has search: true and multipleSearch: true. I would like to add a button to my UI that automatically adds an additional rule to the search.
I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.
I've also tried accessing the search box directly using jQuery, like this:
$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
alert($(this).val());
});
But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).
Has anyone else dealt with an issue like this?
For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:
jQuery(document).ready(function() {
//Initialize grid.
//Initialize the navigation bar (#pager)
//Hack to force creation of the search grid.
//The filter's ID is of the form #fbox_<gridId>
jQuery('#pager .ui-icon-search').click();
jQuery('#fbox_list').searchFilter().close();
//Example button events for adding/clearing the filter.
jQuery("#btnAddFilter").click(function() {
//Adds a filter for the first column being equal to 'filterValue'.
var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
if (postFilters) {
$('#fbox_list').searchFilter().add();
}
var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
//The index into the colModel array for the column we wish to filter.
var colNum = 0;
var col = colModel[colNum];
$('#fbox_list .sf .fields select').last().val(col.index).change();
$('#fbox_list .sf .data input').last().val('filterValue');
$('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();
$('#fbox_list').searchFilter().search();
});
jQuery("#btnClearFilter").click(function() {
$('#fbox_list').searchFilter().reset();
});
});
If you mean the filter toolbar, you can do this: (status is the col name -- so, replace "#gs_status" w/ "#gs_" + your_col_name
jQuery("#distributor_grid").jqGrid('showCol',['status']);
jQuery(".ui-search-toolbar #gs_status")
.val('ALL')
;
$('#distributor_grid').RefreshData(); // triggers toolbar
to clear inputs, selects and reset grid
$("td#refresh_navGrid").click();