I want the checkbox to be checked when I right click on the row in the grid. My application supports only javascript. It does not support jquery. So please send in your answers in javascript.
I used the following code to activate the right click event and get the ID value of the row that I have right clicked on. Please help me to check the checkbox of the corresponding row.
this.gridConnections.push(aspect.after(this.grid, "onRowContextMenu", lang.hitch(this, function(evt) {
var rowID = evt.rowId;
console.log("right click");
event.stop(evt);
}), true));
once you have the row object, you can also get the checkbox on that row like
this.yourcheckbox or dijit.byId("yourcheckbox"). Then use
this.yourcheckbox.set("checked",true) or
dijit.byId("yourcheckbox").set("checked",true);
Related
I cannot find an answer to this in stackoverflow or an answer I can understand in github..the issue is simple..I want to be able to use ui-grid much as I would a datasheet or continuous forms in MS Access..I think I have editing sussed (at least on a cell by cell basis) and now I need to be able to add a new blank record (row) by clicking a button.
Is there an easy way to achieve this?
Ideally the code would make provision for setting values for certain fields for example a field which is a foreign key (for example if the user is adding line items to an order one would want the order id to be entered automatically via the underlying code rather than for the user to have to select from a dropdown list each time).
As always any answer will be appreciated.
Please take a look at this plunker.
Adding row with button
More specifically look at this function within the controller and how it's called using the ng-click directive on the button html element:
$scope.addNewItem=function()
{
$scope.data.push( { name: 'Test add ', title: 'Test add' });
};
After being clicked this is then reflected in the view. Of course you could customize this to append blank data, or data specific to the button the user clicked.
I am using Kendo UI grid for AngularJS. The scenario is; I have expanded one master row which contains another grid in its detail template. When I insert new item in the detail template grid, the master row automatically collapsed. what I want is when I making changes to detail template grid than there must be no affect on master row(I mean should not be collapsed). any help will be appreciated.
I know the question is old but I have faced the same scenario and come up with this, when you rebind/refresh grid by any mean, the grid get re rendered and thus you got collapse your row. apparently this behavior is of kendo ui. the only thing you can do is take that expanded row id and then rebind grid, after rebind expand that row again
Try adding a dataBinding function to the grid to cancel the default action on the item Change event.
Example Below:
$("#grid").kendoGrid({
navigatable: true,
sortable: true,
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
Why does CheckboxModel deselect all selected rows on page change when using paging toolbar? How do I stop the deselection of rows on page change?
I see there is a pruneRemoved which can be used to prevent the pruning of nodes, I set it to false, but the deselect is still fired. Not sure what else to try.
I'm assuming checkboxmodel registers with the store or maybe pagingtoolbar to be notified when the store changes...then deselects everything? Why? I need to prevent that.
Edit:
The reason I don't want the deselectAll to be fired is; I attach a handler on select and deselect. Select adds rows to another grid, deselect removes them. So when the user checks a checkbox that row is added to another grid, when they uncheck it it is removed from that grid. By the grid firing a deselectAll, when the store changes, I lose all my saved rows in the other grid.
I'm not sure if this is the correct way to do this but it's working for me.
What I did was create my own Ext.grid.View. I extended ext.view.Table and over-road the onMaskBeforeShow method. This is the method that was calling deselect all on the grids selection model. As you can see I commented it out here
Ext.define('Ext.grid.SteveView', {
extend: 'Ext.view.Table',
alias: 'widget.stevegridview',
onMaskBeforeShow: function(){
var me = this,
loadingHeight = me.loadingHeight;
//me.getSelectionModel().deselectAll();
me.all.clear();
if (loadingHeight && loadingHeight > me.getHeight()) {
me.hasLoadingHeight = true;
me.oldMinHeight = me.minHeight;
me.minHeight = loadingHeight;
me.updateLayout();
}
}
});
Include the above script, then when you create a grid, change the viewType to stevegridview, or whatever you decide to name it
{
xtype: 'grid',
viewType:'stevegridview',
store:'some store'
...
}
The new view type will be used a the new onMaskBeforeShow() will be called.
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.
I have an EXT js grid that uses the CheckboxSelectionModel. The grid is paged. The first column is check-boxes and this columns header is a check box as well. When the column header box is clicked, it selects/delesects all rows on the page, and only that page. The problem is that if on one page you select all, and then go to another, the column header box is still checked. the records are not selected which is correct, it's just the top one that is not updated. I found the code that fires when switching pages. I already have a selModel var set up. I found a condition to check whether or not the column header should be checked, I just don't know how to updated it. can anyone give me an idea how to do this?
Have you tried adding a listener to your grid's data store:
listeners : {
'load' : function() {
grid.getSelectionModel().clearSelections();
}
}
Hopefully the clearSelections() method will also uncheck the header checkbox.