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
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!
How do I disable selection for the default grouping header? My grid has selectable: 'multiple' and grouping is set to false (i don't want to user to group, but i want to specify the grouping myself). This means the grouping header is also selectable. How do i make the grouping header row be not selectable?
You can simply state what the default grouping should be in the dataSource property of the Kendo grid:
dataSource: {
...
group: {
field: 'NameOfFieldYouWantToGroup'
}
}
And ensure the groupable attribute is set on the top level grid intialisation:
$("#grid").kendoGrid({
...
groupable: false
});
Here is a Dojo example of predetermined groupings (with the option to remove the grouping removed)
I'm using ExtJs 4 to build out a new web page with a few forms in it, nothing crazy. On this page I have a gridpanel using a checkbox selection model with mode set to 'Single'. Here is my selection model configuration:
Ext.create('Ext.selection.CheckboxModel', {
mode: 'Single',
checkOnly: true,
showHeaderCheckbox: false
/*listeners: {
select: function(model, record, idx) {},
deselect: function(model, record, idx) {}
}*/
});
Functionally speaking, this works absolutely fine. It limits the user to one selection in the gridpanel in which is it being used. However, in my requirements this field is defined as a radio button (which makes sense since in basic HTML this would be the input type used for a single selection, not a checkbox).
Is there configuration setting I could add to the selection model to make the field display as radio buttons instead of checkboxes? Alternatively, is there a CSS update I could make to show the field as a radio button?
Absolutely you can achieve with CSS.
You can find that the default image is coming from build/production/{app name}/resources/images/form/checkbox.png.
Inside extjs:
{
xtype: 'grid',
cls: 'checkbox-overwrite',
selModel:{
selType: 'checkboxmodel',
mode: 'SINGLE'
}
...
}
Inside CSS
.checkbox-overwrite .x-grid-row-checker,
.checkbox-overwrite .x-column-header-checkbox .x-column-header-text {
background-image: url(from your css file path to build/production/{app name}/resources/images/form/radio.png);
}
Sometimes, the path from your css file to the resource may not be stable or not convenience to define it. I suggest you just go to the folder find the radio.png and save it to your application's defaults images folder. Then it will be much easier to work with the path inside CSS.
You can use the radiobutton
see the difference there is only one change if you change the defaultTYpe to radiogroup thats it remaining things are same
docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Radio
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).
I want to set viewrecords property of jqgrid dynamically. By default this property is set as false. I want to set this to true or false (sometimes to show and at times not to show the recordText at the table footer) depending upon the data that I am populating in the grid dynamicaly. I tried with the following but with no avail-
jQuery("#gridID").jqGrid({viewrecords : true});
jQuery("#gridID").setGridParam({viewrecords : true});
I recommend you to use viewrecords: true and just hide the div.ui-paging-info inside of loadComplete depend from the current number of records. For example
loadComplete: function (data) {
if (parseInt(data.records, 10) > 10) {
$("#pager div.ui-paging-info").show();
} else {
$("#pager div.ui-paging-info").hide();
}
}
The demo demonstrate the approach. If you open on the demo the searching dialog and filter for the client data equal to test you will see only one record and the viewrecords field will be not visible:
Clicking on the "Reload Grid" navigator button will follow to show the viewrecords field back.