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
Related
I'm trying to bind an array of id-value pairs to a kendo grid popup editor.
Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.
The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.
Grid Markup
$("#ProjectSites-SubContract-grid").kendoGrid({
dataSource: {
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
DateOfContract: { type: 'date', editable: true },
DateOfCompletion: { type: 'date', editable: true },
AmountOfContract: { type: 'number', editable: true },
Contractor: { defaultValue: { id: "", name: "" } }
}
}
},
},
columns: [
{
field: "ScopeOfWork",
title: "Scope of Work",
template: "#=parseScopeOfWork(ScopeOfWork)#",
editor: scopeOfWorkEditor
},
]
});
});
Scope of Work editor
function scopeOfWorkEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
.appendTo(container)
.kendoMultiSelect({
dataSource: {
data: [
#foreach (var scopeOfWork in Model.AvailableScopeOfWork)
{
<text>{ id : "#scopeOfWork.Value", name : "#scopeOfWork.Text" },</text>
},
]
}
});
parseScopeOfWork -
this method guys iterates through the object list and concats the name.
function parseScopeOfWork(scopeOfWork) {
var result = "";
for (var i = 0; i < scopeOfWork.length; i++) {
result += scopeOfWork[i].Name;
if (i < scopeOfWork.length - 1)
{
result += ", <br/>";
}
}
return result;
}
Here's a screenshot:
You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:
Set the value in the widget's initialization:
.kendoMultiSelect({
value: options.model.ScopeOfWork
Demo
Bind the model to the widget for good:
let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');
kendo.bind($multiSelect, options.model);
$multiSelect
.appendTo(container)
.kendoMultiSelect({ ...
Demo
Note: Edit the category cell in both demos to see the changes.
Actually my requirement is want to create custom dropdownlist in the column header of kendo grid. I don't down like nrwant to use filtler column. I just want to add normal dropdown in header. Please provide any example like that so that i can move forward on my task.
Thanks in advance...
In your column definition add a property like this:
headerTemplate: '<input id="dropdown" />'
Then after your grid initialization do:
$("#dropdown").kendoDropDownList({...init parameters...});
UPDATE: go to dojo.telerik.com and paste in the following code:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "ProductName",
title: "Product Name",
headerTemplate: '<input id="dropdown" />'
},
{ field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
],
pageable: true,
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
},
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
var template = kendo.template(this.columns[1].template);
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var dataItem = {
UnitPrice: row.cells[1].value
};
row.cells[1].value = template(dataItem);
}
}
});
$("#dropdown").kendoDropDownList({
optionLabel: 'Choose a value...',
dataTextField: 'description',
dataValueField: 'id',
dataSource:{
data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
},
change: function(e){
//do whatever you need here, for example:
var theGrid = $("#grid").getKendoGrid();
var theData = theGrid.dataSource.data();
$(theData).each(function(index,item){
item.ProductName = e.sender.text();
});
theGrid.dataSource.data(theData);
}
});
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));
I'm trying to set a CSS class to rows in Slickgrid.
I've looked up here and here, and created a test code according with this Slickgrid example. Here it is:
var cols = [{ id: "id", name: "Report name", field: "Description", width: 600, sortable: true}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
syncColumnCellResize: true,
showHeaderRow: true,
headerRowHeight: 30
};
$(function () {
var data = [];
for (var i = 0; i < 10; i++) {
data[i] = {
Description: "Task " + i
};
}
data.getItemMetadata = function (index) {
if (index == 0) {
return { "cssClasses": "test" };
}
};
grid = new Slick.Grid("#listV", data, cols, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
});
The 'test' CSS class only colors the background of the row with red.
What happens is that when I load the page, I can see the first row flash with red for a second, but as soon as the page is loaded the background color is back to what it is for other rows.
What can be the issue here?
Thanks a lot!
I have my grid with multiselect = true, something likes this, you can click each checkbox and then delete, when I delete my first row I know the method selarrrow creates and arrays It just delete, but when I want to delete the second row It just never do the delRowData method, and when I select multiple checkbox It just delete the first. I think my method is looping over and over againg each time and never delete at least visually the other row, how can I fix it?? any advise thanks
this is my method:
onSelectRow:function(id) {
$("#mySelect").change(function (){
if(($("#mySelect option:selected").text()) == 'Deleted') {
var id = $("#list2").getGridParam('selarrrow');
for(var i =0; i<id.length;i++) {
$("#list2").jqGrid('delRowData',id[i]);
}
});
}
html
</head>
<body>
<div>
Move to:
<select id="mySelect">
<option value="1">Select and option</option>
<option value="2">Trash</option>
<option value="3">Deleted</option>
</select>
</div>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
js
$("#Inbox").click(function () {
$.post('../../view/inbox.html', function (data) {
$('#panelCenter_1_1').html(data);
$("#list2").jqGrid({
url: '../..controller/controllerShowInbox.php',
datatype: 'json',
colNames: ['From', 'Date', 'Title', 'Message'],
colModel: [
{ display: 'From', name: 'name', width: 50, sortable: true, align: 'left' },
{ display: 'Date', name: 'date', width: 150, sortable: true, align: 'left' },
{ display: 'Title', name: 'title', width: 150, sortable: true, align: 'left' },
{ display: 'Message', name: 'message', width: 150, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'From', name: 'name' },
{ display: 'Date', name: 'date' },
{ display: 'Title', name: 'title' },
{ display: 'Message', name: 'message' },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id_usuario',
viewrecords: true,
sortorder: "desc",
caption: "Inbox",
multiselect: true,
multiboxonly: true,
onSelectRow: function (id) {
$("#mySelect").change(function () {
if (($("#mySelect option:selected").text()) == 'Trash') {
var id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else if (($("#mySelect option:selected").text()) == 'Deleted') {
id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else {
}
});
}
});
});
});
You code looks very strange for me. I can't explain the effects which you describe without having the demo code, but I could point you to some places in the code which should be rewrote.
First problem: you use id parameter in the line onSelectRow:function(id) and then use the same variable name id to declare var id = $("#list2").getGridParam('selarrrow');. I don't understand why you do this. If you don't need parameter of onSelectRow you can just use onSelectRow:function() which will make the code more clear.
Second problems: you use binding to change event in $("#mySelect").change, but you use the statement inside of another event onSelectRow. So on every row selection you will have one more event handler to the change event. For example you would replace the body of $("#mySelect").change(function (){ to alert("changed!"). Then you would select two different rows and change the option in the "#mySelect". You will see two alerts. Then you select another row and change the option in the "#mySelect". You will see three alerts. And so on.
So you should rewrote your code in any way. If you will still have the same problem you should include full demo code (including HTML code with <select id="mySelect">...) which can be used to reproduce your problem.
I use a different approach. I build a vector of selected row ids and then process 'em with a single batch statemente server side then reload the grid.
More or less the code is.
var righe = $(nomeGrigliaFiglia).getGridParam("selarrrow");
if ((righe == null) || (righe.length == 0)) {
return false;
}
var chiavi = [];
for (var i = 0; i < righe.length; i++) {
var Id = righe[i];
var data = $(nomeGrigliaFiglia).jqGrid('getRowData', Id);
// Process your data in here
chiavi[i] = new Array(2)
chiavi[i][0] = data.FieldKey;
chiavi[i][1] = data.FieldChildId;
}
Note that I'm using this to actually send a int [][] to a C# Action
multiselect: true,
in your data process php $SQL .= "DELETE FROM ". $table. " WHERE no in ($_POST[id]);" ;