I want to add multiple check boxes to a column on edit/add mode. Now this column has a select box with multiple option enabled. I want to replace it with checkbox list or radio button list
My idea is: user should be able to select the relevant options as he desired by checking the check boxes which are listed in a particular cell(on add or edit mode:inline). Once the row is saved should show only the selected option user selected(without check boxes).
Below is my code snippet for the select box for particular column:
{
name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
editoptions: {
value: roomTypesFormatterEdit,
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
},
align: 'left', formatter: roomTypesFormatter
},
Where "roomTypesFormatterEdit" return list of hotel room names which will display in select box.
Also I want to re-arrange the height of the editing(edit mode) row to fit with the height of the check boxes or to show all the items in the select box
Please Help
Thank you all
I think that you don't need to write your custom editing control (custom_element and custom_value) or custom formatter (formatter and unformat). Instead of that you need just add multiple: true property to editoptions to have base multiselect functionality. To improve visibility you can use some existing controls like jQuery UI MultiSelect Widget or Select2. The answer and this one provide demos which uses jQuery UI MultiSelect Widget. One more answer and this one provide demos which use Select2. The demos don't use multiselect functionality of Select2, but it's just an option of the control (see the documentation).
Related
I am trying to implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!
I am trying to create a multi checkbox filter on a column of the kendo grid with serversidefiltering set to true. In the multiselect-checkbox filter, I want to default the selection to some value. I am trying to achieve these 2 scenarios given below:
1) I would still want the multiSelect filter to show me all the values for that field and only have the default selections checked.
2) Also, have the data on the grid column filtered down to the checkbox checked in the multi-checkbox filter.
I have tried the following and I am mostly getting close to achieving either 1) or 2). But I am trying to get both of them working together.
Here's a link to the demo for 1)
With the above, I could get to only have the default checkbox checked, but the grid data on load does not show the filtered data, it shows everything.
For 2) I tried the following
Filter: [{
field: "ProductName", operator: "eq", value: "Chai"
}],
This above code filters the data on the grid correctly, but For the menu filter, the checkbox list is also narrowed down to contain only the list of filtered items sent by the server. (looking for a solution to narrow down the data in grid, but show all options in the checkbox filter).
Is there a way I could get both these requirements work together on a multi-checkbox filter with ServerSide filtering?
Any idea to resolve this issue is highly appreciated.
Thank you in advance!
When serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets. It means, that you will have to implement method at your server which will return list of items to be displayed in filter.
columns: [
{
field: "FirstName",
filterable: {
multi: true,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
},
Here is a working demo.
Here is a link to Telerik's demo.
I am trying to append items to a multi-select with checkboxes. The list is prepared but with no checkboxes. this is the scenario
I have several category lists like dairy, vegetables and so on. Selected items from these lists are stored in an array. To get confirmation from the user, the selected items are displayed in another list that needs to be created dynamically similar to the one below. However, the list is prepared as in the second image.
This is the code
$.each(arr1, function(index, value){
$("#mySelect").append($("<option>",{
value: value,
text: value
}));
});
$('mySelect').multipleSelect({
isOpen: true,
keepOpen: true
});
Select with check boxes
multi select
This is a guess, I've never used multi-select. But if you wait to instantiate the plugin until the content is there it may work.
$.each(arr1, function(index, value){
$("#mySelect").append($("<option>",{
value: value,
text: value
}));
if (index == arr1.length-1) {
$('mySelect').multipleSelect({
isOpen: true,
keepOpen: true
});
}
});
I have a checkbox selection model that I am using on a gridpanel. I have configured the CheckboxModel like so:
Ext.create('Ext.selection.CheckboxModel', {
mode: 'Single',
checkOnly: true,
showHeaderCheckbox: false
});
This configuration allows the user to select only one record from the gridpanel. I have removed the checkbox in the header since I want the user to have to explicitly check the box in the record row. Now I have just a blank header in that column....is there any way to add text to that header column? From what I can tell it seems like my only options are to either leave the checkbox in the header or remove it and have a blank column header...is that correct?
You can override the getHeaderConfig method of the CheckboxModel, like:
Ext.define('Fiddle.override.selection.CheckboxModel', {
override: 'Ext.selection.CheckboxModel',
getHeaderConfig: function() {
return Ext.apply(this.callParent(arguments), {
width: 100,
header: 'Select'
});
},
});
Working example: https://fiddle.sencha.com/#fiddle/1b3g
I have a jqgrid table that has a username and password column, and if I could add automatic selection of a cell's entire contents when the cell is clicked, that would be of great benefit to those who use the table for their work.
Here is what I have so far:
$("#theTable").jqGrid({
[...]
colNames:[[...],'Username', 'Password',[...],
colModel:[
[...]
{name: 'username', index: 'username', width: 110, sorttype: 'text', cellattr: function () {return 'class="selectcell"'}},
{name: 'password', index: 'password', width: 110, sorttype: 'text', cellattr: function () {return 'class="selectcell"'}},
[...]
],
});
Then later on...
$(".selectcell").click(function(){
this.select();
});
I took that $.click() from code that automatically selects an entire textbox whenever it is clicked on. It functions perfectly there, but it isn't working as is. How can I make this work?
It seems that you don't use any editing of the grid. You can add cellEdit: true in the situation. The option allowed to edit cells of columns which have editing: true property. Cell editing have one more important feature. It highlight the cell of all non-editable columns. Because all columns are not editable in your case then you will have the feature highlighting of cells just by adding cellEdit: true option.
If you do need to select the text in the cell then I would recommend you to read the old answer (see the demo) which demonstrates how to select the text inside of clicked cell on double-click.