I have set selectable field in KendoGrid as "multiple,row" but still I am not able to select multiple rows using Ctrl key though it is working fine with Shift key.
Earlier it was working fine but after I had set virtualization in grid, it stopped working. Then I removed virtualization but still it is not working correctly since then. I have even restarted Visual studio, closed all the sessions but to no effect.
Can anyone please suggest a solution.
Please find the code below:
var sampleData = [];
var sampleDataSource= new kendo.data.DataSource({
data: sampleData ,
autoBind : false
});
$("#grid").kendoGrid({
dataSource: sampleDataSource,
height: 440,
selectable: "multiple",
sortable: true,
columns:[
{field: "Year", width:50, title: "Year"},
{field: "Name", title: "Name"}
]
});
Related
I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};
I am struggling to understand why I cannot get the ordinal aspect of my spline type chart to work correctly! I created a series of bar charts a long time ago but having not done anything like this in years I'm a tad clueless and needing some guidance, I've spent hours trying different methods and nothing works wether using Highcharts or highstock.
The code I have in the head of my page is as follows:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'spline'
},
title: {
text: theTitle,
x: -20
},
xAxis: {
ordinal: false,
type:'datetime',
labels: {formatter: function() {return Highcharts.dateFormat('%b %e (%y)', this.value);}}
},
series: []
}
$.getJSON("data_weight_loss.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
The dates are in datestamp format in my MySQL database as "2022-06-28 09:02:45" and despite trying all sorts I'm confused to how I can get the dates in my chart to add the dates in that don't already exist?
This image shows the chart on how it currently looks but has no relevance as the dates that are missing means the chart is not very helpful. It's been a long time since I used Highcharts and even did anything like this but as a personal project I'd love to get my chart working with the ordinal aspect in place. Is there anything glaringly obvious that I have done wrong?
The data for instance is like this if I look directly in the data call from the php page.
[{"name":"Date","data":[1651695362000,1652140800000,1652227200000,1652313600000,1652400000000,1652918400000,1653264000000,1654214400000,1654473600000,1654560000000,1654819200000,1655164800000,1655251200000,1655424000000,1655683200000,1656288000000]},{"name":"Weight","data":[2188,2000,1986,1962,1948,1868,1834,1744,1728,1720,1702,1682,1676,1666,1652,1622]}]
Any help would be appreciated, thank you.
I'm trying to display two gridviews using the dhtmlx scheduler library. The way we are using the scheduler is so that employees can sign out. Right now, we can view it as a monthly view but we also want to have a day view too.
I was able to create the grid, but when I try to click button it does not display the day report.
Here is a code snippet
scheduler.locale.labels.grid_tab = "Month";
scheduler.createGridView({
name:"grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"month",
step:1
});
scheduler.locale.labels.grid_tab2 = "Day Report";
scheduler.createGridView({
name:"day_grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"day",
step:1
});
Your code seems to work on scheduler demos
http://docs.dhtmlx.com/scheduler/snippet/b9320394
The only thing is that you need to define label for a day_grid view correctly, the variable should be named "day_grid_tab" instead of "grid_tab2"
scheduler.locale.labels.day_grid_tab = "Day Report";
I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.
I have this panel view. Please check this JSFiddle . So I have a cgi script which returns json for combo-box value and label but its not loading up in combo-box. I am not sure why any help will be appreciated. I just want the options to show up each time combo-box drop down menu is clicked.
var incidentjreader = new Ext.data.JsonReader({},['cid','list']);
var incident_store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'test.cgi'
}),
reader: incidentjreader
});
var incident_combo = new Ext.form.ComboBox({
store: incident_store,
mode: 'local',
id: 'incidentcombo',
typeAhead: false,
triggerAction: 'all',
width: 130,
fieldLabel: 'Incident',
valueField: 'cid',
displayField: 'list',
emptyText: 'Select Incident...',
});
incident_store.load();
Please check JSFiddle for more mode.
You are mixing ExtJS3.x syntax and 4.x API, use appropriate release examples to get you started.
Here is the same fiddle with fixed syntax and a few modifications:
http://jsfiddle.net/dbrin/QNSCk/4/