Datagrid itemrenderer performance issue - flex4

I have a datagrid with a custom itemrenderer for coloring cells, rows and columns.When i change the color of row sometimes it is perfectly shown but sometimes one or more cells are not colored. I didn't find the reason behind. Can anybody please give any hints on that?
Here is my custom itemrenderer code below..
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
bd.setStyle("backgroundColor",getStyle("bgColor"));//bordercontainer
lbl.setStyle("fontSize",getStyle("fontSize"));//label in //that bordercontainer
lbl.setStyle("fontFamily",getStyle("fontFamily"));
lbl.setStyle('color', getStyle("fgColor"));
}
and I'm using AdvancedDatagrid and using styleFunction in it..
public function applyFormat(data:Object,col:AdvancedDataGridColumn):Object {
var obj:Object = new Object();
for each(var taskFontFormatVo:TaskFontFormatVo in data.taskFontFormats){
if(!taskFontFormatVo.barchartView ){
if(col.headerText == taskFontFormatVo.columnName){
var bgColor:String = "0x"+taskFontFormatVo.bgColor;
var fgColor:String = "0x"+taskFontFormatVo.fgColor;
var fontSize:Number = taskFontFormatVo.fontSize;
var fontFamily:String = taskFontFormatVo.fontFamily;
obj.bgColor = bgColor;
obj.fgColor = fgColor;
obj.fontSize = fontSize;
obj.fontFamily = fontFamily;
break;
}
}
}
return obj;
}

Related

Adding a swipe to next gesture using Syncfusion.SfChart

Currently on my app when the user selects their 'symptom' they are directed to the detail page which shows their symptom chart with the populated feedback data from their selected symptom.
Is their a way i can add a swipe gesture to allow the user to swipe to the next symptom chart without having to go back to main symptoms page and selecting a symptom.
Currently this is how i populate my chart :
public async Task GetSymptomFeedback(string id)
{
SymptomFeedbackData.Clear();
symptomChart.Series.Clear();
BusyIndicator.IsRunning = true;
SymptomFeedbackData = await symptomsfeedbackmanager.getUserSymptomFeedback(id);
foreach (var FeedbackItem in SymptomFeedbackData)
{
FeedbackItem.Idusersymptomid = FeedbackItem.Id + ',' + FeedbackItem.Usersymptomid;
}
IEnumerable<SymptomFeedback> OrdreredFeedbackData = SymptomFeedbackData.OrderBy(X => X.DateTime);
LineSeries columnseries = new LineSeries
{
ItemsSource = OrdreredFeedbackData,
XBindingPath = "DateTime",
YBindingPath = "Intensity",
DataMarker = new ChartDataMarker
{
ShowLabel = true,
ShowMarker = true,
MarkerHeight = 5,
MarkerWidth = 5,
MarkerColor = Xamarin.Forms.Color.Purple
}
};
BusyIndicator.IsRunning = false;
symptomChart.PrimaryAxis.ShowTrackballInfo = true;
if (columnseries.ItemsSource != null)
{
symptomChart.Series.Add(columnseries);
}
symptomChart.ChartBehaviors.Add(new ChartTrackballBehavior());
//Sort Collection by datetime
SymptomsList.ItemsSource = OrdreredFeedbackData.Reverse();
}
Solution:
Through your code, we can see you query the data through the id of symptom. So, I guess you pass this id as parameter when you go to the detail page from main symptoms page.
Is their a way i can add a swipe gesture to allow the user to swipe to
the next symptom chart without having to go back to main symptoms page
and selecting a symptom.
In additional, you can pass a array of id of all symptoms to detail page. Let's name this array as symptomIdArray.
Then add a SwipeGestureRecognizer to your view.
var DownSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
var UpSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
DownSwipeGesture.Swiped += OnSwiped;
UpSwipeGesture.Swiped += OnSwiped;
this.Content.GestureRecognizers.Add(DownSwipeGesture);
this.Content.GestureRecognizers.Add(UpSwipeGesture);
In the OnSwiped, you can get last or next id through the symptomIdArray and currentID , and then you can choose to reload your current page or go to a new page to swipe to the next symptom chart, here is code:
public Array symptomIdArray; // ids of all symptom
public string currentID; // You selected id of current symptom
void OnSwiped(object sender, SwipedEventArgs e)
{
int index = Array.IndexOf(symptomIdArray, currentID);
switch (e.Direction)
{
case SwipeDirection.Up:
if (index ==0)
{
//first one
break;
}
string lastID = (string)symptomIdArray.GetValue(index-1);
//1.You can refresh current page with lastId
GetSymptomFeedback(lastID);
//2.You can go to a new page with lastID ID and symptomIdArray
Navigation.PushAsync(new NewPage(lastID, symptomIdArray));
break;
case SwipeDirection.Down:
// Handle the swipe
if (index == symptomIdArray.Length-1)
{
//Last one, no more
break;
}
string nextID = (string)symptomIdArray.GetValue(index+1);
//1.You can refresh current page with next currentID
GetSymptomFeedback(nextID);
//2.You can go to a new page with nextID ID and symptomIdArray
Navigation.PushAsync(new NewPage(nextID, symptomIdArray));
break;
}
}
Update:
Add SwipeGestureRecognizer:
SfChart chart = new SfChart();
chart.Title.Text = "Chart";
//Config chart....
...
chart.Series.Add(series);
this.Content = chart;
var DownSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
var UpSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
DownSwipeGesture.Swiped += OnSwiped;
UpSwipeGesture.Swiped += OnSwiped;
chart.GestureRecognizers.Add(DownSwipeGesture);
chart.GestureRecognizers.Add(UpSwipeGesture);
And onSwipe:
void OnSwiped(object sender, SwipedEventArgs e)
{
switch (e.Direction)
{
case SwipeDirection.Up:
Console.WriteLine("up");
break;
case SwipeDirection.Down:
Console.WriteLine("down");
break;
}
}
Let me know if you have any question.

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();
}
}
});

