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.
Hi Martin,
Tanx for the tip to use the TR element. this works fine but again as soon as i try to Use the column value if get nothing, I did what you said and checked the console and indeed I got an Syntax error:
I used the following 2 statements the first did work but the second didn't show anything
"<tr {{if 0 == '0'}} class='rowCriticalAttention'{{/if}} > <td> ${NO001_ID} </td></tr>"
"<tr {{if ${NotificationStatus} == '0'}} class='rowCriticalAttention'{{/if}} > <td> ${NO001_ID} </td></tr>"
Do you have any idea what the problem can be?
Daniël van Cann
There is DEF a bug in the conditional row logic....
I have this simple case and the infragistics.js throws an error stating it cant find the start. It works fine if it is this:
"<td> {{if ${DrugClass} == 'C-I'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{else}} ${DrugClass}{{/if}}</td>" +
BUT THIS DOES NOT WORK
"<td> {{if ${DrugClass} == 'C-I'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif ${DrugClass} == 'C-II'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif ${DrugClass} == 'C-III'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif ${DrugClass} == 'C-IV'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif ${DrugClass} == 'C-V'}}<span class='criticalAttention'>${DrugClass}</span>" + "{{else}} ${DrugClass}{{/if}}</td>" +
Just in case someone runs into this again you have to put round brackets around the evaluation:
For instance here is the original IF that did not work:
"<td> {{if ${DrugClass} == 'C-I'}}<span class='criticalAttention'>${DrugClass}</span>" +"{{elseif ${DrugClass} == 'C-II'}}<span class='criticalAttention'>${DrugClass}</span>" +"{{elseif ${DrugClass} == 'C-III'}}<span class='criticalAttention'>${DrugClass}</span>" +"{{elseif ${DrugClass} == 'C-IV'}}<span class='criticalAttention'>${DrugClass}</span>" +"{{elseif ${DrugClass} == 'C-V'}}<span class='criticalAttention'>${DrugClass}</span>" +"{{else}} ${DrugClass}{{/if}}</td>" +
Here is the new IF.. check out each of the evaluation of if:
"<td> {{if (${DrugClass} == 'C-I')}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif (${DrugClass} == 'C-II')}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif (${DrugClass} == 'C-III')}}<span class='criticalAttention'>${DrugClass}</span>" + "{{elseif (${DrugClass} == 'C-IV')}}<span class='attention'>${DrugClass}</span>" + "{{elseif (${DrugClass} == 'C-V')}}<span class='attention'>${DrugClass}</span>" + "{{else}} ${DrugClass}{{/if}}</td>" +
Each one has (...) around what evaluates to TRUE or FALSE.. I have no idea how the example in the example on line is actually working. The only difference i see is that it is using numbers rather than strings, like in my example. Hopefully this will save someone some time....