We Keep Coding

How to add items Slick grid to Multi select TextBox?

I am new to Slick Grid.
This is my javascript code,I declared my variables here,
var grid;
var printPlugin;
var dataView;
var data = [];
var selectdItems = [];
var columns = [
{ id: "Id", name: "Id", field: "Id", sortable: true },
{ id: "Name", name: "Name", field: "Name", sortable: true, cssClass: "cell-title", editor: Slick.Editors.Text, width: 300 },
{ id: "Addr", name: "Addr", field: "Addr", sortable: true, editor: Slick.Editors.Text }
];
I add check box here,By using this check box, I want to add those items to 'selectdItems' array
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
Those are my options
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
editable: true,
ebableAddRow: true,
asyncEditorLoading: true,
autoEdit: false
};
This is my ajax method to getting data.In this ajax method I written '$('#btnShift').click(function (e)){}' function,If I written this method out side the ajax method it is not working,If I written this function in ajax method The ajax method is calling every action in a page, When I am adding selected records to multiline textbox those items binding and again rebinding the data to grid and clear the multiline textbox
var param = {};
$.ajax({
type: 'GET',
url: 'AllFeatures.aspx/method',
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (resp) {
var v = resp;
for (i = 0; i < resp.d.length; i++) {
data[i] = {
Id: resp.d[i].split('~')[0],
Name: resp.d[i].split('~')[1],
Addr: resp.d[i].split('~')[2],
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
var argRows = [];
grid.onSelectedRowsChanged.subscribe(function (e, args) {
argRows = args.rows;
});
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
$('#btnShift').click(function (e) {
var dataView = new Slick.Data.DataView();
dataView.beginUpdate();
dataView.getItems().length = 0;
dataView.endUpdate();
for (var i = 0; i < argRows.length; i++) {
selectdItems.push(data[argRows[i]]);
data.splice(argRows[i], 1);
$('#sel').append('<option>' + data[argRows[i]]['Name'] + '</option')
}
grid = new Slick.Grid("#myGrid", data, columns, options);
e.priventDefault();
});
}
});
I want to when I select the check box in grid after click the shift method that check box selected data shifted to multiline textbox.(I don't want to call ajax method multiple times )
This is my HTML Code
<div id="myGrid" style="width: 600px; height: 500px;" class="item-details-editor-container" ></div>
<button data-action='save' id="btnShift">shift</button>
<select multiple="" id="sel"></select>

It's quite hard to tell exactly what you're trying to do without a mockup.
But have you seen the examples at the 6pac repo:
https://github.com/6pac/SlickGrid/wiki/Examples
eg:
http://6pac.github.io/SlickGrid/examples/example-select2-multiselect-editor.html

jQuery datatable - unexpected vertical scrollbar

I am trying display data in jQuery datatable but, I am seeing unexpected vertical scrollbar.
Fiddler: https://jsfiddle.net/8f63kmeo/15/
HTML:
<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table>
JS
var Report4Component = (function () {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
//variables
this.result = null;
}
Report4Component.prototype.ShowGrid = function () {
var instance = this;
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" },
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
scrollCollapse: true,
"scrollX": true,
scrollY: "50vh",
deferRender: true,
scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
],
columnDefs: [{
orderable: false,
className: 'select-checkbox text-center',
targets: 0,
render: function (data, type, row) {
return '';
}
}],
select: {
style: 'multi',
selector: 'td:first-child',
className: 'selected-row selected'
}
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 2; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
instance.result = instance.GetData(limit);
instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
instance.customFilterOnTopGrid.draw();
};
Report4Component.prototype.GetData = function (limit) {
//structure of the response from controller method
var resultObj = {};
resultObj.Total = 0;
resultObj.RecordList = [];
for (var i = 1; i <= limit; i++) {
resultObj.Total += i;
var record = {};
record.Description = "Some test data will be displayed here.This is a test description of record " + i;
record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
record.Count = i;
resultObj.RecordList.push(record);
}
return resultObj;
};
return Report4Component;
}());
$(function () {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
ISSUE:
I am wondering why the vertical scrollbar is appearing and why I am seeing an incorrect count...? Is it because my datatable has rows with multiple lines? As I have already set the scrolly to 50vh, I am expecting all the rows to be displayed.
Note:
The table should support large data too. I have enabled scroller for that purpose as it is required as per the application design. To verify that click on "Load all" button.
Any suggestion / help will be greatly appreciated?

You just need to remove property " scroller: true" it will solve your problem.
For demo please check https://jsfiddle.net/dipakthoke07/8f63kmeo/20/

Kendo Grid - Dynamic Column and Custom Template

I have a problem with kendo Grid and Custom template. The problem is, I need to check the value of the column
if Value == 1, I need to change it to Icon Check
If Value == 0, I need to change it to Icon Delete
If Value == -1. I need to return empty html
This is the Example Code : Fiddle
var myFields = {
no: { },
section: { },
service: { }
};
for(var x = 0 ; x < dataList.length; x++){
myFields["data"+x] = { };
}
var no = 0;
var myColumns = [
{ title: "No", locked: true, width: 50, template: function(e){return ++no; } },
{ field: "section", title: "Hole Section", locked: true, width: 130 },
{ field: "service", title: "Services", locked: true, width: 200 }
/* other columns ... */
];
for(var x = 0 ; x < dataList.length; x++){
myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false});
}

Here is a Working Demo
Solution: You can change your data fed into the grid by replacing the numbers with a icon. I prefer using FontAwesome Icons as it is very light weight.
CDN for font awesome.
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
Code change to make changes into your data is as below.
tableData[tableData.length - 1]["data"+c] = formatCellData(dataOffset[c].selected);
// replace you code with function call.
the function definition is as below.
function formatCellData(value){
switch(value){
case 1: return "<i class='fa fa-check''></i>";break;
case 0: return "<i class='fa fa-trash''></i>";break;
case -1: return "";break;
default: return "";
}
}
Now this will make sure you get the HTML part instead of the numbers,
Now we need to make sure the HTML string is read as a regular HTML and icons are displayed and not the HTML string as is, So add this encoded: false attribute into your column data.
for(var x = 0 ; x < dataList.length; x++){
myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false,encoded: false});
}
Hope this helps.