Radgrid insertItem from client side

How can i get radgrid insert items from clientside.
I have used the following code, but its not working.
var mode = rgBoxLimits.get_isItemInserted();
var insertItems;
var dpToDate;
if (mode) {
insertItems= rgBoxLimits.get_insertItem();
dpToDate = insertItems[0].findElement("dtToDate"); //Not working
}
For edit items, i have the following code and its working fine.
var editedItems = rgBoxLimits.get_editItems();
var dpToDate = editedItems[0].findElement("dtToDate");
The problem is that you are running the get_isItemInserted() and get_insertedItem() method on a RadGrid object, while they are methods for a GridTableView object. See the RadGrid Documentation for more info.
Try this:
function getItems(sender, args) {
var myRadGrid = document.getElementById("MainContent_RadGrid1");
var grid = window.$find("MainContent_RadGrid1");
var mode = grid.get_masterTableView().get_isItemInserted();
mode = true;
var insertItems;
var dpToDate;
if (mode) {
insertItems = grid.get_masterTableView().get_insertItem();
dpToDate = insertItems[0].findElement("dtToDate"); //Not working
}
}

Obtaining a hidden column value from the selected row in a Telerik RadGridView

How do I obtain the selected row value for a hidden column in a Telerik RadGridView? The column is hidden on the aspx page and I would like to retrieve the value on the client side (JavaScript).
Essentially, I want to display a name in the grid view and be able to retrieve a value from the hidden field "ID" to bring up an edit form.
Here is an example of how I'm hiding the RadGridView column.
code sample:
onKeyPressEvent(sender, args) {
var variable = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
var PartyID = args.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
} else { return true;
}
}
theForm.onkeypress = variable
}
Thanks for your help...
maybe you're going the wrong way. There is a property called "ClientDataKeyNames" on the mastertableview. You can add several key separated by a comma in this property. Then you'll be able to get your value without adding an extra column.
You should do something like this:
function onKeyPressEvent(sender, args) {
if (args.get_keyCode() == 13) {
var dataItem=sender.get_selectedItems()[0];
var PartyID = dataItem.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
}
else {
return true;
}
}
good luck

Expand all items in RadGrid Hierarchy

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;
}
}
}
}

Resources