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?
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 PavlovInfragistics, Inc.
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>") _
Hi,
From what I see the template is correct.
Did you check the browser error console? If there is JavaScript parsing error you will see it there.
Look also at the generated JavaScript code which is generated by the MVC Wrapper and see if it is correct.
You can try to construct the grid by adding one column at a time in the RowTemplate and test if it works. This way you will isolate the problem.
Best regards,
Martin Pavlov
Infragistics, Inc.
I tried this:
.RowTemplate("<tr><td> <span class='rowCriticalAttention'>${NO001_ID}</span> " + "</td></tr>") _
and it worked but only the text backgroud color is set, I don't know if that is normal?
than I tried this:
"<tr><td> {{if parseInt(${NotificationStatus}) == 0}}<span class='rowCriticalAttention'>${NO001_ID}</span> {{else}} ${NO001_ID} {{/if}}" + "</td></tr>") _
and nothing happend, only the header and column names where shown.
Daniel van Cann
Hi Daniel,
Daniel van Cann said: .RowTemplate("<tr><td> <span class='rowCriticalAttention'>${NO001_ID}</span> " + "</td></tr>") _ and it worked but only the text backgroud color is set, I don't know if that is normal?
Yes this is normal. CSS standard defines box for each element (the so called Box Model).
You are applying style to the SPAN element, but you should apply the class to the TR element if you want the row to be colored.
I just want to highlight my entire row if the condition matches but its not working.
.RowTemplate("<tr {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}></tr>")
It gives error: Unable to get value of the property 'replace': object is null or undefined
For this reason I have to add for each cell which works
.RowTemplate("<tr><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${MarketDate}</td><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${NGXAbMketMonVolGJ}</td><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${TransCanadaMonVolGJ}</td><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${Ratio} %</td><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${NGXAbMketMonVolPJ}</td><td {{if parseInt(${Ratio}) < 30 }} class='highlight-danger' {{/if}}>${TransCanadaMonVolPJ}</td></tr>")
I dont think this is a good idea to do in every cell. Is there any better alternative or other way for this?
Hello Sarojanand,
Unfortunately this is a Known Limitation of igGrid as described in Setting attributes to table rows with a row template not possible.
Best regards,Martin PavlovInfragistics, Inc.