I have three sortable lists. One of them is a grid, the other two just simple lists. The non-grid lists are nested in each other. My problem is, that I can't drag items to the nested sortable, however I can drag out from it.
I made a fiddle from the official kendo example for nested lists: https://jsfiddle.net/9jnuwjjg/1/
$("#parent").kendoSortable({
connectWith: "#nested, #third",
filter: ">li.list-item",
ignore: "#nested >li",
placeholder: placeholder
});
$("#nested").kendoSortable({
connectWith: "#parent, #third",
filter: ".list-item",
placeholder: placeholder
});
$("#third").kendoSortable({
connectWith: "#parent, #nested",
filter: ".list-item",
placeholder: placeholder
});
It has the same problem, I can't drag any item to the nested list.
Any idea would be appreciated!
Thanks!
I removed the direct child selector that you had in the first filter field
$("#parent").kendoSortable({
connectWith: "#nested, #third",
filter: "li.list-item",
ignore: "#nested >li",
placeholder: placeholder
});
$("#nested").kendoSortable({
connectWith: "#parent, #third",
filter: ".list-item",
placeholder: placeholder
});
$("#third").kendoSortable({
connectWith: "#parent, #nested",
filter: ".list-item",
placeholder: placeholder
});
Related
I am using select2 with jqgrid.
something is not working correctly, these are the cases when I edit a row.
WITHOUT OPTGROUP
standard select (no select2) without optgroup: select will show the selected item (the one i’m editing)
select2 without optgroup: select will show the selected item (the one i’m editing)
WITH OPTGROUP
standard select (no select2) with optgroup: select will show the selected item (the one i’m editing)
select2 with optgroup: select will NOT show the selected item (the one i’m editing) but when I open it il will focus the selected item.
So as you see #2 works, my problem is #4. Is it a bug or am I missing something?
Thank you,
Lorenzo
Not sure what you search, but the problem when navigating row is described here
In your case I have tested and the following code work:
$('#grid'). jqGrid('navGrid', pager, {params},
...
{ // edit params
{ afterclickPgButtons : function(button, form, id ) {
$("#name").trigger('change.select2');
},...
}
);
Note the difference of the link above.
UPDATED
In order to solve the problem you will need to use setTimeout within dataInit function. Try with one of the following settings:
{
name: "name",
index: "name",
autosize: true,
searchoptions:{clearSearch:false},
width:200,
editable:true,
edittype: 'select',
editoptions: {
// Simulo la risposta di una chiamata
// Per funzionare deve esistere più sotto
// ajaxSelectOptions
dataUrl:'/echo/html/',
postData: {
html: serverResponce
},
//
dataInit: function(element) {
setTimeout(function(){
$(element).select2({
allowClear: false,
// Imposto il tema bootstrap
theme: "bootstrap4",
dropdownAutoWidth : true,
width: 'auto',
placeholder: 'Search...'
});
}, 500);
}
}
}
I expect to have a demo with optgroup
I'm trying to use Kendo UI MultiSelect to select some stuff from an API. The API won't return all items because they are too much. It will only return those that contains the searchTerm.
I'm trying to figure out how to send the input text in a Kendo UI Multiselect. When I say the input text, I mean what the user typed in the input before selecting anything from the list. That text has to be passed on to the DataSource transport.read option.
See this Codepen to understand
https://codepen.io/emzero/pen/NYPQWx?editors=1011
Note: The example above won't do any filtering. But if you type "bre", the console should log searching bre.
Use the data property in the read transport options, this allows you to modify the query being sent by returning an object that will later on be serialized in the request.
by default read are GET requests so it will be added to the queryString of your url specified.
If it were to be a POST it would be added to the POST values.
<div id="multiselect"></div>
<script>
$('#multiselect').kendoMultiSelect({
dataTextField: 'first_name',
dataValueField: 'id',
filter: "startswith",
dataSource: {
serverFiltering: true, // <-- this is important to enable server filtering
schema: {
data: 'data'
},
transport: {
read: {
url: 'https://reqres.in/api/users',
// this callback allows you to add to the request.
data: function(e) {
// get your widget.
let widget = $('#multiselect').data('kendoMultiSelect');
// get the text input
let text = widget.input.val();
// what you return here will be in the query string
return {
text: text
};
}
}
}
}
});
</script>
I am using devbridge ajax autocompletion script http://www.devbridge.com/projects/autocomplete/jquery/. When I type something in the textfeild, the suggestion list does show up and the matched portion of the words are correctly highlighted. However, the problem is the list remains static. In other words, the suggestion list basically functions like a dropdown list. All the items (matched or not) remain on the list, and in the same order, no matter what you type in the text field.
Anybody can tell me what the problem is? Thanks!
To answer your question, Anyone need code what you are using for this.
I will reply after understanding your code.
Sample Code :
$ (document). ready (function ()
{
$('#searchresult').autocomplete(
{
serviceUrl: 'search.php',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight: 400,
zIndex: 9999,
deferRequestBy: 0, //miliseconds
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
});
In the inline editing, before the editing be made, it creates internally an array (savedRow) and fill it with the values of the fields that are being editable, so I can access this values.
I'd like to know if in the form editing it has something similar to this, because I need to access the values of the fields before the editing will be completed to do a validation before the fields are "saved" in the database.
Someone could help me?
EDITED :
I'm posting here a part of my code (the code of one field), and I'm trying to validate in both way (inline editing and form editing). For inline editing I'm validating using dataEvents and there I'm using savedRow to access the data that were not stored yet. But when I try to edit using form editing because of the the use of savedRow, it shows me an error: savedRow is not defined. In the case of this field the editrules fits with what I want to do, but I don't know if this will occurs in all of those fields.
{ name: 'ac_fd', index: 'ac_fd', width: 50, editable: true,
formatter: 'number', editrules: { number:true, required:true, minValue: 0.1,
maxValue: 1.0 }, formatoptions: { decimalPlaces: 1, decimalSeparator: '.'},
editoptions: {
dataEvents: [ {
type: 'blur', fn: function(e) {
var savedrow = $("#list").getGridParam('savedRow');
console.log($(this).val());
if($(this).val() != savedrow[0]['ac_fd']) {
var eid='#' + savedrow[0]['id'] + '_ac_fd';
var val_fd=$(this).val();
var fd_min=0.1;
var fd_max=1.0;
if( isNaN(val_fd) || val_fd > fd_max || val_fd < fd_min) {
setTimeout(function(){
$(eid).focus().select();
},600);
$(eid).qtip({
content: {
text: 'Fator de Demanda deve ser um <b>número</b>
entre <b>' + fd_min.toFixed(1) + '</b> e <b>'
+ fd_max.toFixed(1) + '</b>.',
title: {
text: 'Atenção:',
button: true
}
},
show: {
event: false,
ready: true,
effect: function() {
$(this).stop(0, 1).fadeIn(400);
},
delay: 0,
},
hide: {
event: false,
effect: function(api) {
$(this).stop(0, 1).fadeOut(900).queue(function() {
api.destroy();
});
},
},
style: {
classes: 'qtip-red qtip-rounded trif_tip_err',
tip: {
width: 10,
height:12
}
},
position: {
my: 'bottom left',
at: 'top center',
},
events: {
render: function(event, api) {
tip_timer.call(api.elements.tooltip, event);
}
}
});
}
}
}
} ]
}
},
So if dataEvents is common and used for the three forms of edit, where can I do this type of validation (using qtip too and I want that this validation be used in inline editing too)?
The reason why jqGrid save the editing row in interval savedRow parameter is because jqGrid modify the editing row in-place. Only because of that inline editing and cell editing use interval savedRow parameter. Form editing don't modifies the original row of grid till the editing will be finished. So no savedRow parameter are used by form editing.
If the form are closed or if the server response will contains some error HTTP code the new data entered by user will be not saved in the grid. So simple server side validation is typically enough. If you want implement additional client side validation you can use editrules feature. Custom validation is typically enough. It can help validate one field of the form. If you need compare multiple fields of form during validation (if the value of one field defines valid values of another field) then one uses beforeCheckValues callback additionally.
UPDATED: Inside of fn event handler you can test whether it will be called inside of form editing or not. There are many ways to do this. For example you can test $(e.target).closest(".FormGrid").length > 0. If it's true then the event is inside of form. Additionally it's important to understand that the current editing row is not changed till successful saving on the server. So you can use any time getGridParam with "selrow" option to get the id of editing row and you can use getRowData or getCell to get the data from the grid before modification started (the same as savedrow).
I am using the jqgrid pager to just display an add and a refresh link for one of my grids. I tend to use the default icons for add, edit, delete, and refresh on most of my grids, which in turn, by jqgrid default, puts a | (bar) between the Add/Edit/Delete buttons and the refresh button.
On my "Games" grid, I'm using a custom Add button (which is displaying before the refresh), but there is no bar displaying before the refresh button. I've tried rearranging the order, adding a position option to navSeparatorAdd, and doing a lot of googling. However, I can't find anything that has helped me in this situation.
I haven't tried turning off Refresh and making a custom button, but that seems like a hack. Any ideas on how to get that bar after add & before refresh?
So, what I have: + # |
What I want: + | #
(The # is supposed to be the refresh icon)
Thanks,
ember
jQuery("#Games").jqGrid('navGrid',
'#GamesPager',
{edit:false, add:false, del:false, search:false,
refreshtitle: "Refresh"},
{}, //settings for edit
{}, // settings for add
{}, // settings for delete
{} // advanced searching settings
);
jQuery("#Games").jqGrid('navButtonAdd',
"#GamesPager",
{ caption:"Add Game",
buttonicon:"ui-icon-plus",
onClickButton:function(){
loadAddColorBox();
},
position: "first",
title:"Add Game",
cursor: "pointer"
}
);
jQuery("#Games").jqGrid('navSeparatorAdd',
"#GamesPager",
{sepclass : 'ui-separator',sepcontent: ''}
);
Separator
It is possible to group some action adding separator. This can be done using the navSeparatorAdd method
Syntax:
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>
here's link of documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
$(table_selector).jqGrid('navGrid', pager_selector, {
cloneToTop: true,
edit: false,
add: false,
del: false,
search: false,
refresh: true,
view: false
});
$(table_selector).jqGrid('navSeparatorAdd', table_selector + '_toppager', {
sepclass: 'ui-separator',
sepcontent: '',
position: 'first'
});
$(table_selector).jqGrid('navButtonAdd', table_selector + '_toppager', {
caption: 'save',
buttonicon: 'ui-icon ace-icon fa fa-pencil blue',
onClickButton: function() {
alert("1");
},
position: 'first'
});