How to populate koGrid Groups Array on initial load? - javascript

How can I populate a koGrid Groups Array? The last line of the following code is throwing an error:
gridOptions: {
data: ko.observableArray([{ name: 'John', title: 'Abc', age: 29, salary: 35000, company: "OATI" }, { name: 'Peter', title: 'XYZ', age: 35, salary: 70000, company: "Infogain" }]),
multiSelect: true,
showGroupPanel: true,
showColumnMenu: false,
showFilter: false,
columnsChanged: this.columnsChanged,
maintainColumnRatios: true,
enablePaging: true,
pagingOptions: this.pagingOptions,
hideChildren: false,
footerVisible: false,
displaySelectionCheckbox: false,
columnWidth: 1000,
columnDefs: ko.observableArray([
{ field: '_sortIndex', visible: false, displayName: "Random Sort", sortDirection: "asc" },
{ field: 'name', visible: true, displayName: "Name", selectable: true, groupIndex: 1, width: 150 },
{ field: 'title', visible: true, displayName: "Title", width: 150 },
{ field: 'age', visible: true, displayName: "Age", width: 150 },
{ field: 'salary', visible: true, displayName: "Salary", agg: "sum", width: 150 },
{ field: 'company', visible: true, displayName: "Company", width: '**' }
]),
groups: ['company'] // this code is throwing error. without this line it is working fine.
}
Can anyone explain what is wrong?

Related

Adding a Button to VUE datatables

I looking to add a button to each row in a datatable component in VUE 2
Currently data is feeding from axios request as per below
axios.get('workers/viewall').then(response => this.workerslist = response.data);
Added a prop in the Datatable.vue to give customButtons = True
customButtons: {
default: true
},
And added the below to my Vue file
customButtons: {
hide: false,
icon: 'search',
onclick: function (user_id) {
this.$router.push({
name: 'edit_worker',
params: {user_id: user_id}
});
},
},
Which is put into the data component here:
data: function () {
return {
workerslist: [],
and then column data is as follows:
columndata: [{
label: 'ID',
field: 'id',
numeric: true,
html: false,
},{
label: 'First name',
field: 'fname',
numeric: true,
html: false,
}, {
label: 'Surname',
field: 'sname',
numeric: false,
html: false,
}, {
label: 'Date of Birth',
field: 'dob',
numeric: false,
html: false,
}, {
label: 'Gender',
field: 'gender',
numeric: true,
html: false,
}, {
label: 'Trade',
field: 'trade',
numeric: false,
html: false,
}, {
label: 'Nationality',
field: 'nationality',
numeric: false,
html: true,
}, {
label: 'Telephone',
field: 'telephone',
numeric: false,
html: true,
}, {
label: 'Mobile',
field: 'mobile',
numeric: false,
html: true,
}, {
label: 'Created',
field: 'created_at',
numeric: false,
html: true,
},{
label: 'Edit',
field: 'edit',
numeric: false,
html: true,
}],
It just has to put a button to have a click through at the end of each row

tr Id in JqGrid always 0

I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.

Kendo UI Gantt chart task lable change

I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],

How to put data on the total "FooterRow"?

I am using jqGrid plugin 4.6.0 with jQuery 1.11.0 to generate a report that needs the total in the summary. I was only able to generate the total grouped by column. jqGrid has a property called footerrow that is supposed to be the summary of the grid.
I need to place the total of the whole report in the FooterRow, but I was not able to do it.
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
mtype: "POST",
altRows: true,
datatype: "json",
loadonce: true,
height: "auto",
width: 1130,
rowNum: 10,
rowList: [ 10, 20, 30, 40, 50 ],
viewrecords: true,
pager: "#paginacao",
sortorder: "asc",
shrinkToFit: false,
headertitles: true,
loadui: "disable",
rownumbers: true,
autoencode: true,
caption: "Resultados encontrados",
deselectAfterSort: true,
gridview: true,
idPrefix: "id",
rowTotal: 4000,
sortable: true,
toppager: true,
resizable: true,
grouping: true,
groupingView: {
groupField: [ 'loginMedico' ],
groupCollapse: false,
groupOrder: [ 'asc' ],
groupSummary: [ true ],
groupDataSorted: true
},
footerrow: true,
userDataOnFooter: true
});
var modeloColunas = [
{ name: "loginMedico", index: "loginMedico", jsonmap: "loginMedico", label: "Login Médico", sortable: true, sorttype: "text", summaryType: "count", summaryTpl: "total" },
{ name: "nomeMedico", index: "nomeMedico", jsonmap: "nomeMedico", label: "Nome do Médico", sortable: true, sorttype: "text" },
{ name: "perfilMedico", index: "perfilMedico", jsonmap: "perfilMedico", label: "Perfil Médico", sortable: true, sorttype: "text"},
{ name: "tipoSolicitacao", index: "tipoSolicitacao", jsonmap: "tipoSolicitacao", label: "Tipo da Solicitação", sortable: true, sorttype: "text" },
{ name: "cancelada", index: "cancelada", jsonmap: "cancelada", label: "Cancelada", sortable: true, sorttype: "int" },
{ name: "liberada", index: "liberada", jsonmap: "liberada", label: "Liberada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "negada", index: "negada", jsonmap: "negada", label: "Negada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "pendente", index: "pendente", jsonmap: "pendente", label: "Pendente", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "total", index: "total", jsonmap: "total", label: "Total", sortable: true, sorttype: "int", summaryTpl: "total"} ];
Crossposting (and translating) my answer on SO-PT (written in Portuguese):
Check out this example.
Basically, you need to add an loadComplete function to your jqGrid, it will be used to build the footerData:
loadComplete: function () {
var $self = $(this);
var sumCanceled = $self.jqGrid("getCol", "cancelada", false, "sum");
var sumReleased = $self.jqGrid("getCol", "liberada", false, "sum");
var sumDenied = $self.jqGrid("getCol", "negada", false, "sum");
var sumPending = $self.jqGrid("getCol", "pendente", false, "sum");
$self.jqGrid("footerData", "set", {
loginMedico: "Total:",
cancelada: sumCanceled,
liberada: sumReleased,
negada: sumDenied,
pendente: sumPending
});
}
Source: getting the sum using footerdata on jqgrid

