Hi,
I'm trying to port some of my plain ASP.NET Grid view code over to Webgrid. I went through the documentation and the forum here, I can't seem to find an answer on how to accomplish the following two tasks that I'm already doing it Gridview.
#1 Below gridview definition shows a image button on gridview, when the user clicks on it, the gridview _SelectedIndexChanged is fired, I can look up the gridview.SelectedDataKey[0] and popup a panel for the user. I know you have an Edit template, but my popup window is lot more involved than fit into a Edit template. I was looking at the Unboundfield to show this edit image, but how do I let the user click on it and which event gets me the selectedrows's datakey (I'm setting the Datakeyfield already)
<
asp:CommandField ButtonType="Image" HeaderStyle-Width="30px" SelectImageUrl="img/edit.png" ShowSelectButton="True">
<ItemStyle HorizontalAlign="center" />
</asp:CommandField>
#2 Instead of the CommandField above, I have the Buttonfield that fires a command which I capture in gridview_RowCommand event and check it as
if
(e.CommandName == "myCommand")....
do something.
asp:ButtonField ButtonType="Image" CommandName="myCommand" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="6%" HeaderText="CommandTest" ImageUrl="img/X-icon.png" ItemStyle-HorizontalAlign="Center">
How do I accomplish both these tasks in Webgrid?
Thanks
Hi mohanrs,
Thank you for your kind replies and feedback. Glad that you were able to implement you datasource switch and styling requirements. Just as a note a CSS class structured as the one you have provided is applied to individual cell items which would allow styling of not only columns but individual cells.
Feel free to contact me with any additional issues or questions which may arise during your transition process.
Just FYI,I created a new style as below and used it on columns with long text that are wrapping around. this worked for me.
tbody > tr > td.colWordWrapfalse { overflow:auto; white-space:nowrap; }
yes, ClearDataSource() did the trick with the double binding issue. The blog about cell styling is very helpful. Should have been part of grid documentation at first place.
With this, I'm almost done with porting the grid code from existing asp.net gridview for one page. I said 'almost', not done yet :-). One thing pending is word-wrap.... This is as simple as setting ItemStyle-Wrap="False" in the ASP.NET Gridview. but I can't do this in css because this IE only css style "text-wrap:suppress" is not supported by any new major browsers, not even IE 9. Any suggestions?
This is another example of a limitation with IG non-standard object model. In ASP.NET Gridview, I can either set the css style OR set the inline style directly such as HorizontalAlign or Wrap etc. for the item/header/row/col. This method is more flexible and is followed by other vendors too in their implementation of the grid. But the IG data grid forces us to use only css styles. and some of the style I can't even find a 1-to-1 matching in css such as this word wrap.
You have been very helpful, accurate and timely. I only have 55 more pages and 100 more gridviews to port over, so I will be bothering you a little more in the future if I get stuck :-). Posting on the forum and getting answer from experts like you seems to be much faster than opening a case using my Priority support and waiting for weeks for an answer.
Thanks again,
Mohan
Hi Mohan,
Thank you for you replies and feedback. Regarding using column setttings the following article regarding configuring Editor Providers is a place where one can see an example of this feature being used (however column settings are available across multiple behaviors to allow fine-grained customization).
Regarding customizing and applying CSS to specific parts of WebDataGrid, I would suggest that take a look at the following blog which explains the different classes and selectors required to style specific parts of the grid:
http://blogs.infragistics.com/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx
As per your issues with double binding data in the grid based on a dropdown selection, you can perhaps make use of the ClearDataSource() method prior to binding to your second data source. There is a similar discussion on this topic with an approach which may allow you to bind the grid only once (without the need to handle dropdown events).
http://blogs.infragistics.com/forums/t/58659.aspx
Please let me know if this answers your questions.
Petar,
Just to followup on my above post. I am able to set the individual cell Font color to Red or Blue inside the WebDataGrid InitializeRow event with the below code
if (e.Row.Items[8].Text.ToLower() == "yes") e.Row.Items[8].CssClass = "colorRed"; else e.Row.Items[8].CssClass = "";
But, no matter what I tried. I can't seem to align the text to center or right. I can only change the whole grid's text-align in the IG style. Any thoughts.
The other issue I noticed is, when I set the EnableDataViewState = true; weird things happen. As the data being updated on the client side is for previous update. So I reverted back to setting that to false and keeping DataBind in the Page_Load (outside the IsPostback check). but in this case, there's two databind (as expected), one on the page_load and the other on my drop down event. but the problem is the data sent back to the client side has data from first databind (with values from prev selection of drop down) plus the data from second databind (with values from current selection of drop down) which is undesirable.
I'm calling the same function for Databind passing the drop down value selected. I tried the ResetToDefault() on the WebDataGrid with no help. still getting both data because of two databinds.. any ideas on how to work around this?
Thanks,