I have a trouble at my grid when I load state.
The paging bar is being broken whenever I do this.
to understand please take a glance through this example: http://dojo.telerik.com/#doktoresperanto/oJiVu
You also need to pass the data source aggregates because the footer template depends on them (your demo has an "undefined" error because of missing aggregates). Here is how:
grid.dataSource.query({"page":3,"pageSize":7, aggregate: grid.dataSource.aggregate() });
And a live demo: http://dojo.telerik.com/#korchev/oDoPE
Related
I have a very big handsontable. I have dropdown columns defined, but, the values for the sources are retrieved with AJAX.
How can I set the "source" property of a "column" of type "dropdown" dynamically?
Regards!
You can, and should, use:
hotInstance.updateSettings({
columns: getNewColumns()
})
Where getNewColumns() would return an array of columns with the data and new source (or make the AJAX call from in here). That should do it!
Thank you for the answer ZekeDroid.
I was able to solve my issue.
First lets talk about a problem in the angular directive:
I am using the handsontable's angular directive. Two things happen: 1. If I associated the datarows attribute to a nested variale in the model, for example $scope.hot.data, then when I change the value of the model ( $scope.hot.data ) the grid ui is not refreshed. I am pretty sure this is an issue with the directive. Now: 2. Assume I use $scope.data and I update its value (this is the model right), then the grid ui is not refreshed either. I have to do something like hotInstance.updateSettings({data: newData}) as well.
I have to do both things; that is, update the model and call the update settings method. This is the only way I could get it work properly.
Note: if I do $scope.$apply() instead the updateSettings, I get an error in the console.
I am using Sencha ExtJs grid 4.2 . I am using a Expander plugins for my grid and try to load data under expanded region from Ajax. Right now I am using this code to show data on expanding.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
' <p><b>{fname}, {lname}</b></p>',
'<br> {accordian_view}'
)
}],
Here you can see that data is pre populated, but my requirement is to load data on expanding. I am trying hard to find the event or process to do it. But still no luck. If anyone have any idea please share.
Thanks in Advance
You might check out the expandbody event on the RowExpander plugin: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody
This event passes not only the row's bound record, but also the expanded element, so you could:
Request data via Ext.Ajax.request({...})
Handle response
Add content to expanded row
One thing to keep in mind, however, is the async nature of this approach. That is, the row is going to expand immediately, regardless of how long the subsequent request takes to come back. So it would probably be a good idea to do something like this instead when handling the expandbody event:
Add "loading" text/icon/whatever into expanded row area
Make Ajax request
Handle response
Replace loading text/icon/whatever with the data returned from the Ajax request
It's likely someone has already done so, but you could also (and I would highly suggest it) wrap this process into a custom plugin of your own that extends the RowPlugin. That way you could use it elsewhere in your app for any grid. If you end up creating a custom plugin, please share it with the community!
EDIT: A quick Google revealed a number of custom plugins that do precisely this. For example: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js
I have some php scripts which esentially take a long time to retrieve data. As a result this impacts highcharts loading times as the current code I have only writes the chart once all the data is retrieved as the highcharts code is only echoed once all processing is complete.
This causes the page to basically show nothing until the data is retrieved. The goal is to have the highcharts load immedietly and then write to the series with the data returned by the php scripts.
So, what I'm looking to to is have all the graphs load immedietly and display 'loading' with no data and then use setData to pass in the data to the graph series once the php scripts have completed.
I'm just wondering if anyone had any examples of this being done? Another problem I'm having is only being able to set the data within the $(document).ready(function() function. e.g.
works:
http://preview.tinyurl.com/b724bxo
breaks:
http://preview.tinyurl.com/a7mqqkc
Many thanks and any help would be greatly appriciated.
Don't know if you're still looking for this, but to display a "loading" message, you can use the "setLoading()" method on the chart.
pipeline_by_sales_stage_highchart.setLoading("Loading...")
Check this fiddle: http://jsfiddle.net/QSfEJ/
You can't access variable out of scope, move that into that scope, or make variable global.
http://jsfiddle.net/M2jv7/33/ -inside scope
http://jsfiddle.net/M2jv7/34/ -global variable
var pipeline_by_sales_stage_highchart;
$(document).ready(function () {
pipeline_by_sales_stage_highchart = new Highcharts.Chart({
});
...
// somewhere:
pipeline_by_sales_stage_highchart.series[0].setData(data);
See my answer here: Highchart series update in javascript
Summary :
Initialise chart with empty series, then use addSeries in a loop to update chart, like this:
this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
this.chart.addSeries(serie, false); // false is to prevent redrawing
}.bind(this));
this.chart.redraw(); // manually redraw
this.chart.hideLoading(); // stop loading if showLoading() was call before
jsFiddle here: https://jsfiddle.net/qyh81spb/
I have google chart on my page, but right now chart is drawn when Google Visualization library is loaded on the page load, and I have to give data dynamically through ajax, so is it possible to change the callback method, or is there any alternative?
I managed with it as i wanted, It can be helpful for someone, and if there is better solution for this please do suggest.
I removed this setOnLoadCallback function - google.setOnLoadCallback(drawChart);
This call back will call the drawChart() as soon as the visulization library is loaded,
(but I didn't wanted it, i wanted to call it on button click).
so I called drawChart(); function directily in the button click function code.
Then I faced problem with rendering the dynamic data to the datatable, when I was putting hard coded values, the chart drawn fine, but as I put variables instead of those values, it was unable to generate chart.
so i parsed the variable into integer by parseInt(doc_pre),
And it worked fine.
You can check this :
Jquery Charts
Summary
I am using jQuery to clone a div ("boxCollection") containing groups ("groupBox") each of which contains a set of inputs. The inputs have change events tied to them at $(document).ready, but the inputs inside the cloned divs do not respond to the event triggers. I can not get this to work in IE7, IE8, or FF3.
Here is my sample code:
HTML:
<div class="boxCollection"><div class="groupBox" id="group_1"><input type="text"></input></div></div>
jQuery events:
$(".groupBox[id*='group']").change(function(){
index = $(this).attr("id").substring(6);
if($("input[name='collection_"+index+"']").val() == "")
{
$("input[name='collection_"+index+"']").val("Untitled Collection "+index);
}
});
jQuery clone statement:
$(".boxCollection:last").clone(true).insertAfter($(".boxCollection:last"));
Use live() to automatically put event handlers on dynamically created elements:
$(".groupBox[id*='group']").live("change", function() {
...
});
You appear to be putting a change() event handler on a <div> however (based on your sample HTML). Also, I would recommend not using an attribute selector for this. You've given it a class so instead do:
$("div.groupBox ...")...
Lastly, you are trying to give each text input a unique name. You don't say what your serverside technology is but many (most?) will handle this better than that. In PHP for example you can do:
And $_POST will contain an element "box" with an array of three values.
I'm not sure if this will work, but I'm going to give it a shot and say that you need to assign live events
$(".groupBox[id*='group']").live('change', function() { });
You'll probably have a problem with change and live in IE6/7, so I advise you to use the livequery plugin to resolve that issue.