SlickGrid not populating properly from Ajax call returning JSON

I have a slickgird which saves to the database and the calculatons work.
however my issue is when returning data from the database to populate a slickgrid. I am calling an Ajax query which returns the data fine in the following format,
[
{
'HeaderService': 'ServicerReview',
'Service': '',
'Numberof': '',
'at': '',
'Charged': '',
'Total': '',
'Total2': '',
'Discount': '',
'FFO': '',
'EC': '',
'ECat': '',
'ECCost': '',
'ECCostTotal': '',
'ECCostTotal2': '',
'Margin': ''
},
{
'HeaderService': '',
'Service': 'SeniorReviewer',
'Numberof': '1',
'at': '#',
'Charged': '£600.00',
'Total': '£600.00',
'Total2': '',
'Discount': '',
'FFO': '',
'EC': '1',
'ECat': '',
'ECCost': '£350.00',
'ECCostTotal': '£350.00',
'ECCostTotal2': '',
'Margin': ''
},
.. and so on.
]
(. being other records of the same structure). which populates a variable called currentData
Then I decorate the grid by
var columns = [{ id: "HeaderService", name: "Category", field: "HeaderService", options: serviceHeaders, editor: Slick.Editors.SelectOption, width: 200 },
{ id: "Service", name: "Service", field: "Service", options: serviceActuals, editor: Slick.Editors.SelectOption, width: 150 },
{ id: "Numberof", name: "No", field: "Numberof", editor: Slick.Editors.Text, width: 50 },
{ id: "at", name: "", field: "at", width: 30 },
{ id: "Charged", name: "Per Unit", field: "Charged", editor: Slick.Editors.Text },
{ id: "Total", name: "Total", field: "Total", editor: Slick.Editors.Text },
{ id: "Total2", name: "Sub Total", field: "Total2", editor: Slick.Editors.Text },
{ id: "Discount", name: "Discount", field: "Discount", options: ",Yes", editor: Slick.Editors.SelectOption, cssClass: "greenbackground", width: 50 },
{ id: "FFO", name: "Fixed Fee", field: "FFO", editor: Slick.Editors.Text, cssClass: "greenbackground" },
{ id: "EC", name: "EC", field: "EC", editor: Slick.Editors.Text, width: 50 },
{ id: "ECat", name: "Cat", field: "ECat", editor: Slick.Editors.Text, width: 30 },
{ id: "ECCost", name: "Cost", field: "ECCost", editor: Slick.Editors.Text },
{ id: "ECCostTotal", name: "CostTotal", field: "ECCostTotal", editor: Slick.Editors.Text },
{ id: "ECCostTotal2", name: "CostTotal2", field: "ECCostTotal2", editor: Slick.Editors.Text },
{ id: "Margin", name: "Margin", field: "Margin", editor: Slick.Editors.Text }, ];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
editable: true,
cellHighlightCssClass: "changed"
};
var currentData;
$(function () {
var json = null;
$.ajax({
async: false,
global: false,
type: 'GET',
url: '#Url.Action("GetDetailsforQuote")',
dataType: "json",
success: function (data) {
currentData = "[" + data.toString() + "]";
debugger;
return data;
}
});
data = currentData;
alert(data);
grid = new Slick.Grid("#myServicesGrid", data, columns, options);
But the grid is then displayed on the screen, the columns are fine but there are loads of empty rows, with no data(the data should only have 6 records). any ideas to what I am doing wrong?
Got it... had to add
data = eval("[" + currentData + "]");
grid = new Slick.Grid("#myServicesGrid", data, columns, options);
thanks for looking.

Categories