I've updated the code from a similar question answered by Oleg
http://stackoverflow.com/q/16516356/315935
The block I entered is as follows
...
$grid.jqGrid('filterToolbar',
{ stringResult: true, searchOnEnter: false,
defaultSearch: 'cn'
} )
$grid.jqGrid("setGridParam", {sortable: false})
.jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [{
startColumnName: 'amount',
numberOfColumns : 3,
titleText: '<b>Euro Cols</b>'
}]
})
fixPositionsOfFrozenDivs.call($grid[0]);
The result is the The id & client headers have the filter toolbar box hidden
How to show them like the rest of the column headers
This is how it looks
The frozenColumns and GroupHeaders are not compatible in version 4.6 and in any of Guriddo version. Here are described the limitations of frozen columns.
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 am in need of assistance in an attempt to programmatically check/uncheck a checkbox in a kendo grid.
I have part of my Grids datasource for this relevant field as...
receivereport: {
editable: true,
nullable: false,
required: false,
type: 'boolean',
validation: {
required: false
}
},
And the grids configuration is...
$("#contactGrid").kendoGrid({
dataSource: contactGridDS,
navigatable: true,
dataBound: mapContactTypes,
editable: true,
edit: function (input) {
},
toolbar: ["save", "cancel"],
pageable: false,
columns: [
{ field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
{ field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value="" disabled="disabled" ></input>' }
],
//filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
}
});
For brevity sake, I cut some of the other code out that's not relevant, such as other fields not involved here.
So, I have an email method that has a regex in it that works, and what I want to do is, if on focus, or focus out of the email field, if that email is invalid, make the receive report field false, but it's not registering dirty editing, and I even tried forcing it by appending some CSS rules and classes, which makes it "look" dirty, but when I change the value of the checkbox, on save, it goes back to what it was.
The data is bound to the receivereport data. So I think I read on the forums here that I need to do something like datasource.set("receivereport", false); And maybe a sync? The syncinc fires but it doesn't help and I must be calling the set incorrectly because the console says its firing on an unidentified object.
Here's the real kicker, I know how to access that check box and render it as false, but it flips right back to what it was bound to! It's not holding. Unless I click into that cell and do a click on the check box, it doesn't hold...
...unless I can simulate a fake click event on the target, being the checkbox...
I looked at the example here, Disable/Enable the checkbox in kendo grid based on column Value, but it seems a bit different and not what I need.
Bottom line - if the checkbox is true/checked, and a user goes back into the email field and renders it invalid, I want to automatically uncheck that checkbox, as well as make that checkbox disabled, until the user makes the email valid again. This also implies that a null email, means the checkbox must be false and disabled.
Anyways, any help would be immensely appreciated. Thanks.
This can be done using the "change" event of the dataSource:
dataSource = new kendo.data.DataSource({
change: function(e) {
if (e.action == "itemchange" && e.field == "email") {
//you can check the email value as well:
//var model = e.items[0];
e.items[0].set("receivereport", false)
}
},
Here is the full example:
Grid: change field value depending on another field
I have an ExtJS 4 dataView and i would like to catch the id of a selected node.
It is the first time that i'm using the dataView, then, there are some troubles.
The store is loaded correctly and i see the datas into the view very well. The problem which i'm having, concern the "classic" actions of update and delete, particularly getting the id of a selected item.
For example into a grid i click, then select a record and through a button's pressing i open a window (or other actions) with a loaded form (by sending in AJAX to the store, the id of the selected row) and i update the datas.
I'm not still able to do it with the ExtJS 4 dataView.
Below my dataView:
dataView_player = Ext.create('Ext.Panel', {
id: 'images-view',
frame: true,
collapsible: false,
autoWidth: true,
title: 'Giocatori (0 items selected)',
items: [ Ext.create('Ext.view.View', {
id:'players-view',
store: store_player,
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'Nessun giocatore visualizzato',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}-{name}">',
'<div class="thumb">',
'<img src="/img/players/{picture}" title="{name} {surname}" alt="{name} {surname}" style="">',
'</div>',
'<span class="" style="height:30px;">{general_description}{name} {surname}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],
prepareData: function(data) {
Ext.apply(data, {
name: data.name,
surname: data.surname,
general_description: Ext.util.Format.ellipsis(data.general_description, 15)
});
return data;
},
listeners: {
'selectionchange': function(record, item, index, e) {
var node = this.getNode(record); //this.getNode(record);
console.log(node.get('id'));
}
}
}) ],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'delete',
text: 'Cancella Selezionati',
scale: 'medium',
tooltip: 'Per <b>cancellare</b> i giocatori selezionati',
tooltipType: 'qtip',
id: 'delete-player',
disabled: true,
handler: delete_news
}, '-', {
iconCls: 'edit',
text: 'Aggiorna Selezionata',
scale: 'medium',
tooltip: 'Per <b>aggiornare</b> un giocatore selezionato',
tooltipType: 'qtip',
disabled: false,
id: 'update-player',
handler: function(nodes) {
var l = nodes.get('id');
console.log(l);
}
}
}
]
}]
});
Of course, this is a wrong example (because the listeners don't work) but it's just to make an idea.
There are two main things what i would like to do:
1) Catch the id (and other store's fields) of the selected item on the action "selectionchange". Obviously, now it doesn't work because of this: node.get('id'). Of course it's a wrong syntax but make up the idea of my will.
2) Catch the id of the selected item on the handler event of the "update-player" button. As above, the issue is the nodes.get('id'). Further trouble, is how to pass the selected item's features. in handler: function(nodes) { the nodes variable does not assume any value and i don't know how to pass the params from the dataview to the handler function.
I hope that somebody will able to help me.
According to the docs the selectionchange event provides the selection model as well as the array of selected records, so you are probably assuming the wrong parameters in your listener.
Without doing further testing, I think it should be something like this:
listeners: {
'selectionchange': function(selModel, selection, eOpts) {
var node = selection[0];
console.log(node.get('id'));
}
}
Note that you're using multiSelect: true, so it could be more than one record in the selection array.
Answer for second part of the question:
In button handler, you need to get selection model of the view and from it get information about selected records:
handler: function(nodes) {
// find view component
var view = dataView_player.down('dataview');
// get all selected records
var records = view.getSelectionModel().getSelection();
// process selected records
for(var i = 0; i < records.length; i++) {
console.log(records[i].getId());
}
}
I've seen tons of examples about setting the colmodel in the view but I haven't been able to see the controller code!
I am trying to do it but the setup keep being wrong.
I am trying to reach this column formation:
colModel:
[
{ name: 'ID', index: 'ID', hidden: true },
{ name: 'Votes', index: 'Votes', width: 100, align: 'left' },
{ name: 'Question', index: 'Question', width: 300, align: 'left' },
{ name: 'my_clickable_checkbox', index: 'my_clickable_checkbox',
sortable: true,
formatter: chkFmatter, formatoptions: { disabled: false }, editable: true,
edittype: "checkbox"
}
],
This is my trial in the controller:
return Json(
new { colNames = new[] { "ID2", "Votes2", "Question2", "checkbox" },
colModel = new[] {
new { name = "ID", index = "ID", width = 0, formatter="",
edittype="", hidden = true },
new { name = "Votes", index = "Votes", width = 100, formatter="",
edittype="", hidden = false },
new { name = "Question", index = "Question", width = 300, formatter="",
edittype="", hidden = false },
new { name = "checkbox", index = "my_clickable_checkbox", width = 100,
formatter="chkFmatter", edittype="checkbox", hidden = false }
}
}, JsonRequestBehavior.AllowGet);
The creation of this array in the controller is forcing me to have the same number of properties in all rows. For example, I only need the ID to be hidden, but it forces me to supply a hidden property to all other columns.
Second problem, I need to call js function chkFmatter for the fourth column.
how can I reach that colModel formation in controller??
thanks much.
You might be interested in looking at jqGrid Importing and exporting functionality. It allows you to import or export the entire jqGrid configuration to or from another file format.
You can read this blog post:
jqGrid and ASP.NET MVC - Configuration Import/Export
to get the general idea on how to use those functionalities with ASP.NET MVC, but it`s a little bit out of date if it comes to ASP.NET MVC stuff (it is based on ASP.NET MVC 1).
You can also take a look at this jqGrid sample project:
jqGrid in ASP.NET MVC 3 and Razor
which (among other things) contains sample for configuration import/export.
Most imported thing to remember here is that you still need to set any jqGrid events/callbacks or call any additional methods like 'setFrozenColumns' after configuration import.
I'm using jqgrid 3.8.2 and the grid have many columns that are non-editable but still want to be posted to the server. How I can do that? (If I set editable:false then the field is not getting posted the the server)
It seems to me that the column settings
hidden: true, editable: true, editrules: { edithidden: false }
will do what you need.
I realize this question is pretty old now but I needed to do this same thing today and the accepted answer doesn't actually answer the question. Sorry Oleg, you are still awesome. Anyway, if you have visible columns and are doing inline editing where some of those columns should not be editable the following worked for me.
Use these column setting
editable: true, edittype: 'custom', editoptions: { custom_element: readOnlyElement, custom_value: readOnlyValue}
and define these functions
function readOnlyElement(value, options) {
return $('<span></span>', { text: value });
},
function readOnlyValue(elem, operation, value) {
if (operation === 'get') {
return $(elem).text();
} else if (operation === 'set') {
$('span', elem).text(value);
}
}
About 'editable: "hidden"'...
This method is perfect until you change the contents of a cell. With 'editable:' hidden '', the jqgrid does not contain <input /> but aria-describedby which is less simple to target.
ex:
without 'editable:"hidden"'
you target the input by its 'id '==>' $("#yourgrid #jqg3_your_field")
with 'editable:' hidden 'you target like that ...
You need your current row id
rowID = $("#yourgrid").jqGrid('getGridParam', 'selrow');
$("tr[id='"+rowID+"'] [aria-describedby='yourgrid_your_field']>.u-jqgrid-cell-wrapper").html()
It's a lot less convenient :-)
Despite everything, it works very well ;-)
I see the answer in the comments for Oleg's answer by #singe3.
Set,
editable: "hidden"