I would like to disable some items in the kendo ListBox.
There is a Sample in the kendo docs to disable: http://docs.telerik.com/kendo-ui/api/javascript/ui/listbox#methods-enable
But I would like disable some items in the list like:
var data = [
{ 'ProductID':'1', 'ProductName': 'Spalte 1', 'Discontinued': true, 'disabled': true },
{ 'ProductID':'2', 'ProductName': 'Spalte 2', 'Discontinued': true, 'disabled': false},
];
My full sample code: http://dojo.telerik.com/iKOmo/10
My goal is, disable items in the listBox when disabled = true is in the data object.
Thanks for some help
Severin
One solution for this Problem is:
$("#disable").click(function () {
//console.log("my object: %o", opt_kendoListBox);
//alert(JSON.stringify(opt_kendoListBox.options.dataSource._data));
for (i = 0; opt_kendoListBox.options.dataSource._data.length > i; i++) {
if(opt_kendoListBox.options.dataSource._data[i].disabled){
opt_kendoListBox.enable($(".k-item").eq(i), false);
}
}
});
It works correct only after initialization of listBox.
A sample code: http://dojo.telerik.com/iKOmo/24
Not a perfect solution, but a helping solution i hope so.
Related
Please guide me on a work around for having a set of columns frozen and the rest having cell edit feature along with column reordering/ show- hide options using jqgrid.
Thank You.
Please try this, simple solution,
Hide or remove cellEdit: true
Then add the below lines in above and below the setFrozenColumns
Previous code:
$("#jqGrid2").jqGrid('setFrozenColumns');
New Code:
$("#jqGrid2").jqGrid("setGridParam", {cellEdit: false, sortable: false});
$("#jqGrid2").jqGrid('setFrozenColumns');
$("#jqGrid2").jqGrid("setGridParam", {cellEdit: true, sortable: true});
The problem is that the current implementation of setFrozenColumns have some restrictions. Editing (in any editing mode) and sortable: true is not allowed for frozen columns, but setFrozenColumns. Moreover sortable: true should don't allow to resort headers of frozen columns. On the other side setFrozenColumns contains simple test of some parameters (see here) and the method do nothing if some such parameters (like cellEdit or sortable) are set.
I suggested in the post (with the demo) the way how to implement a workaround. The way is modification of approach from the answer and this one.
I find your question interesting and so I created the demo which demonstrates how one do can implement your requirements. It displays the following results (animated gif):
It uses mostly the following code
// create the grid
$grid.jqGrid({
...
});
$grid.bind("jqGridLoadComplete jqGridInlineEditRow jqGridAfterEditCell jqGridAfterRestoreCell jqGridInlineAfterRestoreRow jqGridAfterSaveCell jqGridInlineAfterSaveRow", function () {
fixPositionsOfFrozenDivs.call(this);
});
$grid.jqGrid("setGridParam", {cellEdit: false, sortable: false});
$grid.jqGrid("setFrozenColumns");
$grid.jqGrid("setGridParam", {cellEdit: true, sortable: true});
fixPositionsOfFrozenDivs.call($grid[0]);
try {
var p = $grid.jqGrid("getGridParam"), tid = $.jgrid.jqID(p.id), colModel = p.colModel, i, n = colModel.length, cm,
skipIds = [];
for (i = 0; i < n; i++) {
cm = colModel[i];
if ($.inArray(cm.name, ["cb", "rn", "subgrid"]) >=0 || cm.frozen) {
skipIds.push("#jqgh_" + tid + "_" + $.jgrid.jqID(cm.name));
}
}
$grid.jqGrid("setGridParam", {sortable: {options: {
items: skipIds.length > 0 ? ">th:not(:has(" + skipIds.join(",") + "),:hidden)" : ">th:not(:hidden)"
}}});
$grid.jqGrid("sortableColumns", $($grid[0].grid.hDiv).find(".ui-jqgrid-labels"));
} catch (e) {}
Does anyone know if the kendo grid could be always set to edit mode at all times?
We don't want the user to click on a cell or a button to activate the edit mode. We want it the widgets to be displayed and available at all times.
Is it possible at all?
Apart from using batch editing mode you can try setting the template of every column and binding the input elements to the data items using MVVM.
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: { editable: false }
}
}
}
data: [
{ id:1, age: 30, name: "John Doe" }
]
},
columns: [
{ field: "id", width: 50 },
{ field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
{ field: "name", template:"<input data-bind='value: name' >" }
],
dataBound: function() {
var rows = this.tbody.children();
var dataItems = this.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
kendo.bind(rows[i], dataItems[i]);
}
}
});
Here is a live demo: http://jsbin.com/ApoFobA/2/edit
Out of the box, not exactly. You can enable Batch editing which displays everything normally, but clicking a cell will switch it to an editor automatically.
Example
To enable it, set { batch: true } on the table's datasource. Otherwise you're off to some deeper scripting. Checked and simply calling editRow on all rows doesn't do it. Default behavior is to disable editing on a row when a new one is taken into edit mode.
So, quick look says Batch mode - won't display editors all the time, but works and out of the box.
I found the above answer to be excellent. One issue though, is that Kendo doesn't clean up bindings when it refreshes the grid (such as when sorting or filtering or when refresh() is called) and deletes the grid's DOM elements. The result is the dataItems will have an increasing number of "change" events queued up -- a bit of a memory leak. This can be avoided by unbinding in the dataBinding event, as below:
dataBinding: function() {
var rows = this.tbody.children();
for (var i = 0; i < rows.length; i++) {
kendo.unbind(rows[i]);
}
}
I'm new to Kendo and the Kendo grid but I'm trying to learn how to use the master detail Kendo grid where the detail grid is supposed to support batch editing. The data is available in a local JavaScript object.
This jsFiddle demonstrates the problems I'm seeing.
Here's how the grid is being created - see the jsFiddle for the complete snippet -
$("#grid").kendoGrid({
dataSource: items,
detailInit: createDetail,
columns: [
{ field: "Item", width: "200px" },
]
});
function createDetail(e) {
$("<div/>")
.appendTo(e.detailCell)
.kendoGrid({
dataSource: {
batch:true,
transport: {
read: function (options) {
options.success(e.data.SubItems);
}
}
},
editable:true,
pageable:true,
toolbar: ["save", "cancel"],
columns: [
{ field: "SubItem", title: "Sub Item", width: 200 },
{ field: "Heading1", title: "Heading 1", width: 100 }
]
});
}
When you edit an item in the grid and click to the next cell, the details grid automatically collapses not matter where I click, even in an adjacent cell. When I open it again, I don't see the change indicator in the cell (red notch) but the new value is there.
If I were to hook up the save to an ajax call, Kendo sends the right detail item(s) that were edited.
Nothing happens when I click cancel changes.
How do I get the grid to not collapse and see the change indicators ?
How do I get canceling of changes to work correctly ?
[Update] - Further investigation reveals that if I use an older Kendo version 2011.3.1129 , this works as expected. But if I use the newer 2012.3.1114, it doesn't. Dont know if this is a bug or a change in behavior.
After much effort, I found that the cause seems to be that the master grid is rebinding automatically causing the behavior I observed. I was able to get around this by handling the dataBinding event in the master grid and within that, checking if any of the detail datasources were dirty and if so, calling preventDefault.
Here are relevant code snippets :
dataBinding: function (e) {
if (masterGrid.AreChangesPending()) {
e.preventDefault();
}
}
AreChangesPending : function () {
var pendingChanges = false;
// I gave each detail div an id so that I can get a "handle" to it
$('div[id^="detail_"]').each(function (index) {
var dsrc = $(this).data("kendoGrid").dataSource;
$.each(dsrc._data, function () {
if (this.dirty == true || this.isNew()) {
pendingChanges = true;
}
});
// For some reason, Kendo did not detect new rows in the isNew()
// call above, hence the check below
if (dsrc._data.length != dsrc._total) {
pendingChanges = true;
}
});
return pendingChanges;
}
I would like to alter the search filters after a user has submitted them. Normally jqGrid returns name in colmodel as the value for field, I would like to change this behavior for a specific column:
I would like to change:
{"groupOp":"AND","rules":[{"field":"available","op":"eq","data":"true"}]}
to
{"groupOp":"AND","rules":[{"field":"s.trait.available","op":"eq","data":"true"}]}
I have tried altering the submitted form in the ways below; firebug shows that the functions are never being called.
var searchOptions = {
multipleSearch:true, multipleGroup:false, closeOnEscape:true, closeAfterSearch:true,
sopt:['ge', 'eq', 'le'],
beforeSubmit:function (params, postdata) {
//alterations would be here
}
,
onclickSubmit:function (params, postdata) {
//alterations would be here
}
}
This approach works for editOptions and delOptions, I am not sure why I cannot get this to work for searching.
If you use the searching toolbar you can use beforeSearch callback to modify the postData.filter. In case of Singe Field searching or Advanced Searching you can use onSearch.
In the answer you can see how the postData.filter can be modified.
UPDATED: You did something wrong in your tests. The only problem is that the current implementation of searching don't initialize this to the grid, but it's not explicitly documented somewhere.
I created the demo for you which demonstrate that you do can modify the filter before relaoding of the grid will be started. If you would search in the grid for 'Client' equal to 300 the search request will be modified to 'amount' equal to 300 and you would see the results
The corresponding code is
$('#list').jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
{
multipleSearch: true,
overlay: 0,
onSearch: function () {
var i, l, rules, rule, $grid = $('#list'),
postData = $grid.jqGrid('getGridParam', 'postData'),
filters = $.parseJSON(postData.filters);
if (filters && typeof filters.rules !== 'undefined' && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
if (rule.field === 'name') {
// make modifications only for the 'contains' operation
rule.field = 'amount';
}
}
postData.filters = JSON.stringify(filters);
}
}});
function bind_single_select() {
if (!$("input#single").length > 0) {
$("span.single_select").prepend("<input type='checkbox' name='single' id='single' checked='checked' style='vertical-align:middle' />");
}
$("table#gridTable").find("tr").click(function () {
if ($("input#single").attr("checked")) {
$(".trSelected").removeClass("trSelected");
$(this).addClass("trSelected");
}
});
}
I found this in Flexigrid but in JQGrid How can I do it.
Another Question :
.navButtonAdd('#pager',
{ caption: "Add",
buttonimg: "/Areas/Pages/Content/Images/add.png",
onClickButton: function () {
PopupCenter('<%= Url.Action("CreatePublisher","Publisher") %>',
'CreatePublisher', '500', '300');
}, position: "last"
})
the buttonimg is not work even I use
ui-icon-plus
Thanks in Advance.
The second part of your question is very easy to answer. The parameter buttonimg is no more supported in the navButtonAdd function. You should use buttonicon instead. An example you can find here. In general as a value of buttonicon you can use any from the jQuery UI Framework Icons.
To toggle multipleSearch parameter you can just define search parameters of navGrid separately and toggle the value of the multipleSearch property. To make all more easy I suggest to use an additional parameter recreateFilter:true.
var grid = jQuery('#list');
var pSearch = { multipleSearch:false, recreateFilter:true };
grid.jqGrid({
// all jqGrid parameters
}).jqGrid ('navGrid', '#pager', {edit:false, add:false, del:false, refresh:true, view:false},
{},{},{},pSearch));
$("#pager_left table.navtable tbody tr").append ( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="navMultiSearch"/>Multi-Search</div></td>');
$(".myMultiSearch").change(function() {
if ($(this).is(':checked')) {
pSearch.multipleSearch = true;
$(".myMultiSearch").attr("checked","checked");
}
else {
pSearch.multipleSearch = false;
$(".myMultiSearch").removeAttr("checked");
}
});
On the small demo I inserted both internal and external checkboxes to the navigation bar and a custom button additionally: