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.
Related
I am working on a Drupal project which is using the Editable fields module.
Using that module I'm exposing a dropdown list of text options. It works just great. You click on the list, select an option and the option is updated via Ajax.
My challenge is I'm trying to change the options programmatically via jQuery. Using the following code:
jQuery('select#edit-field-status-0-field-status-und').val(1);
... my browser console area is happy with the code but the Ajax update does not take place.
I tried:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
Again no errors but the Ajax event still did not execute.
$('#edit-field-status-0-field-status-und').val("1");
will do the trick, as the only reason it wouldn't work would be that you have your select values as strings instead of numbers.
Alternatively the following is more detailed:
$('#edit-field-status-0-field-status-und option').eq(1).prop('selected', true);
Also this is not an 'AJAX' function, it's simply Jquery updating the DOM for the particular element.
The code I was using as recreated below was correct:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
I found out the reason why it wasn't working was because the ID of the target element changed dynamically.
So when I first inspected and found edit-field-status-0-field-status-und, the same element would change IDs to something like edit-field-status-0-field-status-und--1.
That was throwing things off and gave the impression my code wasn't working.
Thanks to #gts for your input.
I am creating a directive that is using this timezone picker jQuery plugin, so that we have a timezone picker "widget" throughout our app. The problem I'm running into is that when you select a timezone, it just changes the value of the select elements. So, the element has the right value, but my model does not. I was thinking I just had to throw a scope.$apply() in there, but after a while, I realized that is for updating the view from a model that changed outside of angular. My problem is the opposite. How to I update my model from my view that has changed outside of angular? Here's a simple fiddle that illustrates the problem: http://jsfiddle.net/tWzwA/
I'm thinking the ngModelController could help me here, but I don't know how I would get access to it, and what exactly I would do with it. Can someone please point me in the right direction? Thanks.
You should define the update function on your controller:
$scope.updateDropDownDirectly = function(value){
$scope.myModel = value;
};
Then change the events from onclick to ng-click and let angular manage them:
<button ng-click="updateDropDownDirectly(1)">1</button>
See this jsFiddle
I have:
1.) What should I type in this.control() for getting the reference to the grid panel?
My plan is, when user double clicks one row, new tab is created. I already have code for creating new tabs but I just need to get reference to the grid panel.
Something like this:
'viewport > westpanel > accordion > gridpanel': {
doubleclick: function...
}
2.) Let's say that I gave an ID to the grid panel. How can I get reference in this.control using .get method?
3.) How can I be sure that I've got the right reference? Can I console.log() - it or something like that?
I would know how to do this without MVC but here I need help. :)
Thank you! :)
It is quite easy once you understand how to use it. First you should read the API about the ComponentQuery cause that is what is used within the control.
this depends on your components. You so can go by the xtype 'panel > grid': {itemdblclick:this.yourCallback}
the recommend way if you can't define a really unique path by xtypes '#myID': {itemdblclick:this.yourCallback} using defined refs within the control is not possible in the currently release, as far as I know.
Use Id's instead of just xtypes '#myID > grid': {itemdblclick:this.yourCallback} or define additional params '#myID > grid[customProp=identString]': {itemdblclick:this.yourCallback}
I'm using grid.onBeforeEditCell event to make a one-click YesNoCheckboxCellEditor.
Not sure if this is the best way to do this, but here is the code I created for this:
Slickgrid - One-click checkboxes?
This works fine, but setting the data[] array directly doesn't seem to effect the dataView().
My understanding is that the dataView and data are completely uncoupled, and so when I have a filtered view, my data behind the filtered viewport will be incorrect.
Based on my code snippet, how do I also update the corresponding cell in the dataView ?
(I found the dataView.getItembyId and dataView.updateItem methods but unsure how to use these)
I've also tried: dataView.refresh(), grid.invalidateRow(), grid.render()
BTW, I'm following this example: http://mleibman.github.com/SlickGrid/examples/example-header-row.html
Use the grid.onClick instead of onBeforeEditCell.
See the http://mleibman.github.com/SlickGrid/examples/example7-events.html example.
I have a view with a Telerik MVC grid. The grid uses ajax to select the data from the server. However when i use firebug to check the performance of it, it says thats its accessing the following url to get data:
http://localhost:61094/Grid/_BigGridBinding?Test-size=20
It gets the data correctly (no problem), but it looks very bad to have a Test-size 20 attached to it. I have tried to change my routes since its most likly a routing problem, but with no succcess. Anyone got any idea of how to change the route to get rid of this Test-size 20 and instead add it like /_BigGridBinding/20 (or similar).
The method signature that the grid is calling looks like this:
[GridAction(EnableCustomBinding = true)]
public ActionResult _BigGridBinding(GridCommand command)
I am using MVC 3 and the newest Telerik Controls.
The post URL is automatically built by the Telerik grid, so I'm not sure there is any way to get rid of the Test-size parameter. Routes take a given URL and extract the parts of the URL and map them to appropriate controller actions and parameters, so I don't think changing the routes will have any effect (since the URL is already built by the time the routing engine processes it).
That said, the query string parameter is constructed using the name of the grid. In your case, Test is the name of the grid, so the parameter is Test-size=20. So if that is what your concerned with, you can rename the grid to something more appropriate and the query string parameter will be named accordingly. For example, renaming the grid to BigGrid will result in a parameter BigGrid-size=20.