CODEWITHSUNDEEP
asp.net-mvc-4gridviewdevexpress
ajokar
ajokar

Reputation: 115

how to set the devexpress alternative(zebra) grid in asp.net mvc

how can i set an alternative (zebra) rows in my devexpress asp.net mvc grid? can anybody help me? thanks.

@using System.Drawing
@using ClearEnginVB_MVC.App_Start
@using DevExpress.XtraRichEdit.Import.OpenXml
@{
var grid = Html.DevExpress().GridView(settings =>
{
settings.Name = "GridViewWorkFlow";
settings.CallbackRouteValues = new { Controller = "WorkFlow", Action =    "GridViewWorkFlowPartial" };
settings.SettingsPager.Summary.Text = @OrderManagementSystem.Resources.Page + " {0} " +  @OrderManagementSystem.Resources.Of + " {1} ({2} " + @OrderManagementSystem.Resources.Items + ")";   
settings.ClientSideEvents.EndCallback = "EndCallback";
settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "WorkFlow", Action =  "GridViewWorkFlowPartialAddNew" };
settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "WorkFlow", Action = "GridViewWorkFlowPartialUpdate" };
settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "WorkFlow", Action = "GridViewWorkFlowPartialDelete" };
settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
settings.SettingsBehavior.ConfirmDelete = true;
settings.CommandColumn.Visible = true;
settings.CommandColumn.NewButton.Visible = false;
settings.CommandColumn.Visible = true;
settings.CommandColumn.DeleteButton.Visible = true;
settings.CommandColumn.EditButton.Visible = false;
settings.CommandColumn.DeleteButton.Text = @OrderManagementSystem.Resources.Remove;
settings.CommandColumn.EditButton.Text = @OrderManagementSystem.Resources.Edit;
settings.CommandColumn.Caption = @OrderManagementSystem.Resources.Operation;
settings.Name = "id";
settings.Columns.Add("WorkFlowID").Visible=false;
settings.Columns.Add("Name").Caption=OrderManagementSystem.Resources.WorkFlowName;
settings.Columns.Add("WorkFlowTypeName").Caption =    OrderManagementSystem.Resources.WorkFlowTypeName;
settings.Columns.Add("ProductTypeName").Caption = OrderManagementSystem.Resources.ProductTypeName;
settings.Columns.Add("Description").Caption = OrderManagementSystem.Resources.Description;    
settings.CommandColumn.VisibleIndex = settings.Columns.Count - 1;
settings.CommandColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image;
});
}@grid.Bind(Model).Html()

what settings should i set in this sample code, note:this is not my complete code.

Upvotes: 1

Views: 1805

Answers (2)

ajokar
ajokar

Reputation: 115

with the help of Extensions i found the solution, here is the correct answer and it works good. i should just add this two lines of code to my partialDevexpressGrid

//Alternate Grid Settings for devexpress asp.net mvc grid
settings.Styles.AlternatingRow.Enabled = DefaultBoolean.True;
settings.Styles.AlternatingRow.BackColor = Color.FromArgb(240, 240, 255);

thank you all

Upvotes: 4

nempoBu4
nempoBu4

Reputation: 6631

I have found this in DevExpress Support Center. You can just add additional check for even row: e.VisibleIndex % 2 == 0.
Here is example:

settings.HtmlRowPrepared = (sender, e) =>
    {
        if (e.RowType != GridViewRowType.Data) return;

        ASPxGridView grid = sender as ASPxGridView;

        if (grid.Selection.IsRowSelected(e.VisibleIndex)) return;
        if (grid.FocusedRowIndex == e.VisibleIndex) return;
        if (e.VisibleIndex % 2 == 0) return;

        e.Row.BackColor = System.Drawing.Color.LightCoral;
    };
settings.ClientSideEvents.FocusedRowChanged = "function(s, e){ e.processOnServer = true; }";
settings.ClientSideEvents.SelectionChanged = "function(s, e){ e.processOnServer = true; }";

Upvotes: 0

Related Questions