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
Petar,
I was looking at EnableDataViewState and EnableClientRendering yesterday. I could have figured this out, but not SortingColumnSetting. Is this documented somewhere that I could have stumbled upon myself?
Thank you again for timely and accurate response. One final thing I need to ask you before I letting you go is about column alignment. I want to align my header different than the item. Since there's no inline Horizontal align setting either for the header or item, I created a css style (with Text-Align) and assign it to Header-CssClass and CssClass of the BoundData field. but it doesn't seem to have any effect on how the Header or item is aligned. I've set grid's style to IG. so, the item cell attributes like Align and Forecolor can only be changed by css? I need to change the Forecolor of certain cells dynamically at run time in the InitializeRow event, if css is the only way, then I need to create separate styles for all possible combinations. If I can set the attribute like Forecolor directly as in the plain Gridview, it's simpler
Let me know your thoughts.
Mohan
Hi Mohan,
Thanks for your reply. Glad that you were able to make progress with your implementation.
Regarding your databinding question, you may set the EnableDataViewState property of WebDataGrid to true in order to keep the grids data in viewstate. With that setup, the grid does not need to be rebound on every postback. More information on using data view state with WebDataGrid may be found at:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2/CLR4.0/?page=WebDataGrid_Getting_Started_with_WebDataGrid_EnableDataViewState_Property.html
As for disabling sorting on specific columns (in your scenario the templated ones) - specific column settings may be added to the grid's Sorting behavior, for instance:
<ig:Sorting> <ColumnSettings> <ig:SortingColumnSetting ColumnKey="TemplateField_0" Sortable="False" /> <ig:SortingColumnSetting ColumnKey="TemplateField_1" Sortable="False" /> </ColumnSettings> </ig:Sorting>
Please note that if using sorting in a grid with EnableDataViewState set to true, the grid needs to be rebound when sorting by handling the ColumnSorted serverside event:
protected void WebDataGrid1_ColumnSorted(object sender, SortingEventArgs e) { WebDataGrid1.DataSource = populateGrid(); WebDataGrid1.DataBind(); }
Attached is the modified sample illustrating these changes.
Please do not hesitate to contact me if you have any questions.
Thank you so much for your quick response and the helpful sample. It did take me a while to get it to work, but it's working now. I assumed few things like I don't need to Databind the grid again while the Imagebutton is clicked, but I was wrong. In the sample I attached earlier, I was only Databinding on initial page load (not on Postback) and also for Column Sorted event I was Databinding again. So, for this Image button click or ItemCommand event to fire, I needed to Databind on the page load everytime (even on all postbacks). so, I was baffled on why your sample would work as is and mine didn't reach the breakpoint inside the button click event or ItemCommand event. Then I figured I had to Databind the grid on Page_Load outside of IsPostback check.
So, my question is Do I really need to Databind on all postbacks for this ItemCommand to work? In my scenario, I have to just redirect the user to another page or show a popup there based on DataKey selected. Rebinding the data back to the client at this point seems wasteful to me. I can certainly live with this if there's no alternative, but let me know if I can avoid the Databinding here, so it's more efficient.
On a related note, I am getting Asynch postback error when I enable the Sorting and click on the Templatecolumn. Is there any way I can disable the sorting on Template columns or only enable it on specific columns? Easy way to reproduce this is to add
ig:Sorting />
to your sample and click on either of the Template column header at run time.
Thanks again for you quick assistance,
Regards,
Thank you for your reply. We appreciate that you took the time to convey your comments and I assure you that we consider our customer feedback to be crucial for steering improvements at Infragistics. Your comments will be forwarded to the appropriate management for review and consideration.
Regarding your issue with subscribing a server-side handler for CellSelectionChanged - this can be achieved through the selection behavior, for instance:
As per for displaying an ImageButton (or any other control) inside a WebDataGrid's cell I suggest that you use TemplatedColumns. Attached is a sample I created for you with two templated columns with an ImageButton inside each one's item template.
With this approach both the server-side click events and the ItemCommands of these templated buttons can be handled.
Below is the markup for the resulting grid along with the relevant server-side handling code:
Please let me know if this is helpful.
Hi Petar,
Thank you for the quick response. I tried your approach, but can't figure out how to setup the Button event to fire on the server side. Also, can't figure out how to setup the CellSelectionChanged event on the server side, the IDE only created the event on the client side. I'm attaching the sample that I played with, feel free to change the data source for your test.
All I'm trying to do in this sample is that, the first col and last col to be a button/image button and it fire a server side event when clicked and I can get the Datakey associated with that row on the server side.
I'm able to get the first column in the webdatagrid to show an image I want, but I want this to show image button control instead which is clickable and shows the hand icon on mouse over as you'd expect on a image button. I'd prefer to do this without the row selection enabled.
I had the grid ItemCommand wired up, but it never fires, obviously because I don't have any Commands hoooked up. Can you give me an example of how do I do this with different Commands that I can identify which column/row is clicked and pick up the datakey associated on server side with this same sample
I tried to search for answer myself, but your documentation is either non-existent or awful. Many times I searched for answers in the docs, I could never find it. I mean any dummy could figure out SetPropertyName() is meant for setting that property name. What I'm looking for is singificance of setting that property and related info described in detail in the doc. Usually all the doc shows is a one liner and no details at all, I know your guys probably picked up the idea from Microsoft on putting up useless documentation. And the object model for all the IG controls is strange to put it mildly. I worked with Component One and Telerik controls before, they all follow base ASP.NET object model for all the controls and then they branch off to specialized functionality which makes life lot easier when we port code from existing ASP.NET code base. IG object model on the other hand is convoluted, sometimes illogical and forces us to do things on multiple places such as aspx, javascript and code behind to get a single task accomplished. That makes it very hard for maintenance or update of the code in the future. Anyway, that's just some of the feedbacks that I hope you can relay to your product team.
I do see some cool features in your product and fairly quick responses for questions posed to your support or in the web forum, that makes up a bit for the trouble :-).
Looking forward to hear from you again.
Thanks,