In my RadGrid (early 2014 version) I have this:
<ClientSettings>
<ClientEvents OnBatchEditOpening="batchEdit" />
</ClientSettings>
Then I have this js function:
function batchEditInitialInvestments(sender, args) {
...
}
This is working great mostly, I can grab (inside the js) the column uniquename that was clicked and other useful properties. I can also get the total number of rows in the grid. What I just can't find is which row was clicked (edited in batch mode), by index. For example, say there are 3 rows in my radgrid and the middle/2nd row is clicked/edited. How can I discover that "index 1" was clicked?
I have scoured the API docs at the following locations:
http://www.telerik.com/help/aspnet-ajax/grid-getting-familiar-with-client-side-api.html
http://www.telerik.com/help/aspnet-ajax/grid-onbatcheditopening.html
You can retrieve the cell of the selected row from the master table view as shown below.
function batchEditInitialInvestments(sender, args) {
var grid = $find('<%=RadGridName.ClientID%>');//can also use the sender parameter
var master = grid.get_masterTableView();
var selected = master.get_selectedItems();
var row = selected[0];
var cell = master.getCellByColumnUniqueName(row, "ColumnUniqueName");
//cell is the cell of the selected row
}
Related
I am using Kendo UI grid without pagination. I have set the below code to load the data in the grid view while scrolling
scrollable: { virtual: true },
My problem is, I have selected 100th row in the grid by scrolling . I am refreshing the grid. After refresh, I need to select the 100th row again. Is it possible ?
Regards
Senthil
After refresh select the row you need as shown below
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(100)");
For more info check out kendo DOC http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select
Basically the question is annotate the row that you have selected when it changes to do so and then in dataBound event select that same row.
In order to save the selected row you can do:
change: function (e) {
// Save some information from the selected row
var item = this.dataItem(this.select());
// Here we save uid
var uid = item.uid;
this.selectedRow = uid;
},
dataBound: function (e) {
// If we have any row selected
if (this.selectedRow) {
// Use this.select for selecting it
this.select("tr[data-uid='" + this.selectedRow + "']");
}
}
You can see this here: http://jsfiddle.net/OnaBai/eLk7zkzs/
I have a RadGrid in with all rows in EditForm mode. This Radgrid has virtual scrolling. I need to jump (scroll) to a specific row.
I've tried several options. To put a row in select is not applicable in this case. I now have tried:
RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);
in the ItemDataBound, but the :
function scrollItemToTop(itemID) {
$('.rgVragenPanel').scrollTo(0, $telerik.$($get(itemID)).offset().top);
}
does not seem to work.
Any thoughts on how to best tackle this?
try this Scrolling to the Selected Item
I select the item in the code behind in the databound event.
Set one of the items in the control as selected.
Provide a handler for the client-side GridCreated event.
In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.
Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.
Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing.
The following example demonstrates this technique:
CopyJavaScript
<script type="text/javascript">
function GridCreated(sender, eventArgs) {
//gets the main table scrollArea HTLM element
var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
var row = sender.get_masterTableView().get_selectedItems()[0];
//if the position of the selected row is below the viewable grid area
if (row) {
if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
//scroll down to selected row
scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
}
//if the position of the the selected row is above the viewable grid area
else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
//scroll the selected row to the top
scrollArea.scrollTop = row.get_element().offsetTop;
}
}
}
Notice : The function does not work on page postbacks. you should triger directly from javascript (i notice that the ongridcreated event of the grid is not fired on the Telerik example).
So a better way is to handle the scrolling with JQuery like this :
1) Create a function for a specific grid
2) At the telerik code replace the sender with var sender = $find("<%= RadGrid1.ClientID%>");
3) $(window).load(function () {
thefunctiontoscrollthegrid();});
This is how my table looks:
a checkBox column
a name column
The table contains 5 rows.
What I want to achieve is to make the last two rows of the table unselectable (the respective checkboxes in the checkBox column should also disappear).
I managed to do this with jQuery after the table was rendered. Does the SlickGrid table allow me to perform the above mentioned scenario?
You can add a function for returning getItemMetadata() which is demonstrated in this example.
Here's a simplified version:
function getItemMetaData(row){
if (row >= view.getLength() - 2){ //only on last two rows.
return { selectable: false };
} else {
return {};
}
}
var view = new Slick.Data.DataView();
view.getItemMetadata = getItemMetaData;
var grid = new Slick.Grid(selector, view, cols, opts);
This method is then called in canCellBeSelected at line 2944 in slick.grid.js
Is there a way to add a new row to a slickgrid on demand? For example, have a button on the page that shows the new row when clicked.
It can be done easily using dataView.addItem(params), just replace params with your parameters..
function addNewRow(){
var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "Controller": tempcont, "SrNo1": tempsrno };
dataView.addItem(item);
}
here id, Controller, SrNo1 are ids of colunm
You can add a row dynamically, such as with a button click, by subscribing the "onAddNewRow" listener to your grid object. As many have suggested, it is best to use the dataView plugin to interface with your data. Note that you'll want the "enableAddRow" option set to "true".
Firstly, DataView requires that a unique row "id" be set when adding a new row. The best way to calculate this is by using dataView.getLength() which will give you the number of rows that currently exist in you grid (which we'll use as the id for the new row). The DataView addItem function expects an item object. So we create an empty item object and append the id to it.
Secondly, you'll be only focusing a single cell when you add your data. After you've entered that data (by blurring that cell), DataView will notice that you have not entered data for any of the remaining cells in the row (of course) and will default their values to "undefined". This is not really a desired effect. So what you can do is loop through the columns you've explicitly set and append them to our item object with a value of "" (empty string).
Thirdly, we don't want all the cells to be blank. Actually, we want the original cell's entered data to appear. We have that data so we can set it last so that it will overwrite the "" (empty string) value we previously set.
Lastly, we'll want to update the grid such that it displays all of these changes.
grid.onAddNewRow.subscribe(function (e, args) {
var input = args.item;
var col = Object.keys(input)[0]
var cellVal = input[Object.keys(input)[0]]
// firstly
var item = {};
item.id = dataView.getLength();
// secondly
$.each(columns, function(count, value) {
colName = value.name
console.log(colName)
item[colName] = ""
})
// thirdly
item[col] = cellVal
dataView.addItem(item);
// lastly
grid.invalidateRows(args.rows);
grid.updateRowCount();
grid.render();
grid.resizeCanvas();
});
I hope this helps. Cheers!
You can always add new rows to the grid. All you need to do is add the data object for the row to your grid data.
Assume you create your grid from a data source - myGridData (which is an array of objects).
Just push the new row object to this array. Call the invalidate method on the grid.
Done :)
Beside creating the new row, I needed it to be shown, so that the user can start writing on it. I'm using pagination, so here is what I did:
//get pagination info
var pageInfo = dataView.getPagingInfo();
//add new row
dataView.addItem({id: pageInfo.totalRows});
//got to last page
dataView.setPagingOptions({pageNum: pageInfo.totalPages});
//got to first cell of new row
var aux = totalRows/ pageInfo.pageSize;
var row = Math.round((aux - Math.floor(aux)) * pageInfo.pageSize, 0);
grid.gotoCell(row, 0 ,true);
Before I use pagination, I just needed this:
var newId = dataView.getLength();
dataView.addItem({id: newId});
grid.gotoCell(newId, 0 ,true);
var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);
Working fine for me.
I am populating Grid2 from the records selected from Grid1. however The records added are getting replaced by the new set of records from Grid1 whenever i select and add again. below is my code. This is only for the UI. I thought of appending the new records as below. Please guide with the correct code
function StuffData(data) {
var g = jQuery('#Grid2');
var usersList = data;
var totalRecords= jQuery('#Grid2').jqGrid('getGridParam','records');
alert('Grid records' +totalRecords);
if (usersList!=null) {
g.jqGrid('clearGridData',false);
for(var i=0;i<=usersList.length;i++){
// g.jqGrid('addRowData',i+1,usersList[i]);
g.jqGrid('addRowData',totalRecords+1,usersList[i]);
totalRecords += 1;
// g.jqGrid('addRowData',0,usersList);
}
}
}
The call to clearGridData is removing the old rows from the grid. From the jqGrid documentation:
clearGridData
Clears the currently loaded data from grid. If the clearfooter parameter is set to true, the method clears the data placed on the footer row.
If you only want to append data, you should be able to just remove this line of code. Or am I missing something?