Gray out a row in kendo grid based on column value - javascript

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');
}
});
}

Related

Remove class before clicking on another table row HTML CSS JAVASCRIPT

The below code retrieves the table html element and contains an onclick function. On this it calls a bunch of functions which works completely fine. The last part of the function is to highlight the table row using the class .primary. There should only ever be one row highlighted with this class. How do I change the function so that it removes the class before you click on another row. At the moment if you click on a row it highlights the entire row yellow. But when you click on another row it also highlights thats one yellow. I just want one row to be highlighted each time:
var table = document.getElementById("tabledt");
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
if (this.classList.contains('selected')) {
highlightMarker(prevHighlightMarker, false);
tableText(this);
highlightMarker(cMarkers[$(this).data('id')], true);
this.classList.add("primary");
}
};
}
}
.primary {
background-color: yellow !important;
}
I think you are using jquery. There is a function in jquery that is useful in this cases.
siblings()
siblings selects all the all the elements with same parent. and you can filter it as you wish. https://api.jquery.com/siblings/
In this case you can do this way:
$("#tabledt tr").click(function(){
$(this).siblings('tr').removeClass('primary');
}

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

Gridcolumn enable/disable

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.

Tablesorter can't apply search criteria on updateComplete

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();
}]);
});

How do I manipulate a jqGrid's search/filters?

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();

Categories