Related
I am trying to display the items in my panel like that:
I tried to use layout absolute, but like that the text "Device selected" disappear and it is only visible the button "Anzeigen".
Using instead layout column this is the result:
How can I fix the UI so to display the items like in the first picture?
This is my code:
Ext.define('Traccar.view.chart.Chart', {
extend: 'Ext.panel.Panel',
xtype: 'chartView',
requires: [
'Traccar.view.chart.ChartController'
],
layout: 'column',
//layout: 'absolute',
controller: 'chart',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
},
tbar: {
componentCls: 'toolbar-header-style',
defaults: {
xtype: 'button',
disabled: true,
tooltipType: 'title'
},
items: [{
xtype: 'tbtext',
html: 'Statistics',
baseCls: 'x-panel-header-title-default'
}, {
xtype: 'tbfill',
disabled: false
}, {
handler: 'showMap',
reference: 'showMapButton',
glyph: 'xf279#FontAwesome',
stateful: false,
enableToggle: false,
disabled: false,
tooltip: Strings.centerlisttomap
}]
},
items: [{
xtype: 'label',
id: 'idOpen',
maxWidth: Traccar.Style.formFieldWidth,
reference: 'deviceField',
text: 'Please select one device ',
cls: 'statistic-panel-title-style'
}, {
items: [{
fieldLabel: Strings.reportPeriod,
reference: 'periodField',
xtype: 'combobox',
store: 'ReportPeriods',
disabled: true,
collapseOnSelect: true,
editable: false,
valueField: 'key',
displayField: 'name',
queryMode: 'local',
value: 'today',
listeners: {
change: 'onPeriodChange'
}
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'fromContainer',
hidden: true,
fieldLabel: Strings.reportFrom,
items: [{
xtype: 'datefield',
reference: 'fromDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: new Date()
}, {
xtype: 'customTimeField',
reference: 'fromTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'toContainer',
hidden: true,
fieldLabel: Strings.reportTo,
items: [{
xtype: 'datefield',
reference: 'toDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: (new Date(new Date().setDate(new Date().getDate() + 1)))
}, {
xtype: 'customTimeField',
reference: 'toTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'button',
reference: 'clearButton',
disabled: true,
text: Strings.clearAllSelections,
tooltipType: 'title',
minWidth: 0,
handler: 'onClearSeletcions'
}]
}, {
items: [{
xtype: 'button',
disabled: true,
reference: 'showButton',
text: Strings.reportShow,
tooltip: Strings.reportShow,
tooltipType: 'title',
minWidth: 0,
handler: 'onShowClick'
}]
}],
});
You can use layout hbox and vbox combinations with some margin on first container.
I skipped 2 hidden views ( don't know where they should be found ).
Ext.define('Traccar.view.chart.Chart', {
extend: 'Ext.panel.Panel',
xtype: 'chartView',
requires: [
'Traccar.view.chart.ChartController'
],
layout: 'vbox',
controller: 'chart',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
},
tbar: {
componentCls: 'toolbar-header-style',
defaults: {
xtype: 'button',
disabled: true,
tooltipType: 'title'
},
items: [{
xtype: 'tbtext',
html: 'Statistics',
baseCls: 'x-panel-header-title-default'
}, {
xtype: 'tbfill',
disabled: false
}, {
handler: 'showMap',
reference: 'showMapButton',
glyph: 'xf279#FontAwesome',
stateful: false,
enableToggle: false,
disabled: false,
tooltip: Strings.centerlisttomap
}]
},
items: [{
margin: "20 0 20 0",
xtype: 'label',
id: 'idOpen',
maxWidth: Traccar.Style.formFieldWidth,
reference: 'deviceField',
text: 'Please select one device ',
cls: 'statistic-panel-title-style'
}, {
margin: "20 0 20 0",
xtype: 'container',
layout: 'hbox',
items: [{
fieldLabel: Strings.reportPeriod,
reference: 'periodField',
xtype: 'combobox',
store: 'ReportPeriods',
disabled: true,
collapseOnSelect: true,
editable: false,
valueField: 'key',
displayField: 'name',
queryMode: 'local',
value: 'today',
listeners: {
change: 'onPeriodChange'
}
}, {
xtype: 'button',
reference: 'clearButton',
disabled: true,
text: Strings.clearAllSelections,
tooltipType: 'title',
minWidth: 0,
handler: 'onClearSeletcions'
}, {
xtype: 'button',
disabled: true,
reference: 'showButton',
text: Strings.reportShow,
tooltip: Strings.reportShow,
tooltipType: 'title',
minWidth: 0,
handler: 'onShowClick'
}]
}],
});
I am using free jqgrid 4.15.4 in one of my application. I have one question regarding updating multiple columns dropdown value at one go. I am using multiselect: true,option.
I have also learned about concurrency issue, but for now that is not an issue for me.
I have added a demo fiddle https://jsfiddle.net/tygLjmde/.
$(function () {
"use strict";
var mydata = [
{ id: "10", FirstName: "test", LastName: "TNT", Gender: "Male" },
{ id: "11", FirstName: "test2", LastName: "ADXC", Gender: "Male" },
{ id: "12", FirstName: "test3", LastName: "SDR", Gender: "Female" },
{ id: "13", FirstName: "test4", LastName: "234", Gender: "Male" },
{ id: "14", FirstName: "test5", LastName: "DAS", Gender: "Male" },
];
$("#list").jqGrid({
data: mydata,
colNames: ['','Id', 'First Name', 'Last Name', 'Gender'],
colModel: [
{
name: "act", template: "actions",
formatoptions: {
delbutton: false
}
},
{
label: "Id",
name: 'Id',
hidden: true,
search: false,
},
{
label: "FirstName",
name: 'FirstName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "LastName",
name: 'LastName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "Gender",
name: 'Gender',
search: true,
edittype: "select",editable: true,
editoptions: {
value: "Male:Male;Female:Female;" ,
},
stype: "select",
editrules: {
custom: true,
custom_func: function (value, colName, iCol) {
alert("The value to validate: " +value);
return [true];
}
},
},
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
},
loadComplete: function (id) {
if ($('#list').getGridParam('records') === 0) {
//$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
}
else {
var lastsel = 0;
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
}
},
pager: jQuery('#pager'),
loadonce: true,
viewrecords: true,
gridview: true,
width: 'auto',
height: '450px',
iconSet: "fontAwesome",
multiselect: true,
cellEdit:true,
emptyrecords: "No records to display",
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
},
});
$('#list').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", multipleSearch: true, searchOperators: true, search: true, loadFilterDefaults: true });
$('#list').jqGrid('navGrid', "#pager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true,
reloadGridOptions: { fromServer: true }
});
});
where you will see checkboxes in first column and Gender column consist dropdown with values. So let say if I have selected two rows and changing only one-row gender dropdown value.
So is this possible that other row gender column value gets changed automatically? If Yes then any demo/code changes suggestions?
Thank you in advance.
You use cell editing in your demo. Thus you can use afterSaveCell callback to make some additional actions after changing the value. You can examine the value of selarrrow parameter, which contains the list of ids of selected rows, and to use setCell to change the value of the Gender column of the rows to the new value:
afterSaveCell: function (rowid, cmName, value, iRow, iCol) {
var $self = $(this);
if (cmName === "Gender") {
$self.jqGrid("getGridParam", "selarrrow").forEach(function (id) {
var item = $self.jqGrid("getLocalRow", id);
if (id !== rowid && item.Gender !== value) {
$self.jqGrid("setCell", id, iCol, value, false, false, true);
}
});
}
}
See modified demo https://jsfiddle.net/OlegKi/20wh9a7g/
I want to add multiselect dropdown with chechbox in my application , i had added it , it works perfecty . Multiple selection is enabled but it's height is not getting set , here is my view ... please help
View
jQuery(grid_selector).jqGrid({
subGridRowExpanded: function (subgridDivId, rowId) {
},
autowidth: true,
shrinkToFit: true,
url: '#Url.Action("GetAllTasks","AdminIndex")',
datatype: 'json',
mtype: 'GET',
height: 'auto',
colNames:['Task Id ','Project Name', 'Assign To','Task Name','Task Description','Budget','Task Status','Start Date','End Date'],
colModel:[
{name:'Task_Id', key: true,searchoptions: { sopt: ['eq','ne','gt','ge','lt','le']}, index:'id', width:20, sorttype:"int", editable: true, editable: true, sortable: true, search: true, searchrules: { required: true}},
{name:'Project_Name',index:'pid', width:40,search:false,editrules: { required: true},editable: true,formoptions: { rowpos: 2, colpos: 1},editoptions:{size:"1",value: projects}, style: "width: 180px",edittype: "select", stype: "select",dataheight:'auto'},
{name:'User_Email',stype: 'select',index:'email',searchoptions: { sopt: ['eq','ne']},searchoptions:{ value: users }, width:60,editrules: { required: true},edittype: 'select',editable: true,editoptions:{size:5,value: users,dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
header:"Choose an option!",
minWidth: 100, //'auto',
height: 600,
selectedList: 7,
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
return;
}
});
}, 50);
},multiple: true,defaultValue: 'IN'},editrules: { required: true},edittype: "select", stype: "select"},
{name:'Task_Name',index:'tname', width:40,searchoptions: { sopt: ['eq','ne']},editrules: { required: true},editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required: true}},
{name:'Task_Description',index:'Task_Description',width:90, edittype: "textarea",editoptions:{rows:"3",cols:"21"},search: false,editable: true,editrules: { required: true}, classes: "textInDiv"},
{name:'Task_hrs',index:'taskhrs', width:20,search:false,editrules: { required: true,number:true},editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required: true}},
{name:'Task_Status',index:'tstatus',searchoptions: { sopt: ['eq','ne']},searchoptions:{ value: getAllSelectOptions() }, width:25, editable: true,search:true,editrules: { required: true}, editoptions:{value: getAllSelectOptions()},edittype: "select", stype: "select"},
{name:'Task_Start_Time',sortable:false,search:false,width:30, editable:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/M/Y "} },
{name:'Task_End_Time',sortable:false,width:30,search:false, editable:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/M/Y "} },
// {name:'CreatedTimeStamp',sortable:false,width:30, editable:false,search:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/m/Y H:m:s"} },
// {name:'ModifyTimeStamp',sortable:false,width:30, editable:false,search:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/m/Y H:m:s"}},
],
});
I have two question I can't find the answers to;
Based on the following:
$("#toolbar").kendoToolBar({
items: [
{
type: "buttonGroup",
id: "FilterControls",
buttons: [
{ id: "const", text: "Construction", spriteCssClass: "k-icon k-i-funnel", togglable: true, group: "filter", toggle: filterToggleHandler},
{ id: "lease", text: "Leasing", spriteCssClass: "k-icon k-i-funnel", togglable: true, group: "filter", toggle: filterToggleHandler },
{ id: "legal", text: "Legal", spriteCssClass: "k-icon k-i-funnel", togglable: true, group: "filter", toggle: filterToggleHandler },
{ id: "propt", text: "Property Management", spriteCssClass: "k-icon k-i-funnel", togglable: true, group: "filter", toggle: filterToggleHandler }
]
},
{ id: "mygreens", type: "button", text: "My Greens", spriteCssClass: "k-icon k-i-funnel", togglable: true, toggle: myToggleHandler },
{ id: "clear", type: "button", text: "Clear", icon: "funnel-clear", click: filtClearall, togglable: false },
{ is: "close", type: "button", text: "Close", spriteCssClass: "k-icon k-i-close", click: retOzone, togglable: false },
],
});
First how from the toggle event of the filter group can I tell the state of the mygreens toogle button
and secondly how do I reset the toolbar back to its initial state with no buttons selected, based on the button clear click
Cheers
First question:
var myGreensFilterActive = $('#mygreens').hasClass('k-state-active');
Second question:
filtClearall = function(){
$('#FilterControls>a.k-state-active').removeClass('k-state-active');
//remove filters from data source logic
datasource.filter([]);
};
I want to add Hierarchy (child) grid on button click event. By default on grid load, there is a child grid. I want it to bind on button click.
var people = new kendo.data.DataSource({
data: {!Output},
batch: true,
schema: {
model: {
fields: {
carId: { type: "string" },
vehicleId: { type: "string", editable:false },
Percentage: { type: "number", editable:false },
Price: { type: "string", editable:false},
CarType: { type: "string", editable:false},
CarSize: { type: "string", editable:false},
CarPerCase: { type: "number", editable:false },
Family: { type: "string", editable:false},
ModelType: { type: "string", editable:false},
EPId: { type: "string" },
Tax: { type: "string" }
}
}
},
pageSize: 20,
sort: { field: "vehicleId", dir: "asc" }
});
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
pageable: true,
toolbar: [
"save",
"cancel",
{
name: "Add",
text: "Show Car Price",
click: function(e) {
return false;
}
},
{
name: "Delete",
text: "Hide Car Price",
click: function(e) {
return false;
}
}
],
columns:[
{
field: "carId",
title: "Car ID",
width: 150,
hidden:true
},
{
field: "vehicleId",
title: "Vehicle ID",
width: 100
},
{
field: "Percentage",
title: "Percentage",
width: 70
},
{
field: "Price",
title: "Price",
width: 250
},
{
field: "CarType",
title: "Car Type"
},
{
field: "CarSize",
title: "Car Size"
},
{
field: "CarPerCase",
title: "Car Per Case"
},
{
field: "Family",
title: "Family"
},
{
field: "ModelType",
title: "Model Type",
width: 100
},
{
field: "EPId",
title: "EP Id",
hidden: false
},
{
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}
],
editable:true,
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailInit: detailInit
});
// hierarchy grid
function detailInit(e) {
var detailRow = e.detailRow;
codeDetailData = e.data;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: e.data.ItemPrices.toJSON(),
editable:true,
navigatable: true,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "Engine",
width: "200px",
editor: serviceItemAutoCompleteEditor
},
{
field: "TN",
title:"TN",
width: "110px"
},
{
field: "TaxApplied",
title:"Tax Applied"
},
{
field: "TaxChange",
title: "Tax Change",
width: "300px"
},
{
field: "StartDate",
title: "Start Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
},
{
field: "EndDate",
title: "End Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
}
]
});
}
Now the detailInit: detailInit configuration is set on load. I want that load without detailInit (responsible for child grid), and bind this setting on button click. Is it possible?
You will have to add a detail template to tell the grid there is going to be a detailinit grid
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
toolbar: [
"save",
"cancel", {
name: "Add",
text: "Show Car Price",
click: function (e) {
return false;
}
}, {
name: "Delete",
text: "Hide Car Price",
click: function (e) {
return false;
}
}],
columns: [{
field: "carId",
title: "Car ID",
width: 150,
hidden: true
}, {
field: "vehicleId",
title: "Vehicle ID",
width: 100
}, {
field: "Percentage",
title: "Percentage",
width: 70
}, {
field: "Price",
title: "Price",
width: 100
}, {
field: "CarType",
title: "Car Type"
}, {
field: "CarSize",
title: "Car Size"
}, {
field: "CarPerCase",
title: "Car Per Case"
}, {
field: "Family",
title: "Family"
}, {
field: "ModelType",
title: "Model Type",
width: 100
}, {
field: "EPId",
title: "EP Id",
hidden: false
}, {
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}],
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailTemplate: 'Item Prices: <div class="grid"></div>',
dataBound:function(e){
$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").hide();
}
});
then bind the detail event to the grid using a click button
$("#testbtn").click(function (e) {
$(".k-hierarchy-cell").show();
$(".k-hierarchy-col").show();
var grid = $("#grid").data("kendoGrid");
grid.unbind("detailInit");
grid.bind("detailInit", grid_detailInit);
grid.refresh();
});
Here is a Jsfiddle Example http://jsfiddle.net/ecotz69h/7/