Expand all items in RadGrid Hierarchy - telerik

I am using a RadGrid (2009 Q2) with a hierarchy. Is there a way in the client api to expand all rows and vice-versa?
thanks!
Update:
I have written a javascript function based off the api documentation suggested by Dick Lampard below to expand/collapse all rows in a radgrid with three levels. It expands all the mastertableview rows and all the nested detailtableview rows in both sub levels of the first mastertableview row, but it breaks when it goes the to detailtableview rows for the second mastertableview row (whew!). The error I am getting is "_350 is undefined". This is coming from a Telerik.Web.UI.WebResource file.
function ExpandCollapseAll(expand) {
var grid = $find("<%= rgHistory.ClientID %>");
master = grid.get_masterTableView();
var masterRowCount = master.get_dataItems().length;
for (masterIndex = 0; masterIndex < masterRowCount; masterIndex++) {
if (expand) {
master.expandItem(masterIndex);
}
else {
master.collapseItem(masterIndex);
}
}
var detailTables = grid.get_detailTables();
var detailTableCount = detailTables.length;
for (detailTableIndex = 0; detailTableIndex < detailTableCount; detailTableIndex++) {
var detailTable = detailTables[detailTableIndex];
var rowCount = detailTable.get_dataItems().length;
for (rowIndex = 0; rowIndex < rowCount; rowIndex++) {
if (expand) {
//expandItem is failing! detailTableIndex and rowIndex are correct
detailTables[detailTableIndex].expandItem(rowIndex);
}
else {
detailTables[detailTableIndex].collapseItem(rowIndex);
}
}
}
}
ANY IDEAS?!?!

There is client API for hierarchy expansion as well as ExpandHierarchyToTop() server method. Check out this demo.
Dick

If you would like to see all the hierarchy levels, Set HierarchyDefaultExpanded to the MasterTableView and all the GridTableViews. See this link for more details.

Try This
protected void Page_PreRenderComplete() {
if (!Page.IsPostBack) {
foreach (GridItem item in MyGrid.MasterTableView.Controls[0].Controls) {
if (item is GridGroupHeaderItem)
if (item.GroupIndex.ToString() != "0")
item.Expanded = !item.Expanded;
}
}
}

after radGrid.DataBind()
use this Mehtod
private void ExpanadAllRadGridNodes()
{
foreach (GridDataItem item_L1 in radgridQuestionGroups.MasterTableView.Items)
{
foreach (GridTableView item_L2 in (item_L1 as GridDataItem).ChildItem.NestedTableViews)
{
foreach (GridDataItem item_L3 in item_L2.Items)
{
item_L3.Expanded = true;
}
}
}
}

Related

Why I can't change style in mxEvent.CHANGE event first time?

I just want to change some style when the CHANGE event fired.But when I change the model by insert or move a vertex or edge, the style didn't change. And the changed vertex will change it's style after I change anything again. Is anybody konws why?
Here is my code:
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
if(graphInited){
graph.getModel().beginUpdate();
try {
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
var state = graph.view.getState(change.cell);
if(state!=null){//color #1C86EE means new insert
if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE"
&& state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE"
&& state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
}
}
}
} finally {
graph.getModel().endUpdate();
}
}
});
I made more recon and fond simpler solution than in my first answer.
You need to add:
evt.consume()
graph.refresh()
So final code would looks like:
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
if(graphInited){
graph.getModel().beginUpdate();
evt.consume();
try {
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
var state = graph.view.getState(change.cell);
if(state!=null){//color #1C86EE means new insert
if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE"
&& state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE"
&& state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
}
}
}
} finally {
graph.getModel().endUpdate();
graph.refresh();
}
}
});

Gridview not showing data for a particular field in linq

