Point-to-cell + Click = Filter

[Soren Michelsen]

I have this idea for a grid that I'd like to configure. Here goes:

1. I'd like to be able to click one cell in each column. Records would then be filtered according to the value in the clicked cell.

2. The clicked cell would change colour.

2. You must be able to filter several columns simultaneously.

3. Clicking an already clicked cell removes that filter.

I have nada idea as to how to get started. I have the grid in place, displaying all the relevant data. Now what?

Any ideas/pointers/ready-made-solutions out there? :-)

-JJ, Denmark

[Pete]

Hi,

This interests me hugely. I've actually done my filtering in an entirely different way, that I needed to get help on, but now that I have that working I could actually tweak it to work for something like this depending on how you get your data. Are you populating all the data in to the form outright or are you calling it from a database?

The solution will obviously differ in it's execution depending on how you retreive the data and how flexible your connection to the database. What I would personally try to do, if you can build up an SQL query, is build up a query string depending on the clicks and submit the query on each time you select an item. I think you can also fire an event to just change the background colour of the cell, but I've not tried it.

If your connection to the database is more rigid, or you're not using a DB connection at all and getting the data in another way, I'd have to rethink my solution but it's definitely a cool sounding idea.

[Soren Michelsen]

I feed the grid with sql-data through a good old sql dataconnection, nothing fancy there. Looking forward to hearing more, as i'm fairly new to radgrid and admittedly a bit rusty altogether... :-)

[Radoslav]

Hello Jeppe,

To achieve the desired functionality you could try using the following approach:
Attach click event to all RadGrid cells:

function RowCreated(sender, eventArgs) {
                var dataItem = eventArgs.get_gridDataItem();
                for (var i = 1; i < dataItem.get_element().cells.length; i++) {
                    var cell = dataItem.get_element().cells[i];
                    if (cell) {
                        $addHandler(cell, "click", Function.createDelegate(cell, FilterByCell));
                    }
                }
            }

Into the FilterByCell function set cell’s background color and fire ajaxRequest with cell text as an argument.
Then on server side you could handle this request into the server side AjaxRequest handler and create filter expression of the RadGrid manually. The other option is to pass the ajaxrequest argument as a parameter to a database query.

Please give it try and let me know if you experience any problems. Looking forward for your reply.

Regards,
Radoslav
the Telerik team

[Soren Michelsen]

Hello Radoslav,

I'm afraid I'd need a bit more guidance on this....

Are you able to provide a more detailed sample/description of this - I just don't understand exactly how to make your sample work.

When and how would the rowCreated function be called? I'm lost. :-(

Thanks,
Jeppe

[Radoslav]

Hi Jeppe,

I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team