Add Columns Dynamically at specific index to existing RadGrid - asp.net

I have to add custom column runtime on specific location to exiting telerik grid.
string[] customColumns = ds.Tables[2].Rows[0]["CustomColumns"].ToString().Split(',');
int startIndex = 7;
for (int i = 0; i < customColumns.Length; i++)
{
GridBoundColumn NewColumn = new GridBoundColumn();
tableGrid.MasterTableView.Columns.AddAt(startIndex, NewColumn);
NewColumn.HeaderText = customColumns[i].Replace("[", "").Replace("]", "");
NewColumn.DataField = customColumns[i].Replace("[", "").Replace("]", "");
NewColumn.Visible = true;
NewColumn.FilterControlWidth = Unit.Percentage(70);
NewColumn.HeaderStyle.CssClass = "setHeader";
NewColumn.HeaderStyle.Width = 130;
NewColumn.AllowFiltering = true;
NewColumn.OrderIndex = startIndex;
startIndex++;
}
Using this block of code column added successfully at given location but when I used existing grid filter functionality then position of column is changed and even I can't see value in column.

You will need to define an OrderIndex for the columns, and when adding a new one to the grid, you will know which OrderIndex to use. Check out the Reordering columns programmatically article for your reference.

Related

How to create multi items/records or save item/record array at one time in client script file

I want to create multiple records at the same time using client script. This is what I'm doing:
var ceateDatasource = app.datasources.Reservation.modes.create;
var newItem = ceateDatasource.item;
newItem.User = user; //'eric'
newItem.Description = description; //'000'
newItem.Location_Lab_fk = lab.value.Id; //'T'
newItem.Area_fk = area.value.Id; //'L'
newItem.Equipment_fk = equipment.value.Id; //'S'
for(var i = 0 ; i < 3; i ++) {
newItem.Start_Date = startDate;
newItem.Start_Hours = '03';
newItem.Start_Minutes = '00';
newItem.End_Date = startDate;
newItem.End_Hours = '23';
newItem.End_Minutes = '30';
// Create the new item
ceateDatasource.createItem();
}
But the result I'm getting is this one:
The three records are created but the only the first one has data. The other two records have empty values on their fields. How can I achieve this?
Thanks.
Update(2019-3-27):
I was able to make it work by putting everything inside the for loop block. However, I have another question.
Is there any method like the below sample code?
var recordData = [Data1, Data2, Data3]
var ceateDatasource;
var newItem = new Array(recordData.length) ;
for(var i = 0 ; i < recordData.length; i ++) {
ceateDatasource = app.datasources.Reservation.modes.create;
newItem[i] = ceateDatasource.item;
newItem[i].User = recordData[i].user;
newItem[i].Description = recordData[i].Description;
newItem[i].Location_Lab_fk = recordData[i].Location_Lab_fk;
newItem[i].Area_fk = recordData[i].Area_fk;
newItem[i].Equipment_fk = recordData[i].Equipment_fk;
newItem[i].Start_Date = recordData[i].Start_Date;
newItem[i].Start_Hours = recordData[i].Start_Hours;
newItem[i].Start_Minutes = recordData[i].Start_Minutes;
newItem[i].End_Date = recordData[i].End_Date;
newItem[i].End_Hours = recordData[i].End_Hours;
newItem[i].End_Minutes = recordData[i].End_Minutes;
}
// Create the new item
ceateDatasource.createItem();
First, it prepares an array 'newItem' and only calls 'ceateDatasource.createItem()' one time to save all new records(or items).
I try to use this method, but it only saves the last record 'newItem[3]'.
I need to write a callback function in 'ceateDatasource.createItem()' but Google App Maker always show a warning "Don't make functions within a loop". So, are there any methods to call 'createItem()' one time to save several records? Or are there some functions like 'array.push' which can be used?
Thanks.
As per AppMaker's official documentation:
A create datasource is a datasource used to create items in a particular data source. Its item property is always populated by a draft item which can be bound to or set programmatically.
What you are trying to do is create three items off the same draft item. That why you see the result you get. If you want to create multiple items, you need to create a draft item for each one, hence all you need to do is put all your code inside the for loop.
for(var i = 0 ; i < 3; i ++) {
var ceateDatasource = app.datasources.Reservation.modes.create;
var newItem = ceateDatasource.item;
newItem.User = user; //'eric'
newItem.Description = description; //'000'
newItem.Location_Lab_fk = lab.value.Id; //'T'
newItem.Area_fk = area.value.Id; //'L'
newItem.Equipment_fk = equipment.value.Id; //'S'
newItem.Start_Date = startDate;
newItem.Start_Hours = '03';
newItem.Start_Minutes = '00';
newItem.End_Date = startDate;
newItem.End_Hours = '23';
newItem.End_Minutes = '30';
// Create the new item
ceateDatasource.createItem();
}
If you want to save several records at the same time using client script, then what you are looking for is the Manual Save Mode. So all you have to do is go to your model's datasource and click on the checkbox "Manual Save Mode".
Then use the same code as above. The only difference is that in order to persist the changes to the server, you need to explicitly save changes. So all you have to do is add the following after the for loop block:
app.datasources.Reservation.saveChanges(function(){
//TODO: Callback handler
});