I want to data in gridview for a particular mail_id. but wheneven i add this where condition its not showing anything. please help
if (!IsPostBack)
{
var mail = lblmail.Text;
var result = from test in je.jobposting orderby test.post_date where test.c_j_email==mail select test;
foreach (var items in result)
{
gvjob.DataSource = result;
gvjob.DataBind();
}
}
Is this better?
{
var mail = lblmail.Text;
// here, I assume jobposting is a DataTable
if (0 < je.jobposting.Rows.Count) {
var result = from test in je.jobposting orderby test.post_date where test.c_j_email==mail select test;
if (result.Any()) {
gvjob.DataSource = result;
gvjob.DataBind();
} else {
Response.WriteLine("No Match for c_j_email=" + mail + ".");
}
} else {
Response.WriteLine("<b>No Data in jobposting DataTable!</b>");
}
}

Telerik: RadComboBox How do delete all the items and add a new list

I am using a telerik radcombobox for a drop down list inside a user control in a web forms application. I need to delete all the items in the box, let's say id is ddlVeihicleMake and repopulate it with a new list of item passed to the function. Here is an example of what I understand it should be like,
function addNewItems(selectRef, optionsArray, valuesArray) {
var combo = document.getElementById("ctl00_cpMain_ctl01_appRadPaneltabVehicleInformation_i0_i0_tabVehicleInformation_ddlVehicleMake_Input");
combo.get_items().clear();
for (var idx = 0; idx < optionsArray.length; idx++) {
if (valuesArray == "") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
} else {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
}
}
It fails for me on get_items().clear() and get_itmes().add(comboItem). Appreciate any help I can get.
Thanks!
Try something like this:
function DeleteItems(sender, args)
{
var combo = window.$find("<%= cboMyComboBox.ClientID %>");
combo.trackChanges();
for (var i = 0; i < combo.get_items().get_count(); i++) {
combo.get_items().remove(combo.get_items().getItem(i));
}
combo.commitChanges();
}

How can I change the dropdownlist's options?

I'm a newbie in asp.net so I'm hoping you could give me some help on my dropdownlist bound to a table.
Here's the scenario:
I have a table Account with fields UserId, UserName and Type. The Type field contains 3 items: 'S', 'A', and 'U'. Each user has his own Type. I have a dropdownlist named 'ddlType' which is already
bound on the Account table. However, I want the options of the dropdownlist to be displayed as 'Stakeholder', 'Approver', and 'User' instead of displaying letters/initials only. Since I do not prefer making any changes in the database, how can I change those options through code behind?
Here's my code:
public void BindControls(int selectedUserId)
{
DataTable dtAccount = null;
try
{
dtAccount = LogBAL.GetAccountDetails(selectedUserId);
if (dtAccount.Rows.Count > 0)
{
lblUserId.Text = dtAccount.Rows[0]["UserId"].ToString();
txtUserName.Text = dtAccount.Rows[0]["UserName"].ToString();
ddlType.SelectedValue = dtAccount.Rows[0]["Type"].ToString();
}
}
catch (Exception ex)
{
throw ex;
}
finally
{
dtAccount.Dispose();
}
}
Any help from you guys will be appreciated. Thanks in advanced! :D
You can bind Dropdownlist in codebehind.
Get your data "Type" into array. Make array two dimentional and assign values to it.
After having data your array will looks like this,
string[,] Types = { { "Stakeholder", "S" }, { "Approver", "A" }, { "User", "U" } };
Now assign values to Dropdown,
int rows = Types.GetUpperBound(0);
int columns = Types.GetUpperBound(1);
ddlType.Items.Clear();
for (int currentRow = 0; currentRow <= rows; currentRow++)
{
ListItem li = new ListItem();
for (int currentColumn = 0; currentColumn <= columns; currentColumn++)
{
if (currentColumn == 0)
{
li.Text = Types[currentRow, currentColumn];
}
else
{
li.Value = Types[currentRow, currentColumn];
}
}
ddlType.Items.Add(li);
}
I haven't tested it but hopefully it will work.

Column sort reset of ascending/descending on 3rd click

