I'd prefer for either string or int but would settle for it based on bit.
The Goal is if the value of a String field == 'blah blah blah' that it will turn that whole row grey(blue table with red and green already used on it so I'm open to any other colour suggestion)
I've tried
.RowAction(row => { if (row.DataItem.[Bound Data col Name] == "[String value]") { row.HtmlAttributes["style"] = "background:grey;"; } })and
.RowAction(row => { if (row.DataItem.[Bound Data col Name] == "[String value]") { row.Grid.HtmlAttributes["style"] = "background:grey;"; } })and
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))function onRowDataBound(e) { if (e.dataItem.[Bound Data col Name] == "[String value]") { e.row.style.backgroundColor = "grey"; }}all of these didn't work in the slightest and these are the only clear examples for mvc on how to do this so anybody got any ideas?
Also asked on SO
17 Answers, 1 is accepted
I am sending a sample project showing how to do both server and client conditional formatting.
Regards,Atanas Korchev
the Telerik team
Rank 1
Rank 1
.ClientEvents(e => e.OnDataBound("onDataBound"))with
function onDataBound(e) { if (e.dataItem.C1D > DateTime.Today.AddDays(183)) { e.cell.style.backgroundColor = "green"; } if (e.dataItem.C1D > DateTime.Today.AddDays(30)) { e.cell.style.backgroundColor = "orange"; } if (e.dataItem.C1D > DateTime.Today) { e.cell.style.backgroundColor = "red"; } if (e.dataItem.C1D <= DateTime.Today) { e.cell.style.backgroundColor = "purple"; }}and upon reaching this page it would break into code and say
"Microsoft JScript runtime error: 'dataItem.C1D' is null or not an object" and "Microsoft JScript runtime error: 'cell.style' is null or not an object" and then display the page with all the dates in the grid so those items aren't null but is there otherwise some other code/format I should be using to perform this function?And also looked at http://demos.telerik.com/aspnet-mvc/grid/customformatting in regards to .cellaction like below
.CellAction(cell =>{ if (cell.Column.Title == "Title Name") { if (cell.DataItem.C1D > DateTime.Today.AddDays(183)) { //Set the background of this cell only cell.HtmlAttributes["style"] = "background:red;"; } }})and I had to change .Name to .Title since it didn't recognise .Name, but I get the error msg "Error 1 Operator '>' cannot be applied to operands of type 'string' and 'System.DateTime' " so seems I won't be able to perform this complex a task in a cell action.
Lastly I've tried another method http://stackoverflow.com/questions/5271326/telerik-grid-custom-formatting-based-on-multiple-date-ranges which so far has proven unsuccessful.
Rank 1
Rank 1
http://www.telerik.com/community/forums/aspnet-mvc/grid/cellaction-doesn-t-seem-to-work.aspx
and wondering if this is still the case and if so would I still be able to have a telerik grid do what I need it to be able to do if I change it to server-side and what would be the steps to change my present Ajax binding to server-side since with looking at the demo it leaves a lot out unless it rly is that basic?
Rank 1
As you may know we don't guarantee responses by Telerik staff in the mvc forums. This is highlighted in our support help topic. If you need guaranteed support within 24 business hours you may consider purchasing a commercial license.
Please refer to the sample attached by my colleague Atanas which illustrate conditional formatting as well to this online demo.
Rosen
the Telerik team
Rank 1
"({[Posted on Apr 7, 2011
http://www.telerik.com/community/forums/aspnet-mvc/grid/cellaction-doesn-t-seem-to-work.aspx
and wondering if this is still the case and if so would I still be able to have a telerik grid do what I need it to be able to do if I change it to server-side and what would be the steps to change my present Ajax binding to server-side since with looking at the demo it leaves a lot out unless it rly is that basic?]})"
[The above for example would at least require a "Yes it's still true" or no and then possibly an explanation as to where I could of coded wrongly or a link to a detailed example where cell action is implemented from the server-side aspect which as far as I can see neither demo touchs on. http://demos.telerik.com/aspnet-mvc/grid/serverbinding or http://demos.telerik.com/aspnet-mvc/grid/customformatting]
tried fixing the messed up layout this post turns into but no luck so if a mod wants to try go ahead cos I've had no luck
Up to your questions:
- If your employer has purchased a commercial license ask them to add you as a licensed developer so you can benefit from our dedicated support.
- StackOverflow is NOT an official way to receive support from Telerik. You should not expect any replies there. Use the Telerik forums or support tickets. You can submit a support ticket if you are added as a license developer.
- CellAction and RowAction work only for server binding. They do not work during ajax binding and will never work as there is no way to execute server code (C# or VB.NET) in the browser (which understands only JavaScript).
- The attached demo is using RowAction and the OnRowDataBound event to demonstrate how to format the rows of the grid. The first grid ("Grid1") is server bound. The second grid ("Grid2") is ajax bound.
- Your code does not work because you are using the OnDataBound event instead of OnRowDataBound. Those events are different and serve different purposes. OnDataBound is raised on time when the whole grid is bound (hence its name). This is the reason e.dataItem is undefined. You should use OnRowDataBound which is raised for every row during ajax binding. There e.dataItem is available. The usage of OnRowDataBound is demonstrated in the sample application which I attached earlier.
In a word - use OnRowDataBound if your grid is ajax bound. Use RowAction or CellAction if your grid is server bound.
If you need further instructions please modify the attached sample project per your requirements and attach it back. We will look into it.
Atanas Korchev
the Telerik team
Rank 1
1. I'll look into that.
2. I know SO isn't official but it opens up access to a larger number of users which increases the chance of getting an answer.
3. It's as I thought then, Otherwise is there any links you know of which go into more detail as to all the steps needed to instead setup the grid server-side compared to Ajax side since I have a very simple grid which display 3 different things a string field, 6x date fields(with 4 datetime if statements for each col or which need to be applied to all the data fields) and 1 redirect field which passes the record ID.
4. Looking into that to see what modifications I can do and then will send it back.
5. In regards to the OnDataBound well it seems to be ideal since it would be code which applies to every date field on the grid the question would be how to code the rest of it, I didn't think OnRowDataBound would be useful here since as far as I knew it would affect the whole row but I've since found out that it can just affect a single cell too if coded like
if (e.dataItem.C1D == "01/03/2011") { e.row.cells[1].style.backgroundColor = "green"; }if (e.dataItem.C1D > DateTime.Today.AddDays(30))Only way I right now see this working is if I setup some variable from jquery Date but this would lead to a whole new headache so I can imagine the best 3 solutions would be either I change from ajax too server-side / I set it up in the Model DTO to handle the colour change etc and finally some kind of jscript code to perform like
if (e.dataItem.C1D > DateTime.Today.AddDays(30))And here are my replies:
2. I agree with this but in your Stackoverflow question you expected guaranteed replies from me. Have in mind that I am checking Stackoverflow mostly in my spare time. This means that I may not check stackoverflow at all for a very long time.
3. I don't understand your question but you can check the server binding example and help topic.
5. The JavaScript Date object is quite different from the DateTime .NET type. Still I think you can use its API to perform a range check. This help topic lists all members of the JavaScript Date object.
Of course you can always use server-side binding and perform all formatting and checks on the server side. The aforementioned help topics and examples show how to configure the grid for server binding. Actually I think it is a lot simpler than ajax binding as it does not involve an extra action method as ajax binding.
Regards,
Atanas Korchev
the Telerik team
Rank 1
Well after completing the new project I was given I'm back to this.
1. Looks like I was mistaken and we didn't have a license, either that or some other part of my organisation does but doesn't have any spare licenses.
2. I wasn't expecting guaranteed replies I but at the time I had mentioned not seeing you on for 2days on SO I hadn't gotten a reply from any other staff or you on here in 3 days yet had seen other support staff reply to other topics so it was just to check to see if others were reading my topic or if it had been marked as assigned only to you. (I thought u may have gone on holiday or something but since this forum doesn't show other user activity I couldn't tell for sure)
3. Well I'm very used to ajax data binding to telerik grids and haven't ever done it server side but since there should be less than 5 users who would use this then that shouldn't be a problem it's just that server side is a fair bit different or at least it seems so from the demos and guides which didn't go into much detail.
4. I've made some changes and tried out a number of different things but so far with using the example project you sent I found that cell action didn't seem to function correctly and that it didn't seem to like how I was setting up the database connection (since it didn't display any data or indication that there was any data in the database) to try it out on another page but in a way similar to what I would end up doing in my actual project, So I've attached the updated example project with what I tested so you can see exactly what the problems are.
Edit:-Changed a bit of cell action and got it to only colour the whole col instead of all col and all rows.
.CellAction(cell => { if (cell.Column.Title == "Name") { if (cell.DataItem.Name == "One") { cell.HtmlAttributes["style"] = "background:red"; } } })5. I don't think jscript is the way to go with the date calculations but if I could set it up to feed in an object to a client template or get the jscript to accept one from a model/controller then that might work since then I might be able to do the calculations in one of those and feed it into the model to a colourflag object or directly to the view.
Up to your points:
1) Unfortunately in that case we cannot provide dedicated support to you.
2) As I mentioned many times before Telerik does not guarantee a reply to posts in the MVC forum or stackoverflow. Telerik guarantees a reply within 24 hours for licensed customers only.
3) I do not understand your point here. Could you clarify?
4) The CellAction works as designed even in your modified project. Also it has nothing to do with database connections. The Grid does not access your database in any way. It works with the provided IEnumerable or IQueryable. Again I don't see any problem with the attached project. The grid works as told so:
- make all cells of the first row red (set the background of the TD elements to red)
- make the entire second row grey (set the background of the TR element to grey)
You have also added this comment:
"//This function seems broken since it doesn't affect a single cell but instead the whole row and if set to "One" would affect row 1 and 2 but if set too "Two" would only affect row 2"
This is of course expected. RowAction is raised for every single row (hence its name). Setting the HtmlAttributes will apply them to the TR element rendered for the grid.
I suggest you tell us what the expected result is so I can explain why the current code does not achieve it. Attaching a screenshot of the desired outcome would be of help.
And lastly - RowAction and CellAction work only for server binding scenarios as there is no way to run server-side code (C#) in the browser during Ajax binding.
5) I don't see any other way to work with JavaScript dates than JavaScript. Also if you use Ajax binding all your code which works with the data should occur in the browser hence it should use JavaScript. If you don't feel comfortable with JavaScript then you should avoid using grid ajax binding and fall back to server binding where you can use C#.
Regards,
the Telerik team
Rank 1
3. I was explaining that I have no experience before using server side and I've only done ajax so was asking if there was any link or info in regards from switching from using 1 to the other. (the rest was just me thinking out loud that my project will be ok with server side since it's only for max of 5 users to use and not 100's like some of my other projects)
4. Well I'm expecting cellaction to only affect a single cell not the whole col or the whole row, as you can see in my could its been setup to only turn the 1st record and 2nd col which is the name col red, what I don't want it to do is change the whole name col red or what it seems to be everything under the result which makes the colour change requirement.
So is this not possible with cellaction?
5. My point wasn't in regards to dates anymore with jscript but instead I was asking in regards to being able to fit an object into the client template which could mean I might be able to use jscript to pull or receive a colour flag which would basically just mean I could figure out the colour in the model or controller and send that to the page and the client template could pull that colour from a hidden value or something on the page/jscript and display the cell in that colour.
6. In the mean time I've already managed to do a less than ideal work around which I don't think works completly but still got some things to tweak, what I did was in the controller grid action I put all the conditions for the dates and set the displayed values values for the grid as the 4 colours so instead of a date you would get "green" then based on that value I would display the cell with that colour.
<script type="text/javascript"> function onRowDataBound(e) { if (e.dataItem.C1D == "green") { e.row.cells[1].style.backgroundColor = "green"; }List<...DTO> stList = new List<...DTO>(); (...).ToList().ForEach(x => { ...DTO dts = new ...DTO(); if (x.C1ED > DateTime.Today.AddMonths(6)) { dts .C1D = "green"; } else if (x.C1ED > DateTime.Today.AddMonths(1)) { dts .C1D = "orange"; }assign all the dates too them
hide all the present col values which say the colour those cells should be
then change the jscript slightly to look at those values but change the cells where the dates are displayed.
If I get all the controller conditions working then as far as I understand what I described above should work.
I hope.
4) Let's analyze your code again:
.CellAction(cell =>
{
if (cell.DataItem.Name == "One")
{
cell.HtmlAttributes["style"] = "background:red";
}
})
Note the if check - it checks if DateItem.Name is equal to "One". This is true for BOTH cells of the FIRST row. As a result the background of both cells is set to red which makes the whole row red (it contains two cells only). If you want to make only one cell red (say ID) you should do it like this:
.CellAction(cell =>
{
if (cell.DataItem.Name == "One" && cell.Column.Title == "ID")
{
cell.HtmlAttributes["style"] = "background:red";
}
})
Note that we added another check to see which column does the cell belong to. I think now it is clear why you think that CellAction does not work - it works but you tell it to apply background to all cells of the first row.
As for the rest points - I find it very difficult to follow your point. I hope everything regarding CellAction is clear now and there is nothing more to discuss in this thread. I have attached a modified version showing how to apply color only to the first cell of the first row (the ID column).
Atanas Korchev
the Telerik team
Rank 1
So row 1 col 2 = One but row 2 col 2 = Two
Yet both row 1 col 2 and row 2 col 2 would be red
This is why I said I thought it was broken since the 2nd nested "if" was conditional on "One" not "Two" yet it was affecting both.
In regards too "As for the rest points - I find it very difficult to follow your point."
I don't know how much clearer I can make em but I'll try.
"3. I was explaining that I have no experience before using server side and I've only done ajax so was asking if there was any link or info in regards from switching from using 1 to the other. (the rest was just me thinking out loud that my project will be ok with server side since it's only for max of 5 users to use and not 100's like some of my other projects)"
3. Basically I have only used ajax binds before
The demo's and help sections lacks/doesn't go into very much detail in regards to server side
So if there any other site or info you can provide for server side?
I was specifically asking if it was directed towards ajax users switching to server side.
I provided in the example proj I uploaded how I attemped too setup the grid with server side and was hoping you could look at that and correct what I did wrong.
5. Last time you talked about it you only touched on the 1st point I had made in regards to dates with jscript so I tried to re-explain the rest of what I said but doesn't seem like that helped so I hope this does.
//.ClientTemplate("<# { #><span style='color:[object]'>[object]</span><# } #>")Finally with point 6. This is an alternative way I found to get around it would allowed me to use ajax but I was having problems with my date conditions so was hoping you could have a look at it to see if you could spot where I was going wrong.
Unfortunately we are not making any progress with this forum thread. The attached project shows how only the first cell is colored which means that the CellAction works as expected.
I am locking this thread as I don't think we can add anything useful to it.
If you experience other problems you may consider opening another forum thread with the following things present:
1) A sample application showing the problem
2) Clear explanation what the expected behavior is.
Regards,
the Telerik team