SmartClient ListGrid boolen field without editMode(double click) - smartclient

I have smartclient ListGrid with some columns. ListGrid has some text fields with edit mode (double click to enter) and boolean fields.
All I need to do is disable editMode for boolean fields (disable double click) and still enable normal 'one-click' to change boolean value.
Double click should work for other columns.
Any ideas?
My code:
isc.ListGrid.create({
ID: "ColumnsList",
saveLocally: true,
filterLocalData: true,
alternateRecordStyles: true,
canReorderRecords: true,
selectionAppearance: 'rowStyle',
autoFetchData: false,
showRollOver: true,
canRemoveRecords: true,
deferRemoval: false,
initWidget: function () {
this.Super('initWidget', arguments);
var me = this;
var fields = [
{name: 'id', primaryKey: true, required: true, showIf: 'false', canEdit: false, canHide: false},
{
name: 'name',
validOperators: [],
canEdit: true,
canHover: false,
canSort: false,
title: 'DB Column Name'
},
{
name: 'primaryKey',
validOperators: [],
width: '12%',
canEdit: true,
canHover: true,
canSort: false,
//canToggle: true,
title: 'Primary Key',
type: 'boolean',
changed: function (form, item, value) {
// my logic to allow only one value per column is selected
}
}
];
me.setFields(fields);
}
}

You may add recordDoubleClick:"return false" on the boolean field, to prevent the grid-level handler from firing.
isc.ListGrid.create({
ID: "countryList",
width:550, height:224, alternateRecordStyles:true,
// use server-side dataSource so edits are retained across page transitions
dataSource: countryDS,
// display a subset of fields from the datasource
fields:[
{name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png", canEdit:false},
{name:"countryName"},
{name:"continent"},
{name:"member_g8", recordDoubleClick:"return false"},
{name:"population"},
{name:"independence"}
],
autoFetchData: true,
canEdit: true
})

Alternatively if you want to disable double click on all boolean fields you could use the following:
isc.ListGrid.create({
rowDoubleClick: function (record, recordNum, fieldNum) {
if (this.getField(fieldNum).type != "boolean") {
this.Super("rowDoubleClick", arguments);
}
},
fields: [
{ name: "isActive", type: "boolean", canEdit: false },
{ name: "firstName", type: "text", canEdit: true },
{ name: "lastName", type: "text", canEdit: true },
],
data: [
{ isActive: false, firstName: "Alex", lastName: "Smith" },
{ isActive: true, firstName: "Jane", lastName: "Monroe" },
]
});
I'm not 100% I understood the question, but if you're looking for a way to allow/disallow the changing of boolean fields take a look at ListGridField.canToggle

Related

How to adjust datatables DOM elements

I have 2 questions:
Anyone knows how to make the search bar and label in one line? (red circle) Currently its 2 lines.
Preferably using the dom attribute, if possible. Or any other simple and quick method.
How to remove the space between table header and body? (yellow space). css, js methods are welcomed!
Here's my datatables initialization:
table = $('#serviceItemList').DataTable({
processing: true,
serverSide: true,
scrollResize: false,
scrollY: 300,
scrollCollapse: true,
paging: false,
info: false,
createdRow: function (row, data, dataIndex) {
$(row).attr('data-id', data.id);
},
dom: 'Bfrtip',
ajax: {
'url': "/serviceitem/list",
'type': "POST",
'data': function (data) {
data.zone = zone;
}
},
columns: [
{ data: 'checkbox', name: 'items[]' },
{ data: 'DT_RowIndex', name: 'DT_RowIndex' },
{ data: 'zone', name: 'zone', orderable: true, },
{ data: 'code', name: 'code', orderable: true, },
{ data: 'description', name: 'description', searchable: true },
],
select: {
style: 'multi',
selector: 'td:first-child'
},
});
you can try it by inspecting the element and look for its class name and then you can set the display property to none
and for the search bar do the same and set the float property to left

vue good table - 3 requests to the service

I use vue-good-table object to render table in Vue.js. I use paging and sorting serverside.
My code:
<vue-good-table v-if="authorizations"
id="AuthorizationsTable"
ref="refToAuthorizationsTable"
#on-page-change="onPageChange"
#on-sort-change="onSortChange"
#on-column-filter="onColumnFilter"
#on-per-page-change="onPerPageChange"
mode="remote"
:columns="columns"
:rows="authorizations"
:totalRows="totalRecords"
:pagination-options="{
enabled: true,
mode: 'pages',
nextLabel: 'następna',
prevLabel: 'poprzednia',
ofLabel: 'z',
pageLabel: 'strona',
rowsPerPageLabel: 'wierszy na stronie',
allLabel: 'wszystko',
dropdownAllowAll: false
}"
:sort-options="{
enabled: true,
initialSortBy: {
field: 'id',
type: 'asc'
}
}">
(...)
export default {
name: 'AuthoritiesAdministration',
components: {},
data() {
return {
totalRecords: 0,
serverParams: {
columnFilters: {},
sort: {
field: 'id',
type: 'asc'
},
page: 1,
perPage: 10
},
rows: [],
columns: [
{
label: 'ID',
field: 'id',
type: 'number',
tdClass: 'vue-good-table-col-100'
},
{
label: 'Data wystawienia',
field: 'issueDate',
formatFn: this.formatDate,
tdClass: 'vue-good-table-col-200',
},
{
label: 'Nazwa operatora',
field: 'operator',
sortable: true,
formatFn: this.formatOperatorName,
},
{
label: 'Login',
field: 'operator.login'
},
{
label: 'Spółka',
field: 'company.description',
type: 'text',
},
{
label: 'Data ważności',
field: 'endDate',
type: 'text',
formatFn: this.formatDate,
},
{
label: 'Akcje',
field: 'btn',
tdClass: 'vue-good-table-col-250',
sortable: false
}
],
}
},
(...)
methods: {
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
onPageChange(params) {
this.updateParams({page: params.currentPage});
this.loadAuthorizations();
},
onPerPageChange(params) {
this.updateParams({
perPage: params.currentPerPage
});
this.loadAuthorizations();
},
onSortChange(params) {
this.updateParams({
sort: {
type: params[0].type,
field: params[0].field
}
});
this.loadAuthorizations();
},
onColumnFilter(params) {
this.updateParams(params);
this.loadAuthorizations();
},
loadAuthorizations() {
getAllAuthorizationsLightWithPagination(this.$store.getters.loggedUser.token, this.serverParams).then(response => {
this.totalRecords = response.data.totalRecords;
this.rows = response.data.authorizations;
}).catch(err => {
this.$showError(err, true);
});
},
I have noticed that there are sent 3 requests to the server instead of 1: there are called methods like onPageChange, onPerPageChange and onSortChange but only the first time when my page is loaded. It is unnecessary. I have one method in "mounted" section where I load the first 10 results (sorting and paging by default). It's common, well-known problem with vue-good-table? Or maybe should I add an additional flag to not to invoke these 3 methods unnecessarily when the page is loaded?
Your onSortChange method is called at the table loading because you made a initialSortBy with specific values. To remove this calling juste remove
initialSortBy: {
field: 'id',
type: 'asc'
}
from you table configuration, but your sort will not be set, so I think this should be a legit function call.
The onPerPageChange and onPageChange are triggered by the config below
:pagination-options="{
enabled: true,
...
}
just remove the colon before pagination-options to have a config like this
pagination-options="{
enabled: true,
...
}