Suppose we've a grid with sortable columns.
If a user clicks on a column, it gets sorted by 'asc', then if a user clicks the column header again, it gets sorted by 'desc', now I want similar functionality when a user clicks the column third time, the sorting is removed, i.e. returned to previous style, the css is changed back to normal/non-italic etc?
Today I was trying to achieve same thing. I've skimmed through SlickGrid code but didn't find any 'Reset' function. So, I've tweaked the slick.grid.js v2.2 a little bit.
Basically you just need to add a new array - 'latestSortColumns' which will store sort columns state (deep copy of internal SlickGrid sortColumns array).
var latestSortColumns = [];
Optionally add new setting to opt-in for sort reset.
var defaults = {
(...),
autoResetColumnSort: false
};
Change setupColumnSort to reset sort after third click on column's header.
function setupColumnSort() {
$headers.click(function (e) {
// temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
e.metaKey = e.metaKey || e.ctrlKey;
if ($(e.target).hasClass("slick-resizable-handle")) {
return;
}
var $col = $(e.target).closest(".slick-header-column");
if (!$col.length) {
return;
}
var column = $col.data("column");
if (column.sortable) {
if (!getEditorLock().commitCurrentEdit()) {
return;
}
var sortOpts = null;
var i = 0;
for (; i < sortColumns.length; i++) {
if (sortColumns[i].columnId == column.id) {
sortOpts = sortColumns[i];
sortOpts.sortAsc = !sortOpts.sortAsc;
break;
}
}
**if ((e.metaKey || (options.autoResetColumnSort && latestSortColumns[i] != null && latestSortColumns[i].sortAsc === !column.defaultSortAsc)) && options.multiColumnSort) {**
if (sortOpts) {
sortColumns.splice(i, 1);
**latestSortColumns.splice(i, 1);**
}
}
else {
if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
sortColumns = [];
}
if (!sortOpts) {
sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
sortColumns.push(sortOpts);
} else if (sortColumns.length == 0) {
sortColumns.push(sortOpts);
}
}
setSortColumns(sortColumns);
if (!options.multiColumnSort) {
trigger(self.onSort, {
multiColumnSort: false,
sortCol: column,
sortAsc: sortOpts.sortAsc}, e);
} else {
trigger(self.onSort, {
multiColumnSort: true,
sortCols: $.map(sortColumns, function(col) {
return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
})}, e);
}
}
});
}
Store new state after every sort change in latestSortColumns:
function setSortColumns(cols) {
sortColumns = cols;
var headerColumnEls = $headers.children();
headerColumnEls
.removeClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
$.each(sortColumns, function(i, col) {
if (col.sortAsc == null) {
col.sortAsc = true;
}
var columnIndex = getColumnIndex(col.columnId);
if (columnIndex != null) {
headerColumnEls.eq(columnIndex)
.addClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
}
});
**for (var i = 0; i < sortColumns.length; i++)
latestSortColumns[i] = { columnId: sortColumns[i].columnId, sortAsc: sortColumns[i].sortAsc };**
}
That's all, should work now.
This is a function I call to reset all columns back to their original order.
It requires one of columns to be set up as not sortable.
In the example below I use the first column of the table, columns[0], which has the field id "locus".
function removeSorting() {
columns[0].sortable = true;
$('.slick-header-columns').children().eq(0).trigger('click');
columns[0].sortable = false;
// clear other sort columns
grid.setSortColumns( new Array() );
}
Then in the typical dataView.sort() function you make an exception for this column:
grid.onSort.subscribe(function(e,args) {
var cols = args.sortCols;
dataView.sort(function (dataRow1, dataRow2) {
for( var i = 0; i < cols.length; i++ ) {
var field = cols[i].sortCol.field;
// reset sorting to original indexing
if( field === 'locus' ) {
return (dataRow1.id > dataRow2.id) ? 1 : -1;
}
var value1 = dataRow1[field];
var value2 = dataRow2[field];
if( value1 == value2 ) continue;
var sign = cols[i].sortAsc ? 1 : -1;
return (value1 > value2) ? sign : -sign;
}
return 0;
});
});
Will the table always be sorted in some order on some column?
If not then you'll have to store a lot of state the first time a column is clicked just in case you want to restore it after a third click.

Resources