We Keep Coding

Show/ Hide column in dojo grid based on condition

Guys i have a column which i want to hide and show based on condition in settings ... so how to do that in dojo ... here is my code
this._grid = new Grid({
myColumn,
{field: 'description' ,label:'description', dismissOnEnter: false, editor: 'textBox', autoSave: true, renderCell: function(object, data, td, options){
td.innerHTML = data;
}}]
});
var myColumn = {
field: 'myColumn',
label: 'myColumn',
editor: Select,
hidden:false, /* hide or show based on condition*/
autoSave: true,
};
any help will be greatly appreciated ... thanks

use grid.layout.setColumnVisibility(0,true); to show or hide a column of your grid dynamically.
If you have more columns to hide or show then use
grid.beginUpdate()
grid.layout.setColumnVisibility(i, visible);
grid.endUpdate();
i is the column index which you want to hide/show and visible is true/false
Hope this helps.
**********************update**********
adding jsfiddle
**************update 2*****************
take a look into this extension
https://github.com/SitePen/dgrid/blob/v1.2.1/doc/components/extensions/ColumnHider.md

You can easily use CSS
grid.styleColumn("idOfColumn", "display: none;");

Non editable kendo grid ID

I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code :
schema: {
id: 'ID',
fields: {
id: { editable: false }
}
}
This default schema, makes by default non editable id column, and i can't even create a new row with id .
I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).
Any ideas ?
Edit :
PS : the proprety is not related to only id, it can be on every column (can't update but can create)

The editable required a function instead of a value.
columns: [
{ field: 'value', editable: function () { return false; } }
],
Checkout here:
https://dojo.telerik.com/oROJayAd

I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:
edit: function(e) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
Demo
Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:
edit: function(e) {
let currentColumn = this.options.columns[e.container.index()].field,
model = this.dataSource.options.schema.model.fields[currentColumn];
if (model.editable === false) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
}
Demo
You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.

This is how I just did it, though there are other ways.
In columns option if you remove the field option from a column it doesn't know from where to bind it.
Then use the template option to show(bind) the id. Thus making it readonly
columns: [
{
title: 'Id', width: "40px",
template: "#= id #",
},
...]

Single check box selection with jquery datatable

In jquery datatable, single check box should be selected.
This link is working fine.
But above link is using jquery.dataTables 1.10.16 version. And I am using jquery.dataTables 1.9.4.
Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?

In the same page which you give the link, there are many explanation about to using "single check" oparetion.
At the end of the listed attachment, you can see the referanced .js file is
https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js
In your page, you should add this file referance after dataTable.js.
I think, the version of jquery is not important. The important file is "dataTables.select.js"!
Secondly, you must update your dataTable maker codes like the sample below;
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child' // this line is the most importan!
},
order: [[ 1, 'asc' ]]
} );
} );
UPDATES :
Why dont you try to write your own selector function?
for example;
$(document).ready(function() {
$('#example').DataTable( {
/// put your options here...
} );
$('#example').find("tr").click(function(){ CheckTheRow(this); });
} );
function CheckTheRow(tr){
if($(tr).find("td:first").hasClass("selected")) return;
// get the pagination row count
var activePaginationSelected = $("#example_length").find("select").val();
// show all rows
$("#example_length").find("select").val(-1).trigger("change");
// remove the previous selection mark
$("#example").find("tr").each(function(i,a){
$(a).find("td:first").removeClass("selected");
$(a).find("td:first").html("");
});
// mark the picked row
$(tr).find("td:first").addClass("selected");
$(tr).find("td:first").html("<i class='fa fa-check'></i>");
// re turn the pagination to first stuation
$("#example_length").find("select")
.val(activePaginationSelected).trigger("change");
}

