I am having two problems with KOgrid.
1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.
2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width.
Did anybody else had the same issue ?
I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel).
KO Grid Display Isseues, On resize Gird shows one row. Images also included
that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.
Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )
<div data-bind="koGrid: gridOptions"
style="height: 800px; background-color: none;width: 1850px;">
</div>
self.gridOptions = {
data: self.mydatarray,
footerVisible: true,
displaySelectionCheckbox: true,
afterSelectionChange: self.RowSelectionChange,
rowHeight: 50,
selectWithCheckboxOnly: true,
enableSorting: false,
multiSelect: true,
selectedItems: self.SelectedRows,
enableColumnResize: true,
showFilter: false,
canSelectRows: true,
enablePaging: true,
pagingOptions: {
currentPage: ko.observable(1),
pageSize: ko.observable(3),
pageSizes: ko.observableArray([3, 6, 9])
},
rowTemplate: errrowtmpl,
columnDefs: [
{ field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl },
...
...
{ field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl }
]
}
Please let me know if you need any more information
Thanks
Kenner Dev
I found a solution to the problems I am facing.
1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.
$("div.kgViewport").css("overflow", "scroll");
2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.
<div data-bind="koGrid: gridOptions"
style="height: 73vh;overflow:scroll;width: 96vw;"></div>
Related
How to fix the problem of having the navbar as position: fixed in Sitecore 9.3. I saw some solutions on the blogs, but it only fixes the issue on the Sitecore 8 versions.
Basically when I open the partial design in Sitecore Experience Editor, I have set my navbar as position fixed in theme css file, and it shows the navbar below the scWebEditRibbon. I also saw that scWebEditRibbon is now position fixed, still it does not fix my issue since I also have position fixed on my element.
I fixed the issue by using the script provided Richard Szalay, I just changed the variable as you can see here:
Here is the script:
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
return {
priority: 50,
execute: function (context) {
// TODO: Change this CSS selector to suit your application
var FIXED_NAV_SELECTOR = '#navbar';
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
var scWebEditRibbon = window.parent.document.getElementById('scWebEditRibbon');
var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
if (scWebEditRibbon && 'MutationObserver' in window) {
var observer = new MutationObserver(function (mutations) {
nav.style.top = scWebEditRibbon.style.height;
});
observer.observe(scWebEditRibbon, { attributes: true, attributeFilter: ['style'] });
}
}
};
});
I have a weird bug in my application using Tabulator by #Oli Folkerd:
After refreshing the table I always end up with having 20 rows instead of my preset 25 rows:
I checked the response from my django ViewSet and the answer always contains the right amount of objects.
js Code:
var table = new Tabulator("#ptable",
{height:"100%",
layout: "fitData",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [50, 100],
ajaxURL: "api/products",
columns: cols,});
setInterval( function () {
table.setData();
}, 10000);
becomes:
I am happy to post code on the django part as well, but I do not think thats the problem here. Also interesting: When I click on a random page number in the footer I always get to see 20 items per page - except if I choose the last one.
I have created a pretty good ChartJS system but am having trouble with breaking the extra x-axis labels and title font details. They same to want to be the same for some reason.
First of all, the solution I got help with is here:
SO answer
The charts look okay like so:
As you can see the title and addition x-axis label are both the same font size. This occurs due to the configuration options of:
// context.xAxes.font
context.font = this.config.get("chart.axis.font");
context.fontSize = 100;
context.fillStyle = this.config.get("chart.axis.font.color");
context.textAlign = 'center';
context.fillText(line, x, y);
I have the configuration options setup this way:
title: {
display: true,
fontSize: 10,
text: this.options.title,
padding: titlePadding,
},
I have no idea why the fillText is working for both title and extra categories.
As far as I know, there's no fontSize property on the canvas rendering context. You should use its font property instead to specify weight, size, and family of the font.
Please take a look at the runnable code snippet provided in this answer.
I have a kendo grid and I declare this column for it:
{
width: 30,
sortable: true,
title: 'Title',
field: "status",
template: "#if(data.status=='false'){#= window.oooo #}else{#<span />#}#"
},
As you may probably guess, I want to access a variable (that is not on the row-model), say global variable window.oooo in order to display it in the cell.
But this doesn't work (it displays the code as is).
Is there a way to achieve this?
Looks like you need to properly close off the initial if statement before inserting your window.oooo like:
template: "#if(data.status=='false'){# #=window.oooo # #}else{#<span />#}#"
Live sample: http://jsfiddle.net/rniemeyer/Z6rjw/
I have created a list in Sencha touch2. I need to add paging to it. Lets say i need 25 items to be displayed in a page and on tap of "next" button, the next 25 items has to be displayed.
I believe sencha touch 2 provides paging but am not gettin a handle on it.
My code is
cls:'inboxqueuecls',
xtype:'list',
id:'queuelist',
store:'QueueStore',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false,
clearOnPageLoad: true
}],
style:{
'border-right':'0.01px black',
'background-color':'rgba(0,140,153,0.2)'
},
itemTpl:'{queueName}'
and my store is
pageSize: 20,
autoload: false,
proxy:{
type:'memory',
reader:{
type:'xml',
record:'string',
rootProperty:'QueuesNames',
}
}
but the "page size" doesn seem to be working.
Anything am missing? Please help.
As TDEBailleul has said pageSize is an attribute of store not of the proxy.
Second, Memory proxy does not support paging. MemoryProxy has its own processing in the Store.js. Specify json or other proxy to get paged ajax call at the output. Another solution is MemoryProxy or ever from other ancestor subclassing.