update edited cells within treetable after expand/collapse items

I have a treeTable with editable cells within the expanded rows. The editable cells get a dirty flag after editing (in the example the background color is set to red).
The problem i'm running into is that i found no certain way to update the dirty flag on expand/collapse (edited cells get the css class 'edited-cell').
At the moment the code looks like that:
// each editable textfield gets a Listener
textField.attachLiveChange(
var source = oEvent.oSource;
...
jQuery('#' + source.getId()).addClass(EDITED_CELL_CLASS, false)
// list with cell ids, e.g. "__field1-col1-row1"
DIRTY_MODELS.push(model.getId()) //*** add also binding context of row
)
// the table rows are updated on toggleOpenState
new sap.ui.table.TreeTable({
toggleOpenState: function(oEvent) {
...
this.updateRows() // see function below
}
})
// update Rows function is also delegated
oTable.addDelegate({ onAfterRendering : jQuery.proxy(this.updateRows, oTable)});
//http://stackoverflow.com/questions/23683627/access-row-for-styling-in-sap-ui5-template-handler-using-jquery
// this method is called on each expand/collapse: here i can make sure that the whole row has it's correct styling...
// but how to make sure that special cells are dirty?
function updateRows(oEvent) {
if (oEvent.type !== 'AfterRendering'){
this.onvscroll(oEvent);
}
var rows = this.getVisibleRowCount();
var rowStart = this.getFirstVisibleRow();
var actualRow;
for (var i = 0; i < rows; i++){
actualRow = this.getContextByIndex(rowStart + i); //content
var row = this.getRows()[i]
var obj = actualRow.getObject()
var rowId = row.getId()
updateStyleOfRows(obj, rowId, actualRow)
updateDirtyCells(rowId) //*** how to get the binding context in this function???
}
};
// update Dirty Cells in function updateRows():
function updateDirtyCells(rowId){
for (var i = 0; i < DIRTY_MODELS.length; i++){
var dirtyCellId = DIRTY_MODELS[i]
//*** make sure that only the correct expanded/collapsed rows will be updated -> depends on the bindingContext of the row
jQuery('#' + rowId).find('#' + dirtyCellId + '.editable-cell').addClass(EDITED_CELL_CLASS, false)
}
}
This doesn't work correctly, because the ids of the cells change on each layout render (e.g. collapse/expand rows). Please see attached image.
Let me know if i should provide more information.

How to select only first 100 rows on Gridview

