Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel van Cann
210
iggrid change row background color depending on cell value
posted

I'm creating a vb.net MVC3 application to view notification statusses online, for the overview i am using the following  code:


@(Html.Infragistics().Grid(Model) _
.ID("grid2") _
.AutoGenerateColumns(False) _
.Columns(Function(columns)
columns.For(Function(c) c.NO001_ID).HeaderText("Number").Width("80")
columns.For(Function(c) c.NotificationName).HeaderText("Description (short)").Width("170")
columns.For(Function(c) c.NotificationDescription).HeaderText("Description (long)").Width("400")
columns.For(Function(c) c.NotificationStatus).HeaderText("Status").Width("80")
columns.For(Function(c) c.NotificationTime).HeaderText("Notified date and time").Width("150")
End Function) _
.Features(Function(features)
features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("Next")
features.Sorting().Mode(SortingMode.Multiple).ColumnSettings(Function(settings)
settings.ColumnSetting().CurrentSortDirection("descending").ColumnKey("NotificationStatus")
settings.ColumnSetting().CurrentSortDirection("descending").ColumnKey("NotificationTime")
End Function)
features.Selection().Mode(SelectionMode.Row).MultipleSelection(True)
features.Filtering().Mode(FilterMode.Simple)
End Function) _
.ClientDataSourceType(ClientDataSourceType.JSON) _
.DataSourceUrl(Url.Action("GetNotificationList")) _
.DataBind() _
.Width("100%") _
.Height("500") _
.LocalSchemaTransform(True) _
.Render())

the grid is shown, only i have 2 problems, first the CurrentSortDirection is shown in the columnheader but is not applied on the datasource?

and second I want to change the row or cell background color depending on the status of an notification, i tried searching on google but can't find any good example please help?

Parents
  • 23953
    Verified Answer
    Offline posted

    Hi Daniel van Cann,

    Daniel van Cann said:
    the grid is shown, only i have 2 problems, first the CurrentSortDirection is shown in the columnheader but is not applied on the datasource?

    datasource is not modified by igGrid. Instead igGrid uses a copy of the dataSource and modifies it. All igGrid features use this copy to modify the data. $.ig.DataSource has dataView method which you can use to access the data rendered by the igGrid.

    Here is the example code:

    [code]

    $("#grid1").data("igGrid").dataSource.dataView()

    [/code]

    Daniel van Cann said:
    and second I want to change the row or cell background color depending on the status of an notification, i tried searching on google but can't find any good example please help?

    You can check Conditional Row Template sample which shows how to do that.

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc. 

Reply
  • 210
    posted in reply to Martin Pavlov

    The sorting I fixed, many thanks. 

    the Conditional Row Template is a good example but there is no .vbhtml file availible, and my gues is that I have a smal syntax error in my row template code

    i've tried multiple syntaxes but can't get it to work, this is my latest version, maybe anyone knows what i'm doing wrong?


    .RowTemplate("<tr><td> {{if parseInt(${NotificationStatus}) == 0}}" +
    "<span class='criticalAttention'>${NO001_ID}</span>" +
    "{{elseif parseInt(${NotificationStatus}) == 1 || parseInt(${NotificationStatus}) == 2 }}" +
    "<span class='attention'>${NO001_ID}</span>" +
    "{{else}} ${NO001_ID}{{/if}}" + "</td>" +
    "<td>{{if parseInt(${NotificationStatus}) == 0}}" +
    "<span class='criticalAttention'>${NotificationName}</span>" +
    "{{elseif parseInt(${NotificationStatus}) == 1 || parseInt(${NotificationStatus}) == 2}}" +
    "<span class='attention'>${NotificationName}</span>" +
    "{{else}} ${NotificationName}{{/if}}" + "</td>" +
    "<td>{{if parseInt(${NotificationStatus}) == 0}}" +
    "<span class='criticalAttention'>${NotificationDescription}</span>" +
    "{{elseif parseInt(${NotificationStatus}) == 1 || parseInt(${NotificationStatus}) == 2}}" +
    "<span class='attention'>${NotificationDescription}</span>" +
    "{{else}} ${NotificationDescription}{{/if}}" + "</td>" +
    "<td>{{if parseInt(${NotificationStatus}) == 0}}" +
    "<span class='criticalAttention'>${NotificationStatus}</span>" +
    "{{elseif parseInt(${NotificationStatus}) == 1 || parseInt(${NotificationStatus}) == 2}}" +
    "<span class='attention'>${NotificationStatus}</span>" +
    "{{else}} ${NotificationStatus}{{/if}}" + "</td>" +
    "<td>{{if parseInt(${NotificationStatus}) == 0}}" +
    "<span class='criticalAttention'>${NotificationTime}</span>" +
    "{{elseif parseInt(${NotificationStatus}) == 1 || parseInt(${NotificationStatus}) == 2}}" +
    "<span class='attention'>${NotificationTime}</span>" +
    "{{else}} ${NotificationTime}{{/if}}" + "</td></tr>") _


Children