I've added a custom icon using below code in jqgrid Actions column. When the cutom icon is clicked, a pop up is opened with Textarea, Save and Close buttons. When I click Save button I wanted to save the text entered in textarea to a hidden field column in jQgrid. I tried 'setRowData' and 'setCell' properties but nothing works. Am I missing something here?
afterInsertRow: function (rowid, rowdata, rowelem) {
$(this).triggerHandler("afterInsertRow.jqGrid", [rowid, rowdata, rowelem]);
//...//
//Start: Code for Notes Icon in Actions column
var iCol = getColumnIndexByName(grid, 'actions');
$(this).find(">tbody>tr#" + rowid + ">td:nth-child(" + (iCol + 1) + ")")
.each(function () {
$("<div>", {
title: "Custom",
mouseover: function () {
$(this).addClass('ui-state-hover');
},
mouseout: function () {
$(this).removeClass('ui-state-hover');
},
click: function (eve) {
$("#change_dialog").dialog({
buttons: {
'Save': function () {
var selRow = $(eve.target).closest("tr.jqgrow").attr("id");
var txtNotes = $("#mytext").val();
$("#gridJQ").setRowData(selRow, { 'notesHidden': txtNotes });
$("#gridJQ").jqGrid('setCell', selRow, 'notesHidden', txtNotes);
$("#gridJQ").jqGrid('setRowData', selRow, 'notesHidden', txtNotes);
$(this).dialog("close");
},
'Close':function() {
$(this).dialog("close");
}
}
});
return false;
}
}
).css({ "margin-right": "5px", float: "left", cursor: "pointer" })
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
Instead of using this code to get the row
var selRow = $(eve.target).closest("tr.jqgrow").attr("id");
Try something a more direct such as
var selRow = $("#gridJQ").jqGrid('getGridParam', 'selrow');
Or even just var selRow = rowid.
Does that help at all?
Related
I'm trying to customize my kendo multiselect control's group header. I have checked the documentation below,
https://demos.telerik.com/kendo-ui/multiselect/grouping
no matter how I change the groupTemplat, the group always display in top right. Please check my code below,
var checkInputs = function (elements) {
elements.each(function () {
var element = $(this);
var input = element.children("input");
input.prop("checked", element.hasClass("k-state-selected"));
});
};
function initData() {
$scope.dataOptions = {
dataSource: getDataSource(),
dataTextField: "value",
itemTemplate: "<input type='checkbox'/> #:data.value# ",
groupedTemplate: "<input type='checkbox'/> #:data#",
autoClose: false,
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
}
}
I want to implement the multi-select dropdown like the Location option in this website.
When I checked the group, then all of the items in this group should be selected.
I am using jqgrid in my project.I have requirement that when user select row and click on edit button of inline toolbar control and modify any data in cell after that instead of click on Save button of inline toolbar control user click(select) any other row at that time.I want to show user message like
Wants to save/discard the modified data
if user click on Save button of message dialog then save the data otherwise discard the data.So please let me know how can I implement it.Till user don’t click on save or discard button don’t select the next row on which user click.
First of all you should use restoreAfterSelect: false option of inlineNav (if you use inlineNav). Seconds you can use beforeSelectRow to implement the required behavior and to call saveRow or restoreRow depend on the user choice.
The simplest implementation of beforeSelectRow could be the following:
beforeSelectRow: function (rowid) {
var $self = $(this),
savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
null : savedRowInfos[0].id;
if (editingRowId != null && editingRowId !== rowid) {
if (confirm("Do you want to save the changes?")) {
$self.jqGrid("saveRow", editingRowId);
} else {
$self.jqGrid("restoreRow", editingRowId);
}
}
}
I used confirm method above. You can see the working code on the demo.
Alternatively one can create asynchronous dialog using jQuery UI dialog for example. Then the code of beforeSelectRow could be the following:
beforeSelectRow: function (rowid) {
var $self = $(this),
savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
null : savedRowInfos[0].id;
if (editingRowId == null || editingRowId === rowid) {
return true; // allow selection
}
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 650,
modal: true,
buttons: {
"Save the changes": function () {
$(this).dialog("close");
$self.jqGrid("saveRow", editingRowId);
$self.jqGrid("setSelection", rowid);
},
"Discard the changes": function () {
$(this).dialog("close");
$self.jqGrid("restoreRow", editingRowId);
$self.jqGrid("setSelection", rowid);
},
"Continue editing": function () {
var tr = $self.jqGrid("getGridRowById", editingRowId);
$(this).dialog("close");
setTimeout(function () {
$(tr).find("input,textarea,select,button,object,*[tabindex]")
.filter(":input:visible:not(:disabled)")
.first()
.focus();
}, 50);
}
}
});
return false; // prevent selection
}
The corresponding demo is here.
Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
I have checkbox in Kendo grid. Once i click on Checkbox it always focus the top cell in Kendo Grid. Below is code for Kendo grid that I am binding to checkbox value on checkbox click event in Kendo Grid
$("#contactgrid").on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#contactgrid').data().kendoGrid;
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
// grid.tbody.find("tr").eq(rowIndex).foucs(); This doesn't work
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsSelected', checked);
});
I can get the row index and cell Index in click event but I was not able to figure out to focus the specific cell.
Thanks!
When you want to edit Grid with checkbox then I would suggest you to use the approach from this code library. No matter it uses the MVC extensions open Views/Home/Index.cshtml and see how the template is defined and the javascript used after initializing the Grid.
Here it is
Column template:
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);
<script type="text/javascript">
$(function () {
$('#persons').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#persons').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsAdmin', checked);
})
})
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $('#persons').data().kendoGrid;
$.each(grid.dataSource.view(), function () {
if (this['IsAdmin'] != state)
this.dirty=true;
this['IsAdmin'] = state;
});
grid.refresh();
}
</script>
I struggled with this. I essential refocused the cell as shown below. There's plenty of room for improvement in the Kendo grid client-side API. Hopefully my helper methods below will help people out.
var $row = getRowForDataItem(this);
var $current = getCurrentCell($row);
var currentCellIndex = $row.find(">td").index($current);
this.set('PriceFromDateTime', resultFromDate);
$row = getRowForDataItem(this);
var grid = getContainingGrid($row);
//select the previously selected cell by it's index(offset) within the td tags
if (currentCellIndex >= 0) {
grid.current($row.find(">td").eq(currentCellIndex));
}
//Kendo grid helpers
function getColumn(grid, columnName) {
return $.grep(grid.columns, function (item) {
return item.field === columnName;
})[0];
}
function getRowForDataItem(dataItem) {
return $("tr[data-uid='" + dataItem.uid + "']");
}
function getCurrentCell($elem) {
return getContainingGrid($elem).current();
}
function getContainingDataItem($elem) {
return getDataItemForRow(getContainingRow($elem));
}
function getContainingCell($elem) {
return $elem.closest("td[role='gridcell']");
}
function getContainingRow($elem) {
return $elem.closest("tr[role='row']");
}
function getContainingGrid($elem) {
return $elem.closest("div[data-role='grid']").data("kendoGrid");
}
function getGridForDataItem(dataItem) {
return getContainingGrid(getRowForDataItem(dataItem));
}
function getDataItemForRow($row, $grid) {
if (!$grid) $grid = getContainingGrid($row);
return $grid.dataItem($row);
}
function getMasterRow($element) {
return $element.closest("tr.k-detail-row").prev();
}
function getChildGridForDataItem(dataItem) {
return getRowForDataItem(dataItem).next().find("div.k-grid").data("kendoGrid");
}
function getMasterRowDataItem($element) {
var $row = getMasterRow($element);
return getDataItemForRow($row);
}
I want to write a ckeditor plugin that adds a checkbox to the toolbar.
When an img element is selected, the checkbox should reflect whether the image has a certain class or not.
When something else than an image is selected, the checkbox should be
disabled, or maybe invisible.
When I check or uncheck the checkbox, the class should be added/removed to/from the img.
In other words, I want to add something else than a button to the toolbar (those that are added with editor.ui.addButton), and that something should be a checkbox.
How do I do that?
I managed to do it anyway, using editor.ui.add and editor.ui.addHandler. Here is a screenshot:
plugin.js:
CKEDITOR.plugins.add('add_zoomable_to_image',
{
init: function( editor )
{
var disabled_span_color = "#cccccc";
var enabled_span_color = "#000000";
var cb;
var span;
var html =
"<div style='height: 25px; display: inline-block'>" +
"<div style='margin: 5px'><input class='add_zoomable_cb' type='checkbox' disabled='disabled'>" +
"<span class='add_zoomable_span' style='color: " + disabled_span_color + "'> Add zoomable to image</span>" +
"</div>" +
"</div>";
editor.ui.add('add_zoomable_to_image', "zoomable_button", {});
editor.ui.addHandler("zoomable_button",
{
create: function ()
{
return {
render: function (editor, output)
{
output.push(html);
return {};
}
};
}
});
editor.on("selectionChange", function()
{
var sel = editor.getSelection();
var ranges = sel.getRanges();
if (ranges.length == 1)
{
var el = sel.getStartElement();
if (el.is('img'))
{
enable_input();
if (el.hasClass('zoomable'))
check_cb();
else
uncheck_cb();
}
else
disable_input();
}
else
disable_input();
});
editor.on("instanceReady", function ()
{
cb = $('.add_zoomable_cb');
span = $('.add_zoomable_span');
cb.change(function()
{
var element = editor.getSelection().getStartElement();
if (cb.is(':checked'))
element.addClass('zoomable');
else
element.removeClass('zoomable');
});
});
function enable_input()
{
cb.removeAttr('disabled');
span.css('color', enabled_span_color);
}
function disable_input()
{
uncheck_cb();
cb.attr('disabled', 'disabled');
span.css('color', disabled_span_color);
}
function check_cb()
{
cb.attr('checked', 'checked');
}
function uncheck_cb()
{
cb.removeAttr('checked');
}
}
});
CKEditor doesn't include the option to add a checkbox to the toolbar, so your first step is to look at their code and extend it to add the checkbox.
Then look at how other buttons work to modify the content and detect when the selection in the editor changes to reflect its new state, and apply those ideas to your checkbox.