Change text filed attribute in a specific row dojo dgrid in edit mode

I want to change a text field attribute in a specific row.
I have an editable dGrid with 5 fields, 2 of them are disabled and their values change when a select filed value is changed, now I want when the value of the select is changing to specific value, the two disabled filed are enabled for edit only for this row, and then be disabled again when choosing other values in the select, here's a screenshot of the grid
And here's the creation of the grid
this.productStore = new Memory({idProperty: 'id', data: []});
this.productObjStore = new ObjectStore({objectStore:
this.productStore});
var productColumn = {
field: 'productServiceId',
label: dojoConfig.i18n.productOrService,
className: 'hand',
editor: Select,
autoSave: true,
editorArgs: {
searchAttr: 'name',
labelAttr: "name",
style: 'width: 95%',
store: this.productObjStore,
required: true,
},
renderCell: function(object, data, td, options){
if(data != ''&& data != dojoConfig.i18n.addNewProduct){
td.innerHTML = this.editorArgs.store.get(data).label;
}
}
};
var quantityColumn = {
field: 'quantity',
label: dojoConfig.i18n.quantity,
className: 'hand',
editor: TextBox,
autoSave: true,
editorArgs: {
placeHolder: '#####',
regExp: dojoConfig.regExps.intExp,
trim: true,
style: 'width: 100%',
invalidMessage: dojoConfig.i18n.error_quantityIsZero,
validator: function(){
if( this.value > 0)
return true;
return false;
}
}
};
var me=this
var rateColumn = {
field: 'rate',
label: dojoConfig.i18n.rate,
className: 'hand',
editor: TextBox,
autoSave: true,
editorArgs: {
disabled: true,
placeHolder: '#####.##',
regExp: dojoConfig.regExps.floatExp,
trim: true,
style: 'width: 100%',
}
};
var amountColumn = {
field: 'amount',
label: dojoConfig.i18n.amount,
className: 'hand',
editor: TextBox,
editorArgs: {
disabled: true,
placeHolder: '#####.##',
regExp: dojoConfig.regExps.floatExp,
trim: true,
style: 'width: 100%',
}
};
this.discountStore = new Memory({idProperty: 'id', data: []});
var discountColumn = {
field: 'discount',
label: dojoConfig.i18n.lineDiscount,
className: 'hand',
editor: Select,
autoSave: true,
editorArgs: {
searchAttr: 'name',
labelAttr: "name",
style: 'width: 99%',
store: this.discountStore,
required: false,
value:null
},
renderCell: function(object, data, td, options){
if(data != '')
td.innerHTML = this.editorArgs.store.get(data).label;
}
};
this._grid = new Grid({
autoHeight: true,
showToolbar: true,
//label: dojoConfig.i18n.invoiceLines,
style: 'width: 100%; max-height: 200px; margin-top: 1px;',
columns : [
{field: 'id', label: 'ID', hidden: true, unhidable: true},
productColumn,
{field: 'description' ,label: dojoConfig.i18n.description, dismissOnEnter: false, editor: 'textarea', autoSave: true, renderCell: function(object, data, td, options){
td.innerHTML = data;
}},
quantityColumn,
rateColumn,
// discountColumn,
amountColumn,
{field: 'taxable', style:'width:50%', label: dojoConfig.i18n.taxable, editor: CheckBox, hidden: true, unhidable: true}
],
contextMenuInfo: [
{label: dojoConfig.i18n.new_, iconClass: 'newIcon', onClick: this.addProduct},
{label: dojoConfig.i18n.remove, iconClass: 'deleteIcon', onClick: this.deleteProduct, needSelection: true}
],
contextHandler: this,
selectionMode : 'single', // for Selection; only select a single row at a time
cellNavigation : false,
colspan: 5
});
this._grid.set('store', new Observable(new Memory({idProperty: 'id', data: []})));
Thanks

Event that is taking place after inline edit

I have jqgrid, which sends row's data to another view (MVC4) when row is selected. But when I edit row's info (I'm using inline edit) this view doesn't changed. And I can't find event that is taking place after inline edit. This is js, what should I change to change my view after row editing
$(function () {
$("#GridTable").jqGrid({
url: "/Goods/GoodsList",
editurl: "/Goods/Edit",
datatype: 'json',
mtype: 'Get',
colNames: ['GoodId', 'Имя', 'Цена'],
colModel: [
{ key: true, hidden: true, name: 'GoodId', index: 'GoodId', editable: true },
{
key: false, name: 'GoodName', index: 'GoodName', editable: true, sortable: true,
editrules: {
required: true, custom: true, custom_func: notATag
}
},
{
key: false, name: 'Price', index: 'Price', editable: true, sortable: true, formatter: numFormat,
unformat: numUnformat,
//sorttype: 'float',
editrules: { required: true, custom: true, custom_func: figureValid}
}, ],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
height: '100%',
viewrecords: true,
caption: 'Список товаров',
sortable: true,
emptyrecords: 'No records to display',
cellsubmit : 'remote',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
//to get good's full view when row is selected
onSelectRow:
function () {
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
//to change good's full view after row deleting
loadComplete: function(data){
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{
// edit options
zIndex: 100,
url: '/Goods/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
{
// add options
zIndex: 100,
url: "/Goods/Create",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// delete options
zIndex: 100,
url: "/Goods/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
$('#GridTable').inlineNav('#pager', {
edit: true,
add: false,
del: false,
cancel: true,
editParams: {
keys: true,
afterSubmit: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
});
});
The properties and callback function of editParams parameter of inlineNav can be found here. What you need is probably aftersavefunc or successfunc instead of afterSubmit, which exist only in form editing method (see here). The parameters of aftersavefunc or successfunc callbacks are described here (as parameters of saveRow), but the parameters depend on the version of jqGrid, which you use and from the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid fork and I would recommend you to use the current (4.13.3) version of free jqGrid.

Bind KendoUI grid with Model data in MVC 4

For example, I have a view with model IEnumerable<Correspondence>. I want to bind it to KendoUI grid. What should I do? I've tried
#model IEnumerable<Correspondence>
<div id="Correspondence"></div>
<script>
$(document).ready(function () {
$('#Correspondence').kendoGrid({
dataSource: {
data: #Html.Raw(Json.Encode(Model)),
editable: { destroy: true },
batch: true,
pageSize: 15,
schema: {
model: {
id: "Id",
fields: {
Subject: { type: "string" },
CorrespondenceType: { type: "number" },
SentDate: { type: "date" }
}
}
}
},
navigatable: true,
selectable: "row",
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
title: "Subject",
field: "Subject"
},
{
title: "Type",
field: "CorrespondenceType"
},
{
title: "Sent Date",
field: "SentDate",
format: "{0:MM/dd/yyyy}"
},
{
command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
{ name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
{ name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
title: "Action"
}
]
});
}); // end ready
</script>
But it doesn't work. The table even doesn't show up. Please help me. Thank you.
Edited!!!
I have solved my own problem. Because I used command column, so I have to add 3 functions: Open, Edit, and Delete. Then, the grid showed successfully.