I have a kendo grid which has buttons in every row, On click the buttons open a pop-up with different grid on each button click, and there is a detail teamplate in each row of pop-up grid which contains another grid.
Now the problem is how to assign dataSource to the 3rd grid when detailGridOptions(dataItem) function is called.
var p=0;
$scope.detailGridOptions = function (dataItem) {
return {
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
PId: { type: 'number' },
ParentId: { type: 'number' },
SLength: { type: 'number' },
SVolume: { type: 'number' },
Status: { type: "String" }
}
}
}
}),
//new kendo.data.dataSource({
//read: function (options) {
// options.success($scope.splGridData);
//},
filter: [
{ field: "ParentId", operator: "neq", value: p },
{ field: "ParentId", operator: "eq", value: dataItem.Id }
],
}),
columns: [
{
field: "SLength",
width: "55px"
},
{
field: "SVolume",
width: "55px"
}
]
};
}
ciSetUp.GetCurveDetailsData(Id).then(function () {
//debugger;
if (ciSetUp.getcurvedata.ReturnedResult.length > 0) {
$scope.CgridDataSource.data(ciSetUp.getcurvedata.ReturnedResult);
ciSetUp.GetCurveDetailsData(Id).then(function () {
$scope.detailGridOptions.data(ciSetUp.getcurvedata.ReturnedResult);
});
}
});
<div id="details-container" kendo-window="modal" k-title="'Pump Details'" k-visible="false" k-modal="true"> <!--style="height:370px;width:600px;"-->
<dl>
<dt id="pn"> Name : </dt>
<dt id="pk"> {{P}} </dt>
<dt id="sn">Status : </dt>
<dt id="sk"> {{Status}} </dt>
</dl>
<div class="tabcontainer">
<div class="cphPadd">
<div class="rowdiv">
<kendo-grid options="CgridOptions" k-data-source="CgridDataSource" style="margin-bottom:10px">
<div k-detail-template>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
</kendo-grid>
</div>
</div>
<button id="b3" class="button" ng-click="modal.close()">Cancel</button>
<button id="b2" class="button">Save</button>
<button id="b1" class="button" ng-click="modal.reload()">Refresh </button>
</div>
</div>
</div>
I'll be getting data from ciSetUp.
$scope.detailGriddataSource = new kendo.data.DataSource({
filter: [
{ field: "ParentId", operator: "neq", value: p },
],
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
PId: { type: 'number' },
ParentId: { type: 'number' },
SLength: { type: 'number' },
SVolume: { type: 'number' },
Status: { type: "String" }
}
}
}
}),
$scope.detailGridOptions = function (dataItem) {
var newData = $scope.detailGriddataSource.data().filter(function (el) {
return el.ParentId == dataItem.Id && el.ParentId != 0;
});
if (newData.length > 0) {
var Childdata = new kendo.data.DataSource({
data: newData,
});
return {
dataSource: Childdata,
columns: [
{
field: "SLength",
width: "55px"
},
{
field: "SVolume",
width: "55px"
}
]
};
}
}
Related
I am trying to load data into the VueJS table using the ag Grid vue plugin that I have in a template, I have tried several ways but I am not getting the result I am looking for ..., getting the following result:
{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123#gmail.com",
"created_at": null,
"updated_at": null
}
]
}
then I have my Vue view in this way, and sorry for including all the code, but since the template is working with everything that comes, I prefer to deliver all the detail, I have tried to make changes to the created method with axios, but I did not It works, unfortunately I can't load the data into the table, I hope you can guide me to fix my loading error.
<template>
<div id="page-user-list">
<!-- AgGrid Table -->
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="10"
v-model="currentPage" />
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue"
import '#sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'
import axios from 'axios'
// Store Module
//import moduleUserManagement from '#/store/user-management/moduleUserManagement.js'
// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"
export default {
components: {
AgGridVue,
vSelect,
// Cell Renderer
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
},
data() {
return {
// Filter Options
roleFilter: { label: 'Todos', value: 'all' },
roleOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Administador', value: 'admin' },
{ label: 'Usuario', value: 'user' },
{ label: 'Staff', value: 'staff' },
],
statusFilter: { label: 'Todos', value: 'all' },
statusOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Activo', value: 'active' },
{ label: 'Desactivado', value: 'deactivated' },
{ label: 'Bloqueado', value: 'blocked' },
],
isVerifiedFilter: { label: 'Todos', value: 'all' },
isVerifiedOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Si', value: 'yes' },
{ label: 'No', value: 'no' },
],
departmentFilter: { label: 'Todos', value: 'all' },
departmentOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Vendido', value: 'sales' },
{ label: 'Departamento', value: 'development' },
{ label: 'Administrado', value: 'management' },
],
searchQuery: "",
// AgGrid
gridApi: null,
gridOptions: {},
defaultColDef: {
sortable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
{headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
{headerName: 'Email', field: 'email', filter: true, width: 225 },
{headerName: 'Nombre', field: 'name', filter: true, width: 200 },
{headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
{headerName: 'Role', field: 'role_id', filter: true, width: 150},
{headerName: 'Acciones', width: 150, cellRendererFramework: 'CellRendererActions'},
],
// Cell Renderer Components
components: {
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
}
}
},
watch: {
roleFilter(obj) {
this.setColumnFilter("role", obj.value)
},
statusFilter(obj) {
this.setColumnFilter("status", obj.value)
},
isVerifiedFilter(obj) {
let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
this.setColumnFilter("is_verified", val)
},
departmentFilter(obj) {
this.setColumnFilter("department", obj.value)
},
},
computed: {
usersData() {
return this.users.data
},
paginationPageSize() {
if(this.gridApi) return this.gridApi.paginationGetPageSize()
else return 10
},
totalPages() {
if(this.gridApi) return this.gridApi.paginationGetTotalPages()
else return 0
},
currentPage: {
get() {
if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
else return 1
},
set(val) {
this.gridApi.paginationGoToPage(val - 1)
}
}
},
methods: {
setColumnFilter(column, val) {
const filter = this.gridApi.getFilterInstance(column)
let modelObj = null
if(val !== "all") {
modelObj = { type: "equals", filter: val }
}
filter.setModel(modelObj)
this.gridApi.onFilterChanged()
},
resetColFilters() {
// Reset Grid Filter
this.gridApi.setFilterModel(null)
this.gridApi.onFilterChanged()
// Reset Filter Options
this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }
this.$refs.filterCard.removeRefreshAnimation()
},
updateSearchQuery(val) {
this.gridApi.setQuickFilter(val)
}
},
created(){
//let users = /apps/user/user-list/
axios.get('api/users')
.then(res => {
let users = res.data.users;
})
}
}
</script>
<style lang="scss">
#page-user-list {
.user-list-filters {
.vs__actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-58%);
}
}
}
</style>
I am using Datatables to display a table and I am pulling a list of datestimes from a MySQL database. These date times are not standard dates and look like this:
12/30/19 # 04:17 pm
How can I sort these accurately with Datatables?
Here is my code:
getRes(function (result) { // APPLIED CALLBACK
$('#resdatatable').DataTable({
data: result, // YOUR RESULT
order: [[ 0, "desc" ]],
autoWidth: false,
responsive: true,
columns: [
{ data: 'id', title: 'ID' },
{ data: 'bookingdatetime', title: 'Booking Date' },
{ data: 'name', title: 'Name' },
{ data: 'class', title: 'Class' },
{ data: 'pickupdatetime', title: 'Pick up' },
{ data: 'duration', title: 'Duration' },
{ data: 'dropdatetime', title: 'Drop off' },
{ data: 'age', title: 'Age' },
{ data: 'coverage', title: 'Coverage' },
{ data: 'quote', title: 'Quote' },
{
data: 'status',
title: 'Status',
render: function(data, type, row) {
let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
if (isKnown) {
return $('<select id="resstatus'+row.id+'" onchange="changeResStatus('+row.id+')" data-previousvalue="'+row.status+'">', {
id: 'resstatus-' + row.id, // custom id
value: data
}).append(statusList.map(function(knownStatus) {
let $option = $('<option>', {
text: knownStatus.text,
value: knownStatus.id
});
if (row.status === knownStatus.id) {
$option.attr('selected', 'selected');
}
return $option;
})).on('change', function() {
changeresstatus(row.id); // Call change with row ID
}).prop('outerHTML');
} else {
return data;
}
}
}
]
});
});
/**
* jQuery plugin to convert text in a cell to a dropdown
*/
(function($) {
$.fn.createDropDown = function(items) {
let oldTxt = this.text();
let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
if (isKnown) {
this.empty().append($('<select>').append(items.map(function(item) {
let $option = $('<option>', {
text: item.text,
value: item.id
});
if (item.id === oldTxt) {
$option.attr('selected', 'selected');
}
return $option;
})));
}
return this;
};
})(jQuery);
// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
$('#resdatatable > tbody tr').each(function(i, tr) {
$(tr).find('td').last().createDropDown(statusList);
});
}
function getStatusList() {
return [{
id: 'Confirmed',
text: 'Confirmed'
}, {
id: 'Unconfirmed',
text: 'Unconfirmed'
}, {
id: 'Communicating',
text: 'Communicating'
}, {
id: 'Open',
text: 'Open'
}, {
id: 'Closed',
text: 'Closed'
}, {
id: 'Canceled',
text: 'Canceled'
}, {
id: 'Reallocated',
text: 'Reallocated'
}, {
id: 'No Show',
text: 'No Show'
}];
}
I need to sort bookingdatetime, pickupdatetime, dropdatetime accurately (they are currently being converted into MM/DD/YY in the PHP script)
Maybe you can prepend hidden <span> elements containing the respective unix timestamps in the cells that have dates (by manually parsing the dates). Then using such columns to sort alphabetically would practically sort time-wise.
My problem is: when I change db.Contacts.Where( x => x.Id > 100).Select(...), The KendoUI Grid cannot show the data. However, when x=>x.Id < 100, it can show the data.
If I delete the Where(...), it also can not show the data.
What is the wrong? Thank you very much.
Here is my code.
public class HelloOneController : Controller
{
......
public JsonResult Contacts_Read()
{
var query = db.Contacts.Where(x => x.Id < 100 )
.Select(x => new
{
Id = x.Id,
Email = x.Email,
FirstName = x.FirstName,
LastName = x.LastName
}).ToList();
}
return Json(query, JsonRequestBehavior.AllowGet);
}
......
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "/HelloOne/Contacts_Read",
dataType: "json"
},
schema: {
model:{
fields: {
Id: { type: "number" },
Email: { type: "string" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
pageSize: 20
},
height: 500,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ title: "Id", field: "Id", width: 50 },
{ title: "Email", field: "Email" },
{ title: "First Name", field: "FirstName" },
{ title: "Last Name", field: "LastName" }
]
});
After following the README in the autoform summernote package, whenever I try to submit the form I get this error:
Uncaught TypeError: undefined is not a function
Clicking on the error shows this code:
AutoForm.addInputType('summernote', {
template: 'afSummernote',
valueOut: function() {
return this.code(); //This as the offending line (marked with an x)
}});
I am not sure if I am doing something wrong or it is the package
schema
//Creating a new Collection
Todos = new Mongo.Collection("Todos");
//Defining the schema
Todos.attachSchema(new SimpleSchema({
name: {
type:String,
label: "Name",
max:200
},
description: {
type:String,
label: "Description",
autoform: {
afFieldInput: {
type: 'summernote'
}
}
},
todo_type: {
type: String,
label: "Todo Type",
allowedValues: ['normal', 'survey'],
defaultValue: "normal",
autoform: {
type: "select",
options: function () {
return [
{label: "normal", value: "normal"},
{label: "survey", value: "survey"}
];
}
}
},
survey_questions: {
type: [Number],
label: "Survey Questions",
optional: true,
autoform: {
type: "hidden"
},
},
user_id:{
type: String,
autoform: {
type: "hidden",
label: false
},
autoValue: function(){
if (this.isInsert) {
return Meteor.userId();
} else if (this.isUpsert) {
return {$setOnInsert: Meteor.userId()};
} else {
this.unset();
}
},
denyUpdate:true
},
last_modified: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
}
},
created_at: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
},
denyUpdate: true
}
}));
.html
<template name='todo_create'>
{{#autoForm collection="Todos" id="todo_create" type="insert"}}
<fieldset>
<legend>Add a Todo</legend>
<div style="float:left; margin-top:10px;">
<div class="textField">
{{> afQuickField name='name'}}
</div>
<div class="textField" style="margin-left:20px;">
{{> afQuickField name='todo_type'}}
</div>
</div>
<div class="descriptionText">
{{> afFieldInput name='description'}}
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Add a Todo</button>
{{/autoForm}}
<div class="tableHolder">
{{> tabular table=TabularTables.Todos class="table table-striped table-bordered table-condensed"}}
</div>
</template>
I have a Kendo UI Grid that displays n-child records, that I also have a custom resize function that keeps the grid sized for the browser window height. If I remove that resizeListener, the child records display as appropriate. If I have the resizeListener bound, the child records do not display.
This issue is specific to Internet Explorer 8 (sorry, it's a company policy limitation). The grid functions normally in Firefox.
I have tried using $(window).off("resize") when I activate the child template, in the databound, and in really a variety of random places that I thought might possibly work - but nothing so far.
I'm looking for a solution or a work-around for IE.
Here is the function:
function resizeGrid() {
var gridElement = $("#boxesgrid");
var dataArea = gridElement.find(".k-grid-content");
var newGridHeight = $(document).height() > 850 ? 850 : $(document).height() * .75;
var newDataAreaHeight = newGridHeight * .7;
dataArea.height(newDataAreaHeight);
gridElement.height(newGridHeight);
gridElement.data("kendoGrid").refresh();
}
var resizeListener = function () {
$(window).one("resize", function () {
resizeGrid();
setTimeout(resizeListener, 500);
});
};
Here is the html:
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">Line of Business</div>
<div class="panel-body" id="lobnav"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Application</div>
<div class="panel-body" id="lobapp"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Filter</div>
<div class="panel-body" id="jobfilter">
</div>
</div>
</div>
<div class="col-md-10">
<div id="boxesgrid"></div>
</div>
Here is the rest of the javascript/kendo code:
$(document).ready(function () {
resizeListener();
var isParent, appId, lobId, boxId;
var apiUrl = '#ViewBag.ApiUrl';
var lobDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
});
var appsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "App"
},
parameterMap: function (data, action) {
if (action === "read") {
data.lobid = lobId;
data.parent = isParent;
return data;
} else {
return data;
}
}
}
});
var filterDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Theme"
}
},
schema: {
model: { id: "FilterId" }
}
});
var boxesDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Process"
},
parameterMap: function (data) {
data.appid = appId;
data.parent = isParent;
data.lobid = lobId;
return kendo.stringify(data);
}
},
schema: {
data: "Data",
total: "Total",
model: { id: "JobId" }
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
var lobnav = $("#lobnav").kendoTreeView({
select: function (e) {
var tree = this;
var src = tree.dataItem(e.node);
lobId = src.LobId;
isParent = src.HasChildren;
},
change: function (e) {
appsDataSource.read();
},
dataSource: {
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
},
loadOnDemand: false,
dataTextField: "LobName"
});
var appnav = $("#lobapp").kendoListView({
selectable: "single",
autoBind: false,
change: function () {
var idx = this.select().index();
var itm = this.dataSource.view()[idx];
appId = itm.AppId;
boxesDataSource.query({
page: 1,
pageSize: 35
});
},
template: "<div class='pointercursor'>${AppName}</div>",
dataSource: appsDataSource
});
var jobsfilter = $("#jobfilter").kendoListView({
selectable: "single",
loadOnDemand: false,
template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
dataSource: filterDataSource,
dataBound: function () {
var dsource = $("#jobfilter").data("kendoListView").dataSource;
if (dsource.at(0).FilterName !== "All") {
dsource.insert(0, { FilterId: 0, FilterName: "All" });
}
},
change: function () {
var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),
selected = $.map(apps.select(), function (item) {
return appDs[$(item).index()].AppName;
});
if (selected.length > 0) {
if (dataItem.FilterId !== 0) {
var $filter = new Array();
$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
jgrid.dataSource.filter($filter);
} else {
jgrid.dataSource.filter({});
}
}
}
});
var jgrid = $("#boxesgrid").kendoGrid({
columns: [
{
field: "AppName",
title: "App"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
],
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
pageSizes: [35],
numeric: true,
refresh: true,
pageSize: 35
},
autoBind: false,
scrollable: true,
resizable: true,
detailInit: detailInit,
dataSource: boxesDataSource
}).data("kendoGrid");
function detailInit(e) {
var eventData = e;
$.ajax({
url: apiUrl + "ProcessJobs",
type: "POST",
data: {BoxId: e.data.JobId, AppId: e.data.AppId},
dataType: "json",
success: function(data, status, xhr) {
initializeDetailGrid(eventData, data);
}
});
};
function initializeDetailGrid(e, result) {
var moreChildren = result[0].HasChildren;
var gridBaseOptions = {
dataSource: result,
scrollable: false,
sortable: true,
columns: [
{
field: "ParentJobId",
title: "Parent Job"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
]
};
var gridOptions = {};
if (moreChildren) {
gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
} else {
gridOptions = gridBaseOptions;
};
$("<div/>").appendTo(e.detailCell).kendoGrid(gridOptions);
};
});
The resize function needed to be changed. The error was calling refresh on the grid, rather than resize. The corrected function looks like:
function resizeGrid() {
var gridElement = $("#boxesgrid");
var newGridHeight = $(window).height() > 800 ? 800 : $(document).height() * .75;
gridElement.height(newGridHeight);
gridElement.data("kendoGrid").resize();
}
Setting the data area separately was incorrect, as well.