I would like to be able to programmatically select something from a dropdown, as in http://select2.github.io/select2/#programmatic. But the dropdown also seems to be generated (I didn't include it anywhere in the HTML) by the filterformatter widget, which I initialized with:
$('#client_table').tablesorter({
theme: "blue",
headers: {1: {sorter: 'types'}},
widgets: ["filter", "zebra"],
widgetOptions : {
filter_formatter: {
1 : function ($cell, indx) {
return $.tablesorter.filterFormatter.select2($cell, indx, {
closeOnSelect: false,
placeholder: "Select events",
allowClear: true,
match: false, // exact match only
});
},
What element do I call select2 on in this case? What are the values/data that I should be using (the thing I would like to select, for example, is the string APP_STATE).
When select2 is applied to the table, the table cell gets a class name of select2col0 where (0 is the column zero-based index).
If you open this demo and enter the following code in the console, it'll programmically set the value:
$('.select2col0').find('input').select2('val', ['abc']);
Related
To get the current datasource filter with Kendo UI for jQuery, you can call dataSource.filter()
I can't seem to find the equivalent for the Vue.js version. I've created an example here. The filter is currently set on the 'ProductName' column to show results that start with 'c' via:
filterConfiguration: { field: "ProductName", operator: "startswith", value: "c" },
You can see this in the console by clicking the Log Filter button which logs out the value of:
this.$refs.localDataSource.filter
If you change the filter by clicking on the column header and changing 'c' to 'ch' you'll notice if you log the filter again, it does not change.
There is also no filter() function on the data source. Is there a way to get the currently applied filter?
I figured it out. You have to assign the filter object like this:
filterConfiguration: {
logic: "or",
filters: [
{ field: "ProductName", operator: "startswith", value: "c" }
]
}
Or if you don't want to load the grid with any preset filters, you need at least this:
filterConfiguration: {
filters: []
}
This will not work:
filterConfiguration: {}
I am using jQrid version 3.8.1 and I have a grid that displays information about cars. The jQgrid should is set up to display one car per row and one of the columns is a multi-select list that displays which types of seats the car is configured with. A car can have multiple seat types.
When the user edits a car row, it makes an ajax query to get all of the seats types available in the system and sticks them in the multi-select list. In addition to populating the list, it needs to also select the options already chosen for that car.
The values inside the Installed Seats column are not simple strings. They have both an ID and a string value. So the ID for "Wire mesh" might be 2883 and the value for "Composite" might be 29991. They are just unique numeric values (basically the primary key from the table they are stored in).
After the multi-select list is populated with all the appropriate Seat values, I need to select the ones that the car currently has installed (in the picture above it's "Steel" and "Wire frame"). I need to do this based on the seat IDs stored for that car. However, I don't know where these value are going to come from. The grid only stores the names for the seats, not the IDs. Hopefully there is a way to make it store both.
The column model looks like this:
colModel: [
{ name: 'Year', index: 'Year', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Make', index: 'Make', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Body', index: 'Body', editable: true, edittype: "select", editoptions: { multiple: true } },
{ name: 'Seats', index: 'Seats', editable: true, edittype: "select", editoptions: { multiple: true }, cellattr='is-seat-list="1"' }
]
Notice that the 'Seats' model has a cell attribute called is-seat-list. I'm using this to find the select box in the row inside the 'editRow' function.
The onSelectRow handler looks like this:
onSelectRow: function (index) {
var curValues = $('#cargrid').getRowData(index);
jQuery('#cargrid').jqGrid('editRow', index, true, function(rowId) {
//when the user edits the row, query for all the seat types and fill in the list
jQuery.ajax({
url: '/getalltheseats',
complete: function (allSeats, stat) {
var list = $('#cargrid').find('tr[id="' + rowId + '"] td[is-seat-list="1"] select');
var $list = $(list);
//add the all seat types to the list, checking the ones that this car currently has selected
_.each(allSeats, function(seat) {
var selected = '';
if(curValues['Seats'].indexOf(seat.ID) !== -1) //<-- what do I do here??
selected = 'selected';
$list.append($('<option ' + selected + '></option>').attr('value', seat.ID).text(seat.Name));
});
});
});
});
},
The important line is
if(curValues['Seats'].indexOf(seat.ID) !== -1)
I have the value of the row but it only contains the seat name, not the ID. The data returned from the ajax call contains each seat name and ID but the <option> elements don't contain the ID value so I don't know which ones to select in the list.
So the question is, what's the best way to make jqGrid store both the seat names and IDs so that when I create the list dynamically, I can check the <option>s for the seats that have been chosen for that car.
Note:
For various reasons the standard dataUrl and buildSelect features of jqGrid are not going to work for me, which is why I'm building the list on the fly in this manner.
First of all you need additionally add formatter: "select" and to populate ID values in Seats column during filling of the grid. The formatter: "select" will decode the IDs and the corresponding Name value will be displayed to the user.
If you would use more recent version of jqGrid the you can use beforeProcessing callback created for the purpose. It allows to include all different ID/Name pairs in the server response for filling of the grid. It allows you to fill the information needed for the formatter: "select" directly in the main server response. You don't need to load the information before creating the grid.
If you use retro version of jqGrid (3.8.1) then I hope that you can still use the following trick. You can define userdata part of the server response defined as function. The outer elements of the server response root, page, total, records and userdata will be processed before the processing the main part with all items. It allows you to modify editoptions.value before it will be processed by formatter: "select".
For example the response from the server can looks like
{
"page": 1,
"total": 20,
"records": 400,
"userdata": {
"seats": "29991:Composite;42713:Nappa leather;6421:Steel;2883:Wire mesh"
},
"rows": [
{
"year": 2007,
"model": "Toyota/Camry",
"body": "Sedan",
"seats": "29991,6421"
},
{
"year": 2057,
"model": "BMW/Series 4",
"body": "Sedan",
"seats": "6421,2883"
}
]
}
Inside of jsonReader you can define userdata which set userdata.seats as value of editoptions. You can use setColProp method for example to do this.
In the way you will be able to implement all your requirements.
Very easy case displayed here: http://jsbin.com/ahoYoPi/3/edit
I need to specify that the child's inner field to filter (eq) against the parent's value field is "category_id"... Of course, Kendo's documentation doesn't say anything about how to do that... Or is it something so super obvious it doesn't deserve to be explained ?
var categoriesList = new Array (
{"id":"1","categoryName":"Fruits"},
{"id":"2","categoryName":"Vegetables"} );
var productsList = new Array(
{"id":"1","categorie_id":"1","productName":"Apples"},
{"id":"2","categorie_id":"1","productName":"Oranges"},
{"id":"3","categorie_id":"2","productName":"Carottes"},
{"id":"4","categorie_id":"2","productName":"Patatoes"});
$("#categories").kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "id",
dataSource: categoriesList,
optionLabel: "----------------" ,
change: function() {
$("#products").data("kendoDropDownList").value(0);
}
});
$("#products").kendoDropDownList({
cascadeFrom: "categories",
dataTextField: "productName",
dataValueField: "id",
dataSource: productsList,
optionLabel: "----------------" ,
});
The documentation about cascading is available here: http://docs.kendoui.com/getting-started/web/combobox/cascading
Here is how filtering works:
If the parent has a value, then the child will be enabled and will
filter its data depending on it. Here how the filter options will look
like:
field: "parentID", //the dataValueField of the parent
operator: "eq",
value: "" //parent's value
This means that the child dropdownlist (combobox) will use the field configured via dataValueField of the parent to do the filtering (cascading). In your case this doesn't work because dataValueField of the parent is set to "id". This field however serves a different purpose in the productsList array.
Currently there is no feature which allows one to specify the field used for cascading.
You have two options:
Do what #OnaBai suggested. Rename the "id" field of the categoriesList to "categorie_id" and set dataValueField accordingly.
Implement cascading manually. First remove the cascadeFrom option and then do this in the change event of the parent:
change: function() {
var products = $("#products").data("kendoDropDownList");
products.dataSource.filter( {
field: "categorie_id",
value: this.value(),
operator: "eq"
});
products.value(0);
}
Here is a live demo: http://jsbin.com/ogEj/1/edit
I have a column with Actions which contains icons. One of the icon ( second icon) is tied to qtip. So when I hover over it shows the empty div which looks bad. It is jqGrid's hover over element value. But as in actions i do not have any value it shows blank.
What i can do to disable it for that particular column ?
In your colModel options, you can specify title:false like this:
colModel: [
{ name: "Actions", title: false },
{ name: "Type", index: "Type" },
{ name: "ReceiptLoc", index: "ReceiptLoc" }
],
That empty little box you are seeing is the tooltip copy of text in the cell. Your Action column has no bound values in the cell, that is why it is empty.
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},