Angularjs ng Grid, unable to show data for some ng grids when their columnsDef in Grid Options is different during multi ng grids display

I am trying to display multiple ngGrids in a single button click. But the problem is coming when the columnDef option in the Grid options are different for these Grids. Please find my plunker http://plnkr.co/edit/y878sCsl3PJ04MhcAKYI?p=preview. Here when we click 'create multiple ng grids', Grid 2 and Grid 3 data is appearing fine, for these two columnsDef in Grid options is same. However Grid1 data is not appearing, its columnDef in Grid Options is different from Grid2 and Grid3. For reference I have separated them individually through 'Create ng Grid1' and 'Create ng Grid2', which are working fine. The same grids I am trying to create together using 'Create Multple ng Grids' button. But the first grid data is not appearing. Can any one help me to fix it?
The following is my Grid Options setting code :
if (dashletteId == 1) {
$scope.myData = $scope.tabs[dashVar].data;
$scope.myColumnDefs = $scope.getColumnDefs($scope.tabs[dashVar].columns);
$scope[gridOptions] = {
data: 'myData',
showGroupPanel: true,
jqueryUIDraggable: false,
columnDefs: $scope.myColumnDefs
};
} else {
$scope.myData = $scope.tabs[dashVar].data;
$scope.myColumnDefs = $scope.tabs[dashVar].columns;
$scope[gridOptions] = {
data: 'myData',
showGroupPanel: true,
jqueryUIDraggable: false,
columnDefs: $scope.myColumnDefs
};
}
$scope.getColumnDefs = function( columns ){
var columnDefs = [];
columnDefs.push({field: 'mode', displayName: 'Mode', enableCellEdit: true, width: '10%'});
columnDefs.push({field:'service', displayName:'Service', enableCellEdit: true, width: '10%'});
angular.forEach(columns, function( value, key ) {
columnDefs.push({field: key, displayName: value, enableCellEdit: true, width: '10%' })
});
return columnDefs;
};

all of your 3 grids columnDefs are pointing to $scope.myColumnDefs ends up that all grids columnDefs are evaluated to the same array.
you might need to separate the scope variable to be assigned to columnDefs.
var template = '<div class= "chartsDiv">';
var config = {
1: {
gridOptions: 'gridOptionsOne',
data: 'dataOne',
columnDefs: 'colDefsOne'
},
2: {
gridOptions: 'gridOptionsTwo',
data: 'dataTwo',
columnDefs: 'colDefsTwo'
},
3: {
gridOptions: 'gridOptionsThree',
data: 'dataThree',
columnDefs: 'colDefsThree'
},
};
for (var dashVar = 0; dashVar < $scope.tabs.length; dashVar++) {
var name = "Recovery";
var dashletteId = $scope.tabs[dashVar].dashletteId;
var axisType = $scope.tabs[dashVar].axisType;
var chartName = "chart" + name.replace(/ +/g, "") + dashVar;
var tableData = "chart" + name.replace(/ +/g, "") + dashVar;
var gridOptions = "gridOptions" + chartName;
if (axisType == "table") {
if (dashletteId == 1) {
$scope[config[dashletteId].columnDefs] = $scope.getColumnDefs($scope.tabs[dashVar].columns);
} else {
$scope[config[dashletteId].columnDefs] = $scope.tabs[dashVar].columns;
}
$scope[config[dashletteId].data] = $scope.tabs[dashVar].data;
$scope[config[dashletteId].gridOptions] = {
data: config[dashletteId].data,
showGroupPanel: true,
jqueryUIDraggable: false,
columnDefs: config[dashletteId].columnDefs
};
template += ' <div class="col"> <p class="graphtitle">' + $scope.tabs[dashVar].dashletteName + ' </p> <div class="gridStyle" ng-grid="' + config[dashletteId].gridOptions + '"></div>';
}
}
template += ' </div>';
// alert(template)
angular.element(document.body).append($compile(template)($scope));

