I have using telerik grid in telerik window. However, on saving record in telerik window want to rebind another grid. However, grid is not rebinding. It happens only when you refresh the page. I want some method to be called once ajaxbinding for insert is done so as to rebing another grid.
This is a little tricky with the Telerik grids. Basically, you need to set a Javascript variable (flag) on submit of grid 1. Then on databinding of grid 1, if the flag is true, then rebind grid 2. Something like this:
var grid1SubmitChanges = false;
function Grid1_OnSubmitChanges(e) {
grid1SubmitChanges = true;
}
function Grid1_OnDataBinding(e) {
if (grid1SubmitChanges) {
// toggle the flag so you don't always rebind Grid2 when Grid1 binds
grid1SubmitChanges = false;
// rebind Grid2
var grid2 = $('#Grid2').data('tGrid');
grid2.rebind();
}
}
Related
When a grid is in a component at one route and the user navigates away and then comes back, the current kendo grid loses its scroll position and starts at the top.
Anyone know a way to "remember" the scroll position so it can be set on the grid manually?
Not a great solution, but it works for the time being. Here it is.
Inside the component with the grid:
private _scrollPos: number;
#ViewChild("grid", { read: ElementRef }) gridEl: ElementRef;
constructor(private router: Router) { }
ngOnInit(): void {
this.router.events.subscribe(e => {
if (e instanceof NavigationStart) {
let gridContent = this.getGridContentElement();
if (gridContent.scrollTop > 0) {
this._scrollPos = gridContent.scrollTop;
}
}
else if (e instanceof NavigationEnd) {
if (this._scrollPos > 0) {
let gridContent = this.getGridContentElement();
gridContent.scrollTo({ top: this._scrollPos });
}
}
}
}
private getGridContentElement(): Element {
let el = this.gridEl.nativeElement as HTMLElement;
let gridContent = el.getElementsByClassName("k-grid-content").item(0);
return gridContent;
}
This is can done by remembering which row was selected, saving the id of the row, and then setting the grid property [selectedKeys]="id" when the user navigates back.
For example if the data for the grid was based on product data then save last viewed row id (ProductID). When the user navigates back to grid, you can push the ProductID you saved to an array that is bound on the grid. This will make the row selected, to scroll to the row you can use the class k-state-selected and scrollIntoView to scroll the row into view.
This is a basic implementation, but should give you a enough to go on. I created a Stackblitz example so you can see how to implement this. Make sure to configure the grid with kendoGridSelectBy and selectedKeys. The kendoGridSelectBy should match the id that you push to the array. In the example I created it was ProductID.
You can set the Grid skip to the same value it last was. You can check out the persist state examples. The Grids use regular paging, but the same principles apply.
I have checked and tried the method posted here to set where CKEditor dialogs pop up:
Programatically set the position of CKEditor's dialogs
This seems to either be deprecated or incomplete. When attempting this for the 'link' dialog, the dialog box does not format correctly, as if this onShow definition replaces the default action rather than adding to it. Any suggestions to alter this code or a new method to position the link dialog closer to the menu bar?
CKEDITOR.on('dialogDefinition', function(e) {
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(200, 100);
}
})
You're right. Your code is overwriting the basic onShow definition.
What you have to do is simply to save a default (generic) onShow, then overwrite it so it calls the saved one and eventually executes your code:
CKEDITOR.on( 'dialogDefinition', function( event ) {
var dialogDefinition = event.data.definition,
genericOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
genericOnShow.apply( this );
this.move( 10, 10 );
// ...or anything you want ;)
}
});
Voilà!
PS. Remember to always pass the context with apply or call.
I'm using Telerik's MVC grid, and I would like to submit batch edit mode changes with some out of grid values. According to this telerik forum I can call the grid's submitChanges function and supply non-grid values inside the OnSubmitChanges event. This function only gets called if the grid has changes. There can be a case when values are changed outside of the grid but grid values are not saved. Is it possible to force the submission so that non-grid values can be submitted?
Good thing Telerik MVC Extensions are open source. I figured out the answer the following way:
function SaveCriteriaChanges() {
var grid = $("#MyGridId").data("tGrid");
//don't submit if grid fails validation
if (!grid.validate())
return false;
if (grid.hasChanges()) {
grid.submitChanges();
} else { //no grid changes to process so force submission
var additionalValues = {};
if(!$.telerik.trigger(grid.element, 'submitChanges', { values: additionalValues })) {
grid.sendValues($.extend({}, additionalValues), 'updateUrl', 'submitChanges');
}
}
return true;
}
i want to change the Identifier of my UIBarButton when the value from my slider has changed. I tried it that way:
var button = new UIBarButtonItem(UIBarButtonSystemItem.Save);
this.Pad_btnClose = null;
this.Pad_btnClose = button;
But it doesnt work. I also tried it that way:
this.Pad_btnClose = new UIBarButtonItem(UIBarButtonSystemItem.Save);
doesn´t work too.
Setting that variable (or outlet, you don't say which) isn't going to remove the UIBarButtonItem from the screen.
In order to do that, you must create an outlet for the UIToolbar, then call:
yourToolbar.Items = new UIBarButtonItem[] { yourNewButtonItem };
Or if you want it to animate:
yourToolbar.SetItems(new UIBarButtonItem[] { yourNewButtonItem }, true);
This will overwrite the list of button items in the toolbar on the screen.
I have a function, which creates layout with widgets. The problem is what one of the widget is virtual tree (on left side of layout) and the second widget on the right side depends on clicked row on left side. Virtual tree works like menu, which should return value of row name to the right widget and recreate it on right side with provided data. However currently it is not recreating, but adding a new widget to the old one. How to recreate widget on the right side not adding it to the existing one (interface is similar to qooxdoo demobrowser view with tests)?
_createLayout : function()
{
// Create main layout
var dockLayout = new qx.ui.layout.Dock();
var dockLayoutComposite = new qx.ui.container.Composite(dockLayout);
this.getRoot().add(dockLayoutComposite, {edge:0});
// Create header
this.__header = new bank.view.Header();
dockLayoutComposite.add(this.__header, {edge: "north"});
// Create toolbar
this.__toolBarView = new bank.view.ToolBar(this);
dockLayoutComposite.add(this.__toolBarView, {edge: "north"});
// Create the tree view, which should create dockLayout below, when user clicks with Row value
dockLayoutComposite.add(this.getTreeView(), {edge: "west"});
// This layout should be created and recreated with clicked row value
dockLayoutComposite.add(bank.InvoiceListBuilder.createList("Tree_returned_value"), {edge: "center"});
},
getTreeView : function()
{
var hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));
var tree = new qx.ui.treevirtual.TreeVirtual("Tree");
tree.setColumnWidth(0, 170);
tree.setAlwaysShowOpenCloseSymbol(true);
var dataModel = tree.getDataModel();
var te2 = dataModel.addBranch(null, "Folders", true);
dataModel.addBranch(te2, "Incoming", false);
dataModel.addBranch(te2, "Outgoing", false);
dataModel.addBranch(te2, "Drafts", false);
dataModel.setData();
hBox.add(tree);
var foldercontent = bank.InvoiceListBuilder.createList("incoming");
tree.addListener("changeSelection",
function(e)
{
// this function should return row value to function: bank.InvoiceListBuilder.createList("Tree_returned_value") and create/recreate dockLayout with newly created widget from bank.InvoiceListBuilder.createList function
});
return hBox;
},
you are using a old virtual tree implementation (qx.ui.treevirtual.TreeVirtual), I would suggest to use the qx.ui.tree.VirtualTree implementation.
The next step is to use something like a controller for your view, which listen to the selection and creates widgets when the selection changed. The controller should know the container for adding widgets.
When your left side is just a list. You can also use the virtual list (qx.ui.list.List) and use a set of the tree model.
Cheers,
Chris