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.
Related
I am a new user of kendo and I have a problem with a gantt!
I have a page with a Gantt kendo. For each activity I have a button edit. When my popup edit is open I have lot of fields and a multiselect. This multiselect should be specific for each activity.
I have put the code below in my function edit Gantt :
$.get('/Activity/ReadMultiSelectActivities?initiativeId=' + #Model.ID + '&excludeSectorId=' + $('#SectorID').val() + "&activityID=" + e.task.id, function (data, status) {
allActivitiesDataSource = new kendo.data.DataSource({
data: data.Data,
group: { field: "SectorName" },
sort: { field: "ActivityNumberString", dir: "asc" }
});
});
var msLinkedActivities = $('#linkedActivities').data('kendoMultiSelect');
msLinkedActivities.setDataSource(allActivitiesDataSource);
My problem is that I get the impression that my code is read into account with a delay time. That is, if I click on edit activity 1 the first time the list is empty, I close the edit and then return to edit activity 1 the list is filled. If then I go on edit activity 2 it will be the list of activity 1 ...
I tried many things that I view on tuto, demo and forum telerik but nothings function!
Have you an Idea for fix this problem please?
For information I have resolve my probelm. This is because the data are long to retrieve and so it made the setDataSource before loading the data!
I am working in speak UI . I have list of items to display in list . But before that i have to check one column value and need to manipulate this value with a Icon to display . How can I implement this change in SpeakUI . Please help
Simple option:
If the data you receive is directly relateable to the icon you want to display:
Set your DataSource on your ListControl to a ListControl Parameters item with your ColumnField items underneath (as outlined in Sitecore doco or other blogs). In the HTMLTemplate field for your column, you can use the value as the source of an image or CSS class with background image style.
<img src="{{YourField}}" />
or
<span class="{{YourField}}"></span>
where your span class styles your icon.
More complex but customisable:
I'm not sure which datasource you are using, but I am a fan of the JsonDataSource by Anders Laub as it's very simple to use and customise (you only need to add 2 small files).
To your SPEAK renderings you add your JsonDataSource, and ListControl with Items property: {Binding JsonDataSource.Json} (and DataSource as required)
Then in the javascript for your page (defined in your PageCode rendering) you can add items to this datasource and customise as required:
jQuery.ajax({
type: "GET",
dataType: "json",
url: "/yourApiCall" + params,
cache: false,
success: function (data) {
var total = 0;
for (var i = 0; i < data.YourItems.length; i++) {
app.JsonDataSource.add({
Col1: data.YourItems[i][0],
Col2: data.YourItems[i][1],
Col3: data.YourItems[i][2]
});
}
},
Where Col1, Col2, and Col3 are the names of your columns, and YourItems is the array of items you are receiving from your ajax call.
So I am trying to use Protractor to test a non-angular application (using Mocha). I have this code:
var page = createAccountPage.create('/noname');
page.typeFirstNameInput('jane');
page.typeLastNameInput('doe');
page.typePasswordInput('password');
page.clickAgreedToTermsInput();
page.clickCreateAccountButton();
page.redirectToCreateProfilePage();
Note that the type*() are all pretty much the same:
createAccountPage.typeFirstNameInput = function(value) {
$(selector).sendKeys(value);
};
This basically opens the browsers and should fill in the form fills and then clicks a button that redirect the page. The issue that I am running into is that it fills out all the form inputs except the first name. If I do this:
var page = createAccountPage.create('/noname');
page.typeFirstNameInput('jane');
page.typeFirstNameInput('jane');
page.typeLastNameInput('doe');
page.typePasswordInput('password');
page.clickAgreedToTermsInput();
page.clickCreateAccountButton();
page.redirectToCreateProfilePage();
Then it does fill out the first name however I get the error:
StaleElementReferenceError: Element is no longer attached to the DOM
The only reason I can see this happening is that the form is fill out correctly now and clicking the button redirects the pages and for whatever reason, the first page.typeFirstNameInput('jane'); is being executed last (which would also explain when when I have it there once, the first name is filled out).
Is there any reason why the first action page.typeFirstNameInput('jane'); would be executed last?
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>
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.