Unfortunately, legacy data table does not support or have that select extension.
Workaround:
Create checkbox element inside 'mRender' callback.
Bind action to the checkbox. (This can be done inside the fnRowCallback or outside as in my example in below fiddle
https://jsfiddle.net/Rohith_KP/dwcatt9n/1/
$(document).ready(function() {
var userData = [
["1", "Email", "Full Name", "Member"],
["2", "Email", "Full Name", "Member"]
];
var table = $('#example').DataTable({
'data': userData,
'columnDefs': [{
'targets': 0,
'className': 'dt-body-center',
'mRender': function(data, type, full, meta) {
return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
}
}],
'order': [1, 'asc']
});
$('#example tr').click(function() {
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
});
Also, I suggest you to upgrade your datatable version. Then you can use that select extension.

Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?
Yes.
But, not using the Select Extension since it requires at least version 1.10.7.
For 1.9.4, a possible solution would be:
$(document).ready(function() {
$('#example').find("td input[type='checkbox']").click(function() {
selectRow(this);
});
var table = $('#example').DataTable();
function selectRow(clickedCheckBox) {
var currentPage = table.fnPagingInfo().iPage;
// Being unchecked
if (!$(clickedCheckBox).is(':checked')) {
$(clickedCheckBox).removeAttr('checked');
getRow(clickedCheckBox).removeClass('selected');
return;
}
var selectEntries = $("#example_length").find("select");
var showEntriesCount = selectEntries.val();
var totalRows = table.fnGetData().length;
// If show entries != totalRows append total rows opiton that can be selected
if (totalRows != showEntriesCount)
selectEntries.append($('<option>', {
value: totalRows,
text: totalRows
}));
// Display all rows
selectEntries.val(totalRows).trigger("change");
// Removes all checked attribute from all the rows
$("#example").find("td input[type='checkbox']").each(function(value, key) {
getRow(key).removeClass('selected');
$(key).removeAttr('checked');
});
// Check the clicked checkBox
$(clickedCheckBox).prop('checked', true);
getRow(clickedCheckBox).addClass('selected');
// Re set the show entries count
selectEntries.val(showEntriesCount).trigger("change");
// If added, Remove the additional option added to Show Entries
if (totalRows != showEntriesCount)
selectEntries.find("[value='" + totalRows + "']").remove();
// Go to the page on which the checkbox was clicked
table.fnPageChange(currentPage);
}
function getRow(element) {
return $(element).parent().parent();
}
});
The above will require fnPagingInfo to take the user back to initial page. I haven't tested the solution on large dataset, tested it on a table with 150 rows, but should work fine on larger datasets too.
JSFiddle

Have you tried below code and I checked and it is working fine, you need to update styles and scripts:
You havr to update the latest styles and scripts to achieve latest functionality.
Single check box selection with jquery datatable

angular ui-grid highlight entire row by cell click

It looks like a simple task, but I already spent 4 hours to find a solution. How can I highlight the entire row by cell click?
On register api I have next
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope,function(selected){
if('.ui-grid-cell-focus '){
console.log("fired class")
$(selected.row.entity).addClass('ui-grid-cell-focus')
}
console.log("fired cell")
$(selected.row.entity).addClass('ui-grid-cell-focus')
});
};
I see how click on cell is fired, but I cannot force to color the row and I don't want to select the row, because I use check box selection for this purpose, I just want to highlight the row by click on any cell in this row. Could somebody tell me where my mistake is?
Attached plunker

One way to accomplish what you want is to add a cellClass definition to your columnDefs. That function takes two params: grid and row.
$scope.gridOptions.columnDefs = [{
name: 'id',
width: '150',
cellTemplate: "",
cellClass: getCellClass
}, {
name: 'name',
width: '200',
cellClass: getCellClass
} ...
];
function getCellClass(grid, row) {
return row.uid === selectedRow ? 'highlight' : '';
}
On click you could set a variable to the uid of the row, and inside the cellClass function you can check if the uid of the current row matches the uid of the selected, if so, you can set the class to a class that properly reflects the background color of the selected row.
var selectedRow = null;
gridApi.cellNav.on.navigate($scope, function(selected) {
if ('.ui-grid-cell-focus ') {
selectedRow = selected.row.uid;
gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
}
});
Here's a link to your updated plunker: http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview
If you don't like the cellClass approach you could define custom cellTemplates and similarly react to a property you set on the row entity.

Why Expand and collapse is not working, After text search in Accordion List?

I have implemented AccordionList by using these demo 1) https://github.com/kawanoshinobu/Ext.ux.AccordionList 2) http://docs.kawanoshinobu.com/accordionlist/ . Accordion list displayed very nicely. as per requirement need to live search text on accordion list. I need to search text only in accordion list headers not in child nodes. After search, Once if got accordion headers should be able expand and collapse those headers. I have tried by using this link http://docs.sencha.com/touch/2.2.1/#!/example/search-list. its working very nicely for list I have applied to AccordionList. It is searching from headers showing available headers, but i am not able to expand headers but it contains child nodes (saw child nodes by console.log(abc)). Clicking on expand and collapse, executing code proper without any error/issue. For more reference i have provided code in below. Can any body tell me how to achieve this one in accordion list? great appreciate. Thank you.
Code is Here:
if(searchfield !== ""){
store.filter([{
property: "text",
value: searchfield,
anyMatch: true
//exactMatch:true
}]);
}
else{
store.clearFilter();
}
assigning this store value to accordion list code is below
var accordionlistContent = {
xtype: 'accordionlist',
//store: Ext.create('eGMonitorApp.store.TestsStore'),
store: store,
name: 'accordionList',
height: 500,
headerItemTpl: [
'<tpl if="this.isExpanded(values)">',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px" <tpl if="values.year">style="font-style:italic; "</tpl>>',
'{text}</div>',
'<div class="down"></div>',
'<tpl else>',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px"<tpl if="values.year">style="font-style:italic;"</tpl>>',
'{text}</div>',
'<div class="right"></div>',
'</tpl>'
].join(''),
contentItemTpl: [
'<div class="testsstatus{status}"></div></div>',
'<div style="margin-left: 10px" >{text}<div>'
].join(''),
useSelectedHighlights: false,
indent: true
}
Expand/Collapse code:
doAllExpand: function() {
var me = this;
me.doAll(function expand(node) {
if (me.getAnimation()) {
me.addListExpandListeners(node);
}
node.expand();
if (!node.isLeaf()) {
node.childNodes.forEach(expand, me);
}
});
},
doAllCollapse: function() {
var me = this;
me.doAll(function collapse(node) {
node.collapse();
if (!node.isLeaf()) {
node.childNodes.forEach(collapse, me);
}
});
},

I have achived. store.filter function, filter the text nicely but if it has child nodes also it wont show. because we have searched some particular text on store. after filter shows only those filter text. I have gone another way. it is working very nicely as per my requirement. I am calling web service store.load(). In store searching for entered text. if entered text is not available at parent level, removing that particular items form store. After iteration, final store assigning to accordion list. accordion list shows related search text data. cheers :). below is code. Thank you.
store.getProxy().setUrl('resources/Json/TestsStore.json');
store.load({
scope: this,
callback: function(records, operation, success) {
if (success) {
if(searchfield !=="") {
if(store.data.items.length !==0){
var length = store.data.items.length;
for(var j=length; j--;) {
if(store.data.items[j].data.name.search(new RegExp(searchfield, "i")) ===-1){
store.data.items[j].remove();
}
}
}
}
if(store.data.items.length ===0){
eGMonitorApp.util.Utility.showAlert('Searched text not available.','Tests');
}
this.getAccordionListRef().setStore(store);
}
}
});