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.
Related
I'm using Carousel View by alexrainman for creating custom wizard.
I need to get index of specific page by its type (I don't know exactly which index would that page have).
Something like this:
var indexAdvanced = MyCarouselView.GetIndex<ContentView>(typeof(AdditionalDefectParametersContentView));
but of course, this code doesn't work. While creating this question, I've got an idea with using CarouselView's ItemsSource. How to do it properly? TIA.
By the way, I've already found an answer. >_<
The resulting code is:
// My CarouselView consists of ContentViews
_indexAdvanced = MyCarouselView.ItemsSource.Cast<ContentView>().
IndexOf(view => view is AdditionalDefectParametersContentView);
So it works!
Don't know what should I do: delete this question or leave? Maybe It would be useful for somebody, so I'll leave it for now.
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 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 using Select2 plugin in JQgrid to auto complete the Drop down box.I used this example to work through.
Using bootstrap select2 with JqGrid form
I created a fiddle with the above example.
http://jsfiddle.net/VTL4x/3/
The data for the select2 is fed from JSON but I am not able to replicate it in JSfiddle so I have commented out the and used hard coded values.
The Json string is
[{"value":"Windows","id":"134"},
{"value":"Win2008","id":"135"},
{"value":"Win2003","id":"136"},
{"value":"AIX","id":"150"},
{"value":"Linux","id":"151"},
{"value":"Unknown","id":"152"},
{"value":"i5OS","id":"153"},
{"value":"z/OS","id":"154"},
{"value":"Solaris","id":"155"},
{"value":"Sun Ultra 80 ","id":"156"},
{"value":"VAX","id":"157"}]
The problem is When I try to edit the record it does NOT show the values for the fields that have Select2 dropdown box. but when you expend I could see that correct values highlighted in blue.
I tried to debug the demo that was provided but that also had the same problem.
I am fairly new to front-end programming can you please help.
Thanks for your help
Which version of select2 you're using? I'm using v4 so your data should look like this:
var mySelectData = [{"text":"Windows","id":"134"},
{"text":"Win2008","id":"135"},
{"text":"Win2003","id":"136"},
{"text":"AIX","id":"150"},
{"text":"Linux","id":"151"},
{"text":"Unknown","id":"152"},
{"text":"i5OS","id":"153"},
{"text":"z/OS","id":"154"},
{"text":"Solaris","id":"155"},
{"text":"Sun Ultra 80 ","id":"156"},
{"text":"VAX","id":"157"}];
Use text instead of value.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.