I'm facing an issue when trying to perform server side pagination using an enhanced datagrid (dojo v1.10).
The first page is correctly displayed, but the widget (store ? grid ? plugin ?) seems to ignore the 'Content-Range' header value in response and does not allow to get next page.
For example with response header containing 'Content-Range: items 0-9/17', pagination displays '1 to 10 of 10 items', and next page is not available.
After some debug I see that range value is correctly read from JsonRest store (query function)
results.total = results.then(function(){
var range = results.ioArgs.xhr.getResponseHeader("Content-Range");
return range && (range = range.match(/\/(.*)/)) && +range[1];
});
...
But in fetch method from ObjectStore, totalCount value is undefined, results.length is then used:
var results = this.objectStore.query(query, args);
Deferred.when(results.total, function(totalCount){
Deferred.when(results, function(results){
if(args.onBegin){
args.onBegin.call(scope, totalCount || results.length, args);
...
Any idea ?
Thanks,
My code:
// get grid store
var restStore = new JsonRest(
{
target: "ks2/api/workflow/...",
});
var memoryStore = new Memory();
var store = Cache(restStore, memoryStore);
/*set up layout*/
var layout = [{
name: "id",
field: 'id',
width: '5%',
datatype:"string"
},
....
];
/*create a new grid*/
this.workflowGridWidget = new EnhancedGrid({
id: 'workflowGridWidget',
store: new ObjectStore({objectStore: store}),
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["10", "25", "50"],
defaultPageSize: 10,
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 4,//page step to be displayed
position: "bottom" //position of the pagination bar
}
}
});
/*append the new grid to the div*/
this.workflowGridWidget.placeAt("workflowDataGrid");
/*Call startup() to render the grid*/
this.workflowGridWidget.startup();
I found the issue: I was using a non dojo restful compliant API, and I needed to add JSON response post-processing using
aspect.after(store, "query", this.processResponse);
...
processResponse: function ks2ProcessMonitor_datagrid_WorkflowDataGrid_processResponse(deferred) {
return deferred.then(function(response) {
//process response content
return processedResponse;
});
},
This was working properly but for some reason, it has an impact on pagination. Removing this post-processing (using another API which is dojo compliant) fix the pagination issue.
Maybe I should try response post-processing using an Observable as suggested by Layke.
Related
I am trying to make custom Gutenberg Blocks through a plugin. Everything is going smooth the only issue is when I select my block from the blocks menu, it just pastes the JSON on the front. What I rather want is to render this JSON to make blocks.
I am fetching blocks' content from an API. I am attaching my code as well.
function makeBlock(block, category){
var jsonBlock = {
"__file": "wp_export",
"version": 2,
"content": ""}
;
$.ajax({
type: "POST",
url: document.location.origin+"/blocknets/wp-admin/admin-ajax.php",
data: {
'action': 'makeBlocks',
'id': block.id
},
dataType: "json",
encode: true,
}).done(function (resp) {
// console.log(resp);
jsonBlock.content = resp.data.content;
});
( function ( blocks, element, data, blockEditor ) {
var el = element.createElement,
registerBlockType = blocks.registerBlockType,
useSelect = data.useSelect,
useBlockProps = blockEditor.useBlockProps;
// debugger;
registerBlockType( 'custom-blocks/'+category+'-'+block.id, {
apiVersion: 2,
title: block.name,
icon: 'megaphone',
category: category,
edit: ()=>{return jsonBlock.content},
save: () => null
} );
} )(
window.wp.blocks,
window.wp.element,
window.wp.data,
window.wp.blockEditor
);
}
Purple Highlighted is my plugin, and Yellow is what it prints out.
What I rather want is to render this JSON. If I just paste this JSON into code editor it would look like this.
Can anyone help me out?
The jsonBlock.content displayed in the Editor view is serialized block content. The first step is to use parse() to transform the content into valid blocks. Next, to render the blocks I found RawHTML can be used to render innerHTML from the block content. The <RawHTML/> component uses dangerouslySetInnerHTML as seen commonly in React to render inner HTML content. Eg:
Edit()
const { parse } = wp.blockSerializationDefaultParser;
const { RawHTML } = wp.element;
export default function Edit({ attributes, setAttributes }) {
// Example of serialized block content to mimic resp.data.content data
var content = "<!-- wp:paragraph --><p>paragraph one</p><!-- /wp:paragraph --><!-- wp:paragraph --><p>then two</p><!-- /wp:paragraph -->";
// Parse the serialized content into valid blocks using parse from #wordpress/block-serialization-default-parser
var blocks = parse(content);
// Iterate over each block to render innerHTML within RawHTML that sets up dangerouslySetInnerHTML for you..
return blocks.map((block, index) => <RawHTML key={index}>{block.innerHTML}</RawHTML>);
}
Nb. The example covers parsing and displaying block content in the Editor, it does not cover saving the content, as your existing save() function is set to null.
I was able to render all the blocks by using the following edit function:
edit: ()=>{
window.wp.data.dispatch( 'core/block-editor' ).insertBlocks( window.wp.blocks.parse( jsonBlock.content));
return null;
}
I am trying to implement a search form where the results would be displayed via a dojo 1.6 data grid. I have the rendering working, I make an ajax call on form submit and then build a Datagrid in the call back function using the ItemFileWriteStore.
function search()
{
var action = './search.json';
dojo.xhrPost({url: action, form:"searchForm",
load: function(result) {
var newStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: "id",
items: JSON.parse(result),
url:'./search.json'
}
});
var grid = dijit.byId("searchResultsGrid");
if(grid == null) {
var layout = [[
{'name': 'Id', 'field': 'id', 'width': '50px'},
{'name': 'Name', 'field': 'name', 'width': '50px',editable: true,},
{'name': 'Source', 'field': 'source', 'width': '50px',editable: true,},
{'name': 'Version', 'field': 'version', 'width': '50px',editable: true,}
]];
var grid = new dojox.grid.DataGrid({
id: 'searchResultsGrid',
store: newStore,
structure: layout,
autoHeight:true, autoWidth:true, editable:true, columnReordering:true,
rowSelector: '20px'
});
grid.placeAt("gridDiv");
grid.startup();
}
else {
grid.setStore(newStore);
}
}
});
}
Now, when I try to make the grid editable and persist the changes to server, nothing happens with the ItemFileWriteStore. So I want to switch to JsonRestStore so that I can persist.
But the question is, how do I tie my form submit to the JsonRestStore or in other words is there a way to pass a dynamic query to the JsonRestStore ?
I want the JsonRestStore to fetch data on submit of my search form and based on the values in the search form.
Thanks in advance!
I would use the dojo.store.JsonRest store. In order to use the JsonRest store with dojox.grid.DataGrid, you will need to wrap it in a dojo.data.ObjecStore like below:
var newStore = new dojo.store.JsonRest({
target: '/search/',
idProperty: 'id'
});
newStore = new dojo.data.ObjectStore({
objectStore: newStore
});
Now the /search/ target should be your REST url. Your backend for /search/ should be able to support REST, which means you should be able to support GET, PUT, POST, DELETE requests. Take a look at http://dojotoolkit.org/reference-guide/1.10/quickstart/rest.html its for Dojo 1.10, but the method for implementing the backend should be similar.
Once you have the REST backend implemented to be able to retrieve and update data. You can send query parameters to the REST backend by setting the query parameter in the grid.
grid.setQuery({
param1: 1,
param2: 2
});
This will trigger the JsonRest store to use the url /search/?param1=1¶m2=2 to load the refresh set of data in the grid.
I am trying to separate a list of JSON data into segments ("sliders") and have succeeded in creating a data object in the format I want, however the foreach binding is not working as expected.
HTML Template:
<div class="slide" data-bind="foreach: actionSliders">
Stuff
</div>
Here is my relevant Knockout code:
function Slider() {
this.actions = ko.observableArray([]);
}
var viewModel = {
actionSliders: ko.observableArray([])
};
viewModel.loadData = function() {
//LOAD Actions from API
jQuery.ajax({
type: 'GET',
url: 'http://'+window.location.hostname+'/api/actions/get_author_posts/',
dataType: 'json',
success: function (ActionData) {
console.log('getJSON data - Actions',ActionData.posts);
var actionSlidersCount = 0;
viewModel.actionSliders([]);
//create the first slider array
viewModel.actionSliders().push(new Slider());
viewModel.actionSliders()[0].actions([]);
jQuery.each(ActionData.posts, function(index) {
// add each action to the current slider
viewModel.actionSliders()[actionSlidersCount].actions().push(new Action(this));
//add a new slider every 5 records
var calc = (parseInt(index)+1)%5;
if(calc ==0 ){
//new slider
actionSlidersCount++;
viewModel.actionSliders().push(new Slider());
viewModel.actionSliders()[actionSlidersCount].actions([]);
}
});
console.log('ActionSliders',viewModel.actionSliders());
},
data: { },
async: true
});
};
This is what my data looks like in the console:
ActionSliders
[Slider, Slider, Slider, Slider, Slider, Slider, Slider, sortNum: function, random: function, sum: function, max: function, min: function…]
0: Slider
actions: Object[0]
__proto__: Slider
1: Slider
2: Slider
3: Slider
4: Slider
5: Slider
6: Slider
length: 7
__proto__: Array[0]
* I can access all the data with console commands:
> viewModel.actionSliders()[0].actions()[0]
Action {id: 197, title: "Turned off the tap while brushing my teeth"…}
> viewModel.actionSliders()
[ Slider, Slider, Slider, Slider, Slider, Slider, Slider]
So, as you can see, in the working model (no errors in console, no data-bind errors), the object is fully populated with data, and in the template, "stuff" should repeat 6 times - once for each Slider, but the loop isn't even working. Is there a problem with having observable arrays inside of others? Am I missing something in the way I am creating the Slider objects? Any advice is most welcome, please.
Since you pushed new Slider object into your actionSliders observableArray I guessing the structure might be like this:
actionSliders = [
{
actions = {}
},
{
actions = {}
}
];
I'm sorry if this doesn't work for your, but how if you try to bind it like this ? :
<div class="slide" data-bind="foreach: actionSliders().actions">
Stuff
</div>
I found the answer, it was a two part issue.
The reason why foreach wasn't working was because I was pushing to the function, instead of the array. I needed to use:
viewModel.actionSliders.push(new Slider());
instead of:
viewModel.actionSliders().push(new Slider());
Once I did that, the foreach worked for the main object
Then, I realized I needed to inject the data inside the class, instead of from outside. To remedy that, I modified the code like this:
var tempActionArray = [];
jQuery.each(ActionData.posts, function(index) {
//add an action to the current slider
var tempAction = new Action(this);
tempActionArray.push(tempAction);
var calc = (parseInt(index)+1)%5;
if(calc ==0 ){
//add a new slider
actionSlidersCount++;
viewModel.actionSliders.push(new Slider(tempActionArray));
//reset temp array
tempActionArray = [];
//viewModel.actionSliders[actionSlidersCount].actions([]);
}
});
function Slider(data) {
var data = data || [];
this.actions = ko.observableArray([]);
var Actions = [];
//console.log("slider data",data)
jQuery.each(data, function(index) {
//console.log("action index",data[index])
Actions.push(data[index]);
});
this.actions = Actions;
}
and now all is good in the world! :) Moving on...
I am using the data table with my ASP.NET MVC 3 web application and so far it is going quite well. I connect to a SQL Server 2008 database, and I return data by using a stored procedure. I am using IE 8 and the latest version of Firefox. The version of YUI is 2.8.2r1. I have a couple of questions regarding the data table :)
Here is my data table's code:
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs, grdNewsDataTable;
// News list data table
var formatActionLinks = function (oCell, oRecord, oColumn, oData) {
var newsId = oRecord.getData('NewsId');
oCell.innerHTML = 'Edit | ' +
'Details';
};
var formatActive = function (oCell, oRecord, oColumn, oData) {
if (oData) {
oCell.innerHTML = "Yes";
}
else {
oCell.innerHTML = "No";
}
};
grdNewsColumnDefs = [
{ key: 'Title', label: 'Title', className: 'align_left' },
{ key: 'Active', label: 'Active', className: 'align_left', formatter: formatActive },
{ key: 'Action', label: 'Actions', className: 'align_left', formatter: formatActionLinks }
];
grdNewsDataSource = YAHOO.util.DataSource('#Url.RouteUrl(Url.NewsJsonList())');
grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
grdNewsDataSource.responseSchema = {
resultsList: 'DataResultSet',
fields: [
{ key: 'NewsId' },
{ key: 'Title' },
{ key: 'Active' },
{ key: 'Action' }
]
};
grdNewsConfigs = {
paginator: new YAHOO.widget.Paginator({
rowsPerPage: 20
})
};
grdNewsDataTable = new YAHOO.widget.DataTable('grdNews', grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs);
grdNewsDataTable.on('initEvent', function () {
YAHOO.util.Dom.setStyle(grdNewsDataTable.getTableEl(), 'width', '100%');
});
});
</script>
Not sure what I am doing wrong, but here is my action method that returns my data:
public ActionResult JsonList()
{
JsonEncapsulatorDto<News> data = new JsonEncapsulatorDto<News>
{
DataResultSet = newsService.FindAll()
};
return Json(data, JsonRequestBehavior.AllowGet);
}
I put a breakpoint on the return Json... line to see if this action method is hit. When the page loads the first time it goes to the break, I hit F5 then it runs and displays the view with the populated grid. When I refresh my browser by pressing F5 then my breakpoint is not hit again, I'm not sure why, it never goes in here again.
How is data loaded into the grid? If I have 100 records in the table and I have set my rowsPerPage to 20 then I will have 5 pages. Given my code above, is data loaded all at once, meaning is all 100 rows loaded at once? I would preferably like to have it loaded in "chunks" instead of having it all loaded at once. In another table I have much more records and this will not be a wise design approach to load everything at once. How would I implement something like this?
I am trying to style certain table headers and cells in the data table. I worked through this article explaining how to style a data table: http://www.satyam.com.ar/yui/widgetstyles.html. When I set the td to right align then the th for that column is also right aligned, why is this? You can see above how I set the className property. Here is my stylesheet code:
.yui-skin-sam .yui-dt td.align_left{text-align:left}
Given the above scenario, I want the column header to be left aligned and the corresponding column rows to right aligned? I probably won’t use it like this, but just want to know how to set a style to different elements?
I set the data table's width to be 100%, but when I page to the next page then it seems to loose this width of 100%. Why is this? What I need to do to have my data table to keep my width of 100%?
If I were to update data then it does not display as updated. Why is this and what do I need to do get the updated data to display in the data table?
You have configured your YUI grid to use an AJAX request to fetch the remote data:
grdNewsDataSource = YAHOO.util.DataSource('#Url.RouteUrl(Url.NewsJsonList())');
GET AJAX requests could be cached by the browser which explains why your controller action is hit only once (the first time you load the page). In order to avoid this caching you could either configure YUI to use a POST request or append a random number to the URL each time the page is loaded.
How is data loaded into the grid? If I have 100 records in the table and I have set my rowsPerPage to 20 then I will have 5 pages.
No matter what you set on the client side the following:
DataResultSet = newsService.FindAll()
is a clear indication that the server fetches all records from the database and sends all records back to the client and it is the client that retrieves only the necessary records to show which is inefficient.
Ideally the pagination should be done on the server. Here's an example from the documentation. The client sends the startIndex and results parameters to the server so that it could paginate the data set on the server and return only the necessary rows that will be shown on the screen.
I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.
I've implemented a country select tooltip dialog which works fine like so:
dojo.provide("CountrySelector");
dojo.declare(
"CountrySelector",
[dijit.form.DropDownButton],
{
label: 'Countries',
dropDown: new dijit.TooltipDialog({ execute: function() {
console.log("EXECUTE : ", arguments[0]);
this.value = arguments[0].country;
}, href:'/cm/ui/countries' }),
postCreate: function() {
this.inherited(arguments);
this.label = this.value;
dojo.connect(this.dropDown, 'onClose', function() { console.log('close'); });
console.log("CountrySelect post create", this);
},
}
);
And the grid cell is typed as:
{ name: 'Countries', field: 'targeting.countries', editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector },
All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.
Any ideas?
Thanks,
Harel
//Layout:
gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}
//Grid Store:
this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});
//
var setOptions = function(items, request){
this.gridLayout.rows[0].options.push('Val 1','Val 2');
this.gridLayout.rows[0].values.push('1','2');
dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange");
}
this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});
_onComboChange: function (selectedOption) {
console.info("_onComboChange: ",selectedOption);
},
// If you need to populate combos with different values you can use onItem
var getArray = function(item, request){
// populate one by one
// attach an event to each combo
}
this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});
This is what i used to update my grid
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
More detail
every row is identified by its identifier
yourGrid.store.fetchItemByIdentity({
identity: <yourIdentity>,
onItem: function(item){
// Update your attributes in the store depending on the server response
// yourGrid.store.setValue(item, <attribute>,<value>);
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
}
});
I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.
Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.