I have built component like below. Where i want to just display check box to user and when user double clicks the row, checkbox become editable. clicking the checkbox works fine, but when user unticks the checkbox render function check box does not get updates, it remains checked. How do i solve this issue? Any other way to simplify this requirement.
Ext.define('Abc.view.component.grid.RfColumn', {
extend: "Ext.grid.column.Column",
text: 'Rv.',
width: 40,
dataIndex: 'RF',
xtype: 'rFColumnGrid',
renderer: function(value) {
return "<input class='gridCheckbox' type='checkbox'" + ((value == 'Y') ? "checked='checked'" : "") + " disabled='disabled'>";
},
editor: {
xtype: 'checkboxEditor'
}
});
Ext.define('Abc.view.component.editor.CheckboxEditor', {
extend: 'Ext.form.field.Checkbox',
xtype: 'checkboxEditor',
inputValue : 'Y',
uncheckedValue: 'N'
});
inputValue and uncheckedValue don't change what is returned by getValue(). Those are for form submissions. You can remove them and change your renderer to look for true/false.
renderer: function(value) {
return "<input class='gridCheckbox' type='checkbox'" + ((value == true) ? "checked='checked'" : "") + " disabled='disabled'>";
},
Related
I'm trying to integrate select2 for JqGrid filter form. I'm using JqGrid min 4.6 & Select2 min 4.0.1. The filter works fine but I'm unable to retrieve the value that has been set through select2 once the filter form is closed and reopened. i.e. dataInit e1 does not return the existing value of the select input. I must be doing something wrong?
JqGrid Column Model:
{
name: 'CurrencyID', hidden: true, search: true, stype: 'select', searchtype: 'number', searchoptions: {
searchhidden: true,
sopt: ['eq', 'ne'],
dataInit: function (el) {
intiGridFilterSelecr2Field(el, paramFromView.CurrencyOptions);
}
},
searchrules: { required: true }
},
Parameters:
#section scripts{
<script>
var paramFromView = {
CurrencyOptions: {
searchURL: '#Url.Action("GetCurrency", "Controller")',
detailURL: '#Url.Action("CurrencyDetailsJson", "Controller")',
idField: 'CurrencyID',
txtField: 'Description'
}
};
</script>
}
Select2 Helper:
function intiGridFilterSelecr2Field(element, options) {
var comboPageSize = 15;
var quietMillis = 200;
var placeHolderText = 'Choose...'
var defaults = {
searchURL: '',
detailURL: '',
idField: '',
txtField: ''
};
var options = $.extend({}, defaults, options);
var select2Element = $(element);
select2Element.select2({
width: 'element',
minimumInputLength: 1,
placeholder: placeHolderText,
ajax: {
url: options.searchURL,
dataType: 'json',
quietMillis: quietMillis,
cache: false,
data: function (params) {
return {
name: params.term,
page: params.page,
pageSize: comboPageSize
};
},
processResults: function (data) {
var more = (data.page * comboPageSize) < data.total;
var resultsArr = [];
for (var i = 0; i < data.result.length; i++) {
resultsArr.push({ id: data.result[i][options.idField], text: data.result[i][options.txtField] });
}
return { results: resultsArr, more: more };
}
},
}).each(function (index, element) {
var idCombo = $(this);
// The problem is that idCombo.val() is always empty.
// element:select2-hidden-accessible
if (idCombo.val() != null && idCombo.val().length > 0) {
$.ajax(options.detailURL, {
data: {
id: idCombo.val()
},
dataType: 'json',
cache: false
}).done(function (data) {
var optselected = select2Element.find('option').filter(function () { return this.value == data[idField] && this.text == data[txtField] && this.selected })
if (optselected == undefined || optselected.length == 0) {
var $optionContact = $("<option selected></option>").val(data[idField].toString()).text(data[txtField]);
var toBeRemoved = select2Element.find('option').filter(function () { return this.value == data[idField] });
if (toBeRemoved != undefined) {
toBeRemoved.remove();
}
select2Element.append($optionContact).trigger('change.select2');
}
});
}
});
}
When the filter is being set...
When Loading the existing filter. How do I pass this CurrencyID = 1 to select2 helper?
Update:
With Oleg's answer, I updated my code as below.
{
name: 'CurrencyID', hidden: true, searchtype: 'number', search: true,
stype: "select", searchoptions: {
searchhidden: true,
sopt: ["eq", "ne"],
dataUrl: paramFromView.CurrencyOptions.searchURL,
buildSelect: function (data) {
var obj = jQuery.parseJSON(data);
var i, options = [];
for (i = 0; i < obj.result.length; i++) {
options.push("<option value='" + obj.result[i][paramFromView.CurrencyOptions.idField] + "'>" +
obj.result[i][paramFromView.CurrencyOptions.txtField] + "</option>");
}
return "<select>" + options.join("") + "</select>";
},
noFilterText: "Any",
selectFilled: function (options) {
setTimeout(function () {
$(options.elem).select2({
width: 'element',
});
}, 0);
}
},
searchrules: { required: true }
},
I'm almost there with what I wanted to achieve. However I'm still facing some difficulties.
When the filter is initially loaded, value is selected on the dropdown but query value is empty. i.e. if the user clicks on the find button soon after the filter form is loaded, no filter will be set.
I still cannot get select2 styles working.
I can demonstrate how to use select2 with free jqGrid fork of jqGrid, which I develop. I get the demo from the README of the old version 4.14.1 (the current released version is 4.15.3) and modified it to demonstrate the usage of select2.
The main part of the code could be
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
...
selectFilled: function (options) {
setTimeout(function () {
$(options.elem).select2({
width: "100%"
});
}, 0);
}
}
See https://jsfiddle.net/Lae6kee7/2/. You can try to choose an option in the filter toolbar in "Shipped via" column and the open the search dialog. You will see that the select2 will have the same option selected.
If you would load the data via Ajax request posted by select2 than your code will be much more complex as it could be. It's important to understand that such way is really required only for really large set of possible value. I means the number of items larger as 100000 items for example. On the other side, the most use cases required less as 1000 options. In the case it would be more effective to load all the data as options of select and then convert the select to select2. select2, which uses local select works much more quickly from the users point of view.
The code will be easier in my opinion if you will use dataUrl instead of ajax option of select2. You can use dataUrl to return from the server all different values, which can be used in select2 and to use buildSelect to build <select> from JSON data returned from the server. The demo https://jsfiddle.net/Lae6kee7/23/ demonstrates that. I made the demo for JSFiddle, which supports Echo service (see here), which allows to simulate server responses. Your real code should contains mostly only dataUrl, buildSelect and the code of selectFilled, which I included above.
Additionally, I'd recommend you to consider to use <datalist> (see here for example), which could be good alternative to select2. All modern web browsers contains native support of <datalist> and thus <datalist> works very quickly. Try to search in the first Client column of my demos. You will see control, which will be very close to select2. Additional advantage of <datalist>: one will be able not search for only exact predefined values like test10, test11 or test12, but for substrings like 1. Compare
with
or
with
Here is a working jsfiddle. I wish to add attributes (in particular id) to the <li> elements created. My use case is slightly different from the fiddle, rather than using an array, I am getting my data from ajax. In addition I want to give my users flexibility to create new tags if the same are not present in database. To save newly created item list having id's is a much better handle than just plain classes. Can I modify the attributes of the <li> elements created?
My actual code is something like this:
$(".js-data-example-ajax").select2({
ajax : {
url : "/content/search_skills",
dataType : 'json',
delay : 250,
data : function(params) {
return {
q : params.term, // search term
page : params.page
};
},
processResults : function(data, params) {
params.page = params.page || 1;
return {
results : data.items,
pagination : {
more : (params.page * 5) < data.total_count
}
};
},
cache : true
},
escapeMarkup : function(markup) {
return markup;
}, // let our custom formatter work
minimumInputLength : 1,
templateResult : formatRepo,
templateSelection : formatRepoSelection,
tags : true,
createTag : function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
});
function formatRepo(repo) {
if (repo.loading)
return repo.text;
var markup = '<ul class="list-group clear-list m-t">' + '<li class="list-group-item fist-item"><span class="pull-right">' + repo.id + '</span> <span class="label label-success">' + repo.count + '</span> ' + repo.text + '</li>';
return markup;
}
function formatRepoSelection (repo) {
var markup = repo.text;
return markup;
}
And my jsp (html) is:
<select class="js-data-example-ajax" style="width: 100%" multiple="multiple">
//Iterating through database query result to pre-load option items
<option value="<%=skill_objective.get("id")%>" selected="selected"><%=skill_objective.get("id")%> <%=skill_objective.get("name") %></option>
</select>
Here is a working solution:
$(".js-data-example-ajax").select2('data') will give me a hash of all the objects selected.
I have created a grid and customized a column to contain a jquery UI menu like in the Split Button example
Everything works fine except for the fact that the menu window appear inside the cell causing a bad visual effect, that is, the cell height increase to make room for the menu window.
Have a look at the following screenshot for a visual explanation (nevermind about the menu item in disabled state).
Is there any way way to make the menu window appear on top of the table element in term of z-index?
Thanks very much for your valuable help, community :)
EDIT as per comment request:
The code to create the splitbutton menu is the following. First the column model markup
{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
formatter: function (cellvalue, options, rowObject) {
var markup = "<div>" +
"<div class='actionsButtonset'>" +
"<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
"<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
"</div>" +
"<ul class='actionMenu'>" +
"<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
"</ul>" +
"</div>";
return markup;
}
}
Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items
var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
var button = $(this);
var umltID = button.attr('rel');
button.button().click(function (event) {
event.preventDefault();
});
var isPeriodLocked = (button.attr('plock') === 'true');
if (!isPeriodLocked) {
var isConfirmAvailable = ($(this).attr('rev') === 'true');
if (!isConfirmAvailable) {
button.button({ disabled: true });
}
} else {
button.button({ disabled: true });
}
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
var button = $(this);
button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
button.click(function (event) {
var menu = $(this).parent().next().show();
menu.position({
my: 'left top',
at: 'left bottom',
of: this
});
$(document).on('click', function () {
menu.hide();
});
return false;
});
$('div.actionsButtonset').buttonset();
var menuElement = button.parent().next();
menuElement.hide();
menuElement.menu({
select: function (event, ui) {
var umltID = ui.item.children().attr('rel');
event.preventDefault();
}
});
if (!isCurrent) {
var isPeriodLocked = ($(this).attr('plock') === 'true');
if (isPeriodLocked) {
menuElement.menu({ disabled: false });
} else {
var isUmltLocked = ($(this).attr('rev') === 'true');
menuElement.menu({ disabled: !isUmltLocked });
}
} else {
//The current period is always unlocked
menuElement.menu({ disabled: true });
}
});
I prepared the demo for you which demonstrates how Split Button can be used inside of jqGrid. It displays
More detailed explanation of the demo I'll post later. Probably you will understand all yourself after examining of the code.
jQueryUI has a pretty nice display for radio buttons:
Does Sencha have anything similar?
Follow up question, if not:
what do you find to be nice UX for a three-item (or even four-item) component which requires only one touch? (e.g., a select box is two touches, one to open the select list and one to choose your option)
You are looking for Ext.SegmentedButton in Sencha Touch.
Sample code snippet:-
var segmentedButton = new Ext.SegmentedButton({
allowMultiple: false, // ensures only 1 button gets pressed at a time.
items: [
{
text: 'Choice 1'
},
{
text : 'Choice 2',
pressed: true
},
{
text: 'Choice 3'
}
],
listeners: {
toggle: function(container, button, pressed){
console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
}
}
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });
Output :-
I'm trying to figure out how to make an "opposite" of a jquery ui select. When someone does not select an option and just types "jquery something" output will be:
"new input: jquery something". However when the "jquery" is selected it would be nice to somehow only have "selected from list: jquery", and prevent the keypress propogation. However, both events fire. I'm trying to make it one or the other.
<input class="test" type="text" />
<script>
$('.test').autocomplete({
select: function (event, ui) {
alert('selected from list: ' + ui.item.label);
event.preventDefault();
return false;
},
source: ["jquery", "jquery ui", "sizzle"]
});
$('.test').live('keypress', function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
alert('new input: ' + $(this).val());
}
});
</script>
This is going with the assumption that the "enter" key is used to select an option from the ui's menu.
You could accomplish this using the autocompletechange event. Using this event, you can determine if the user selected an option or typed something in that wasn't on the list:
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
$("span").text("new item: " + this.value);
} else {
$("span").text("selected item: " + ui.item.value);
}
}
});
Example: http://jsfiddle.net/Ne9FH/