I have gridview that contains check boxes in one of the columns, then there is a "Select ALl" button which when clicked has to check top 100 CBs on the list, the client specifically stated they do not want pagination, it much easier to do this with pagination and display only 100 records per page then when the select all button is clicked everything on the given page gets selected however this is not what the client wants
Here is my code:
foreach (GridViewRow row in dgridTransactions.Rows)
{
for (int x = 0; x <=100;x++ )
{
var oneTransaction = (CheckBox)row.FindControl("chkAssigned");
oneTransaction.Checked = true;
}
}
If you want to run first hundred rows you only need this loop
for(int x = 0; x < 100; x++)
{
GridViewRow row = dgridTransactions.Rows[x];
// then manage row properties
CheckBox cb = (CheckBox)row.FindControl("chkAssigned");
cb.Checked = true;
}
using RowIndex you can keep track of row number.
foreach (GridViewRow row in dgridTransactions.Rows)
{
if(row.RowIndex<100 )
{
var oneTransaction = (CheckBox)row.FindControl("chkAssigned");
oneTransaction.Checked = true;
}
else
break;
}
There is issue in your code
You can use the below code
int x=0;
foreach (GridViewRow row in dgridTransactions.Rows)
{
if(x<100 )
{
var oneTransaction = (CheckBox)row.FindControl("chkAssigned");
oneTransaction.Checked = true;
}
else
break;
x++;
}
The foreach (GridViewRow row in dgridTransactions.Rows) loop runs for each row in your grid.
and in that you are using for (int x = 0; x <=100;x++ ){ which runs 100 times for every row.
You can use jquery or javascript for this Here is a JSFiddle which can help you
How about:
foreach (GridViewRow row in dgridTransactions.Rows.Cast<GridViewRow>().Take(100)) {
CheckBox cb = row.FindControl("chkAssigned") as CheckBox;
if (cb != null)
cb.Checked = true;
}
This will give the first items up to 100, so if you only have 90, it will give 90.
The diferent way of casting will also give you an additional security measure in case it fails to find the control. A direct cast will just throw an exception, which is always heavier then checking if the castes object is not null...
If you dont care about the cast verification, you can just inline everything into this:
dgridTransactions.Rows.Cast<GridViewRow>().Take(100).ToList().ForEach(x => ((CheckBox)x.FindControl()).Checked = true);

On selected index change drop down list is not bind

On drop down list selected Index Change i want bind Drop Down List according the condition.
I am doing this and data is showing if i am using break point but On Front End Drop Down List is not Bind. it shows blank.
My code is given below:
SqlParameter[] param6 = new SqlParameter[]
{ new SqlParameter("#status","drivershow"),
new SqlParameter("#FromDateWithStartTime",driverdate),
new SqlParameter("#dayvalue",dayvalue),
};
List<clsDropDown> assigneddriver = comnFunctionObj.getDropDownList(clsConstant.SP_GET_CAR_BOOKING_STATUS, param6);
ddldriver.Items.Clear();
for (int i = 0; i < assigneddriver.Count; i++)
{
if (!ddldriver.Items.Contains(new ListItem(assigneddriver[i].DisplayFieldText.Trim(), assigneddriver[i].ValueFieldText.Trim())))
{
ddldriver.Items.Add(new ListItem(assigneddriver[i].DisplayFieldText.Trim(), assigneddriver[i].ValueFieldText.Trim()));
}
}
Make sure you bind the data after adding items to DropDownlist as:ddldriver.DataBind();
ddldriver.Items.Clear();
for (int i = 0; i < assigneddriver.Count; i++)
{
// add items
}
// now bind the Data to the Dropdownlist
ddldriver.DataBind();
Check also if assigneddriver list is not null.

DevExpress ASPxComboBox Items Color Change from Code Behind

I have a ASPxComboBox for which I'm binding data based on 2 conditions.
Now,I need to show Color for items in combobox based on condition.
My Code :
var dataMainBranchUsers = (from xx in VDC.SURVEY_USER_DETAILS
where xx.BRANCH_ID == 1 && (xx.USER_LEVEL == 2 || xx.USER_LEVEL == 5)
select new
{
xx.USER_NAME,
xx.USER_ID,
xx.USER_LEVEL
}).ToList();
DataTable dtMainBranchUsers = LINQToDataTable(dataMainBranchUsers);
for (int i = 0; i < dtMainBranchUsers.Rows.Count; i++)
{
string strlevel = dtMainBranchUsers.Rows[i]["USER_LEVEL"].ToString();
string struser = dtMainBranchUsers.Rows[i]["USER_NAME"].ToString();
if (strlevel == "2")
{
dtMainBranchUsers.Rows[i]["USER_NAME"] = struser + " - Admin";
}
else
{
dtMainBranchUsers.Rows[i]["USER_NAME"] = struser + " - Survey User";
}
}
Cmb_UserName.TextField = "USER_NAME";
Cmb_UserName.ValueField = "USER_ID";
Cmb_UserName.DataSource = dtMainBranchUsers;
Cmb_UserName.DataBind();
Now, I need to differentiate based on USER_LEVEL and show colors.
Is this possible?
From DevExpress
I'm afraid, the ASPxListBox (which is the part of the ASPxComboBox) doesn't allow to set specific color for each item.
I suggest you to use the ASPxDropDownEdit. This control allows to put anything in its DropDownWindowTemplateContainer.
For example, you can put the ASPxGridView and set color for each row using the HtmlRowPrepared event handler.
See here.

Resources