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.
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.
The following fiddle is using jaydata and kendoui grid MVVM. The data loads nicely but filtering does not work. Why?
Will kendoui and jaydata combination be able to use the kendoui grid grouping functionality any time soon?
http://jsfiddle.net/t316/4n62B/9/
<div id="airportGrid" data-kendo-role="grid" data-kendo-sortable="true" data-kendo-pageable="true" data-kendo-page-size="25" data-kendo-editable="true" data-kendo-filterable="true" data-kendo-columns='["id", "Abbrev", "Name"]' data-kendo-bind="source: airports"></div>
kendo.ns = "kendo-";
$data.service("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/", function (factory, type) {
var airportDB = factory();
var vm = {airports:airportDB.Airport.asKendoDataSource()};
kendo.bind($('#airportGrid'),vm);
});
Filtering should work, please provide more info. First of all, you should either use initService or use onReady().
Also, please check the network traffic and paste the relevant part here.
If you see our examples with kendo then you can see filtering in action.
http://jaydata.org/examples/?tags=KendoUI
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
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.
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.