Slickgrid 3 grouping how to remove totals row?

I use multi-row grouping and put the totals in the grouping headers.
I'm not using the totals in the totals rows. I see the the rows are grouped and where the totals would be there are empty rows. In my case there is an empty row after each of the child grouping and at the end there is an empty row for the parent totals.
How do I remove these totals rows?
Thank you!
.cshtml:
<div id="gridList" class="grid" style="width: 100%; height: 500px"></div>
.js
$(function() {
var columns = [
{
id: "isExcluded",
name: "Exclude",
field: "isExcluded" /*, width: 120*/,
formatter: Slick.Formatters.Checkmark,
editor: Slick.Editors.Checkbox, sortable: true
},
{
id: "symbol",
name: "Symbol",
field: "symbol",
sortable: true /*, width: 120*/
},
{
id: "price",
name: "Price",
field: "price",
sortable: true
//, groupTotalsFormatter: sumTotalsFormatter
},
{
id: "parent_name",
name: "Parent Name",
field: "parent_name",
sortable: true /*, width: 120*/
},
{
id: "description",
name: "Description",
field: "description",
sortable: true,
width: 120,
editor: Slick.Editors.Text,
},
{ id: "cancel_ind",
name: "Canceled",
field: "cancel_ind",
sortable: true, width: 80 }
];
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return { valid: false, msg: "This is a required field" };
} else {
return { valid: true, msg: null };
}
};
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true,
enableExpandCollapse: true,
rowHeight: 25
};
var sortcol = "parent_name";
var sortdir = 1;
var grid;
var data = [];
var groupItemMetadataProviderTrades = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProviderTrades });
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
function groupByParentAndSymbol() {
dataViewTrades.setGrouping([
{
getter: "parent_name",
formatter: function(g) {
return "Parent: " + g.value + " <span style='color:green'>(" + g.count + " items) Total: " + g.totals.sum.price + "</span>";
},
aggregators: [
new Slick.Data.Aggregators.Sum("price")
],
aggregateCollapsed: true
,lazyTotalsCalculation: true
},
{
getter: "symbol",
formatter: function(g) {
return "Symbol: " + g.value + " <span style='color:green'>(" + g.count + " items) Total: " + g.totals.sum.price + "</span>";
},
aggregators: [
new Slick.Data.Aggregators.Sum("price")
],
collapsed: true
,lazyTotalsCalculation: true
}]);
};
grid = new Slick.Grid("#gridList", dataView, columns, options);
grid.registerPlugin(groupItemMetadataProviderTrades);
grid.setSelectionModel(new Slick.RowSelectionModel());
..... /*sorting support etc*/
// use instead of the default formatter <--- removed not used.
function sumTotalsFormatter(totals, columnDef) {
var val = totals.sum && totals.sum[columnDef.field];
//if (val != null) {
// return "total: " + ((Math.round(parseFloat(val) * 100) / 100));
//}
return "";
}
// will be called on a button click (I didn't include the code as irrelevant)
var getDataList = function () {
$.getJSON('/Home/GetData/', function (json) {
data = json;
dataView.beginUpdate();
dataView.setItems(data);
groupByParentAndSymbol();
dataView.endUpdate();
dataView.syncGridSelection(grid, true);
});
};
getDataList();
});

Adding displayTOtalsRow: false to the dataview solved my problem - the total rows are not shown now.
var dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProviderTrades, displayTotalsRow: false });

To answer simply to your question... Just remove the aggregators: [...], when I say remove you have 2 options, you can remove whatever is the array [...] or you could simply erase completely that object line (so removing completely the aggregators[...]).
Now if you want more explanation of how it works...Let's give you some definition so you'll understand better. An aggregate is a collection of items that are gathered together to form a total quantity. The total in question could be a sum of all the fields, an average or other type of aggregator you might define. So basically it's the action of regrouping by the column you chose and give the calculation result of the group. Alright now how does it work in the case of a SlickGrid? You need to define what kind of Aggregator you want to use (Avg, Sum, etc...) that goes inside your function groupByParentAndSymbol(), defining them will do the calculation BUT unless you attach it to the field, nothing will be displayed, so in the example you found it is very important to attach/bind this groupTotalsFormatter: sumTotalsFormatter to your columns definition, as for example:
...var columns = [{id: "cost", ...width: 90, groupTotalsFormatter: sumTotalsFormatter}, ...];
so let's recap... Once the Aggregator is define new Slick.Data.Aggregators.Sum("cost") it will do the calculation but unless it's bind to the field nothing will be displayed. As an extra option, the aggregateCollapsed (true/false) is to display the sub-total (avg, sum or whatever) inside or outside the group when you collapse.