I am using Kendo Grid with inline editing .
I need, on click of checkbox which is present in the grid i have to make row as editable and come out of edit mode.
To make kendo grid as editable i am using this code
var grid = $("#GridID").data("kendoGrid");
var gridDataArray = grid.dataSource._data;
var ctrl = event.target;
var row = $(this).parents('tr');
var index = row.index();
grid.editRow(row);
so the selected row is in edit Mode. Now, i need to get out of edit mode using javascript/JQuery.
Use saveRow or cancelRow, depending on whether you want to save the user changes or not.
On a side note, use the official data method
grid.dataSource.data()
instead of internal fields:
grid.dataSource._data
Related
I have a grid where I do data manipulation using a sql pl, when I update the registry I use the command
var model = apex.region("event")
.widget()
.interactiveGrid("getViews")
.grid
.model;
model.fetchRecords(model.data);
so that the focus remains on the record, however when inserting the record I did not find a way for the focus to fall on the released record, can you help me?
I don't think you can focus the particular cell that you have changed because more than one records can be modified simultaneously and saved.
By default the last modified row will be focused by IG.
If the select all check box is checked and more than or row is modified all the rows will be selected.
If you want to focus the last modified row even if the select all checkbox is checked then please follow the below steps:
Dynamic Action: Save Interactive Grid, Selection Type: Column(s), Region: Your IG Region, Columns: Select the columns for for which the focus of the row must happen when IG is saved
True Action: Javascript code
$( ".selector" ).grid( "GRID_STATIC_ID" );
If you want to the last selected row to be selected even after page submit then please follow the below steps:
Dynamic action: On Selection Change IG
, True action: Javascript Code
var gridID = "GRID_STATIC_ID";
var ig$ = apex.region(gridID).widget();
var grid = ig$.interactiveGrid("getViews","grid");
var selectedRecord = grid.getSelectedRecords();
console.log(selectedRecord);
localStorage.setItem('lastSelectedRecord', JSON.stringify(selectedRecord));
Dynamic action: Page Load
, True action: Javascript Code
var gridID = "GRID_STATIC_ID";
var ig$ = apex.region(gridID).widget();
var grid = ig$.interactiveGrid("getViews","grid");
grid.setSelectedRecords(JSON.parse(localStorage.getItem('lastSelectedRecord')));
I've got a Telerik MVC Server Side Grid with pagination, the component generates a pagination dropdown at the bottom of the table which lets you select the page size.
I would like to change the value of that dropdown programatically from javascript and make it so the grid triggers a refresh with the new value.
I have already tried targetting the dropdown itself like so:
var listViewPagerDropDownList = $(".k-pager-sizes").find("select").data("kendoDropDownList");
listViewPagerDropDownList.value(userPreferencePageSize);
Targetting the pager:
var pager = $(".k-grid-pager").data("kendoPager");
pager.pageSize(userPreferencePageSize);
As well as trying to change it manually with jQuery like so:
var selectBox = $(".k-pager-sizes").find("select");
selectBox.val(userPreferencePageSize);
selectBox.find("option[value='" + userPreferencePageSize + "']").prop("selected", true);
But no matter what I do, it has no effect. Any idea?
Confused as to what you actually want, but to change the pagesizes you need to access the pager's dropdownlist datasource that holds the page values:
// Add a page size of 25 to the dropdown
$("select[data-role='dropdownlist']").data('kendoDropDownList').dataSource.add({text: "25", value: "25"});
You could use other datasource commands to clear existing values.
If you just want to change the page size of the grid, try:
$("#grid").data("kendoGrid").dataSource.pageSize(numberOfRows);
I am trying to append my Kendo Grid toolbar after some functions using following::
1) I am getting the toolbar as::
var toolbar = $("#Grid").find(".k-grid-toolbar").html();
2) then after some changes to Grid using grid.setOptions(JSON.parse(options)) which causes disappear of Toolbar i am again appending toolbar to grid as::
$("#Grid").find(".k-grid-toolbar").html(toolbar);
Here toolbar is appended properly but I am not able to use those functions(i.e. Dropdown inside of toolbar).
How can i get my toolbar Dropdown working?
Thanks in advance
Getting the html() method provides ONLY the HTML code, and not the JavaScript attached to the elements from this HTML. So when you inject your HTML code in the toolbar, you need to call again the JavaScript attached to the elements. If you want to get a kendo widget configuration, for example a dropdownList, you need to call options and dataSource from your widget.
E.g:
var $toolbar = $("#Grid").find(".k-grid-toolbar"),
toolbar = $toolbar.html(),
// Dropdown list Element
$ele = $("input[name=myInput]", $toolbar.get(0)),
// Dropdown list Widget object
ddl = $ele.data("kendoDropDownList"),
cfg = ddl.options;
// toJSON returns objects without the observer properties
cfg.dataSource = ddl.dataSource.data().toJSON();
// HERE YOU REBUILD YOUR TABLE
$toolbar.html(toolbar);
$("input[name=myInput]", $toolbar.get(0)).kendoDropDownList(cfg);
If the elements you add to the toolbar are always the same, I would suggest you create instead a function with the grid as argument (and the data, if the data changes):
function setToolbarContent(grid){
var $toolbar = grid.find(".k-grid-toolbar");
$toolbar.html('My HTML String');
$toolbar.find("input[name=myInput]").kendoDropDownList({my: 'cfg'});
}
And by the way, if you were adding the toolbar config and template to grid.setOptions(), maybe it wouldn't disappear in the first place :)
I need to implement a hierarchical choice list in my DataGrid. Depending on the value of the first column, the available options for the second column need to change. Is there any way to attach a selection listener to the DataGrid (or all cells?) and modify the options value of the second column (in this specific row) to display values depending on the first columns value?
I haven't tried this but the dojox.grid.DataGrid has among its defined events:
onApplyCellEdit(inValue, inRowIndex, inFieldIndex)
so you can:
dojo.connect(grid, 'onApplyCellEdit',
function(inValue,inRowIndex, inFieldIndex){
var colObj = grid.getCell(2);
var node = colObj.getNode(inRowIndex);
var select = dojo.query(".dojoxGridSelect",node)[0];
console.log(select);
}
);
as long as the field is set alwaysEditing=true
That will give you access to the node and the cell... but if you change the options it rewrites it. There should be a better way of doing it by using the dojo's methods.
http://jsfiddle.net/dacabdi89/2acjt/
I have three Tabs and in each tab, I have a Grid.
The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:
<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">
The rows are constructed from Doublebox objects. The data is populated successfully.
The Problem:
I need to handle multiple-cell editing on the client side. The editing is done via mouse-clicking on a particular cell and entering a value.
As example let's say that the user edits first cell on the first row and the value should be
propagated to all other cells on the same row and in all three Grids (so also the two Grids which the user currently does not see, because they are in tabpanes).
I am using jQuery to do this value propagation and it works OK.
I am passing the jQuery as follows:
doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);
This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.
The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones.
I am assuming that ZK-Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.
Code of how I extract the Grid values:
Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);
The model for my Grid is a List of MyCustomRow:
myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));
I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK-Events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)
Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!
Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.
The ways to solve your problem.
Use the "ZK-Way":
Simply listen at server-side and chage things there.
I am not sure if not selected Tabs
are updateable, but I am sure you could update the Grid
components on the select event of the Tab.
Fire an zk-event your self:
All you need to know, is written in the zk doc.
Basically, you collect your data at client side, send
an Event to the server via zAu.send() extract the
data from the json object at serverside and update your Grids
I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.
I post the solution we came up with:
This is the javascript attached to each Doublebox in the Z-Grid
//getting the value of the clicked cell
var currVal = jq(this).val();
//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');
// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else { //otherwise we assume this is the last cell of the current tab
//So we get the current row, because we want to edit the cells in the same row in the next tabs
var currRow = jq(this).parents('tr').prevAll().length;
//finding the next cell, on the same row in the hidden tab and applying the same logic
objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
if (objCellsHiddenTabs.length) {
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
}
}
The java code in the RowRenderer class looks something like this:
...
if (someBean != null) {
binder.bindBean("tBean", someBean);
Doublebox box = new Doublebox();
setDefaultStyle(box);
row.appendChild(box);
binder.addBinding(box, "value", "tBean.someSetter");
...
private void setDefaultStyle(Doublebox box) {
box.setFormat("#.00");
box.setConstraint("no negative,no empty");
box.setWidth("50px");
String customJS = ""; //the JS above
//this is used to visually see that you're editing multiple cells at once
String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
box.setWidgetListener(Events.ON_CHANGE, customJS);
}
What is interesting to notice is that ZK optimizes this fireOnChange Events and send only 1 ajax request to the server containing the updates to the necessary cells.