We need to update our custom grids to use a custom row checker using our flat custom check box. See the attached sample of our grid which right now uses our custom flat check box. We would like to use the same check box in the header column to act as a row checker. I can't seem to find (specifically) the info in the documentation where we can customize the column header with an ITemplate like we do with the rows.
The only thing I found is the header image, i.e.,
HeaderImage - Gets or sets the image that will be displayed in column heading's area before the Caption.
I haven't tried this yet but is this how you would approach this? Thank you.
Hi Yousif,
Here I attached my simple sample on how to add the checkbox to WebGrid's header. I hope this sample could help.
Regards,
Julia
I was about to reply that I found it and your demo verified how I was going to do this. Thank you.
@InterSoft,
Would like to see an ITemplate implementation for the row checker so we can add our own checker to the column header. Getting around this by inserting controls via javascript is not an elegant solution and can easily break if the object collections change.
There's an issue with this approach, even though it's the only one I can think of too, in that any post backs for sorting or grouping of columns will cause the check box to disappear.
In our environment, the grid is a custom control and there may be more than one grid on a page, so the row checker check box must be created dynamically from within the grid. This is fine, however, I'm trying to solve the problem on post backs when the grid re-renders itself, it seems to ignore any javascript that attempts to reinsert the check box.
The check box is in the header yet it does not show when the grid is rendered on post back. We've gotten around issues with post backs, like those when we update our grid structure, by forcing a page reload. I'd like to avoid doing a page reload if I can solve this by having the grid correctly render the check box. Do you have some ideas, or can you update your sample so it shows the check box when you sort and group columns please? Thanks.
I'm apologize but I cannot reproduce your issue. I was try my sample that I gave to you with additional like set Allow Add New, Sorting, and Grouping to true, and also put button for testing the Postback. As you can see in the attachment of video below (RowChecker.rar), the RowChecker is always there alhtough the page reload. If it possible, can you please give me your sample issue? Since I unabled to replicate your issue, I can't investigate it further. Thank you.
You duplicated the problem just fine in your video. Did you not notice the row checker column disappeared when you GROUPED? I'm talking about the headers, which is the context of this thread, and NOT the rows.
Also, when I say post backs, I'm referring to the fly post backs by the grid during its own operations, like sort, refresh, group, etc., and not page post backs from external objects like buttons. The problem seems to only happen when the grid is grouped.
[EDIT] I forgot that this also happens when you remove a column. You can easily see this when you select "Remove This Column" from the header context menu. You'll have to enable this in your sample.
I'm sorry for misunderstood some of your issue. I try to do some test as you mean on the sample I give you before. However, I still got no problem with sorting. When I sort the checker column, the checkbox in header column is still appear (you can see it in my attachment video name RowCheckerSortingFlypostback.rar). And about flypostback, in my video before show that I put two button which one is triggered flypostback and the other is fullpostback. I'm clicking on refresh column that exist in WebGrid too, but as you can see, the rowchecker header is still there.
However, you absolutely right about the grouping, I'm sorry for this (this is the part I misunderstood your issue). Unfortunately, there is no workaround for create "custom row checker header column" in grouping mode yet. When you do grouping or removing column, the whole structure of the grid will be change, while the code in my sample (colHeaderElement.childNodes[0].childNodes[0].childNodes[1].childNodes[0].appendChild(cb);) is static as you don't mention this details on first question or shown on screenshot.
I would like to recommended you to used our existing "Is row checker column" method that working really fine in grouping (although unable sorting), but as you need to create it customize, I have been forwarded about header column template that you have been request before. I will inform you for any news regarding your request.
Hi Julia,
We can really use this feature. It's critical to us that we're able to use a custom check box as a row checker. I'm just a developer and am not the one who makes the final design decisions and I know that the standard default row checker is unacceptable due to it conflicting with the rest of the UI look of our application.
However, I do have the initial solution working, although it's a pain because I have to repost the page, i.e., do a page refresh under certain circumstances, but we're doing that anyway since operations like ungrouping and adding columns updates the structure and right now there's no way to update it dynamically. I submitted a feature request for that too months ago through Handy. I hope that will be available some time soon?
Yes, I have no issues with sorting, moving columns, resizing columns and refresh data. I've provided details as I moved along this solution. I didn't know this information at the beginning when I posted the original question. At that point, I just knew we needed a custom row checker. I didn't know about any of the issues that cropped up later. Thanks Julia.
We don't have spesific date about feature request, because it will depends on the development team about possibility to implement this feature. I will try to ask the development team again regarding the possibility to implement this feature request.