Telerik grid - Double click

[Kien Lim]

Hi,

I would like to double click on the grid item then display the grid item detail as popup similar to the edit mode but read only.

How can I  achieve this/

Thanks

[Gimmik]

Hi Kien,

I was working through an example similar to this a while back. Hopefully this will be relevant to what you are trying to do. You should be able to combine a RadDock and a RadGrid to accomplish your goal. Basically, you want to wire up the "OnRowDblClick" event to a javascript function that will pop up a RadDock. A RadDock without a DockZone setup will act like a simple window. You can set the Dock's size and set it's location to the location of the mouse - making it very versatile. Simply set the RadDock closed property to "true" on load. Then you have your javascript dynamically fill in the detailed information within the RadDock (still not visible) and finally you set the RadDock to closed = "false". You can make your design as simple or complex as you like. I'll include some sample code below.

Hope this helps!
-Gimmik

A very simple RadDock can be placed anywhere in your ASPX page.

<telerik:RadDock ID="RadDock1" runat="server" Width="300px" Closed="true">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="None Selected"></asp:Label>
</div>
</ContentTemplate>
</telerik:RadDock>

A very simple RadGrid - Bind it to whatever data source you are using for you project. Pay special attention to the ClientSettings tag.

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0"
DataSourceID="SqlDataSource1" GridLines="None">

<MasterTableView AutoGenerateColumns="True"
    DataSourceID="SqlDataSource1">
</MasterTableView>

<ClientSettings>
    <ClientEvents OnRowDblClick="RowDblClick" />
</ClientSettings>

</telerik:RadGrid>

Here is a sample Javascript function. It finds a predefined cell in the double-clicked row and populates it to a label in the RadDock. This is where you will do most of your customization. You can do something static along the same lines as this sample, or you can make it dynamic and iterate over an array of cells to build your RadDock.

function RowDblClick(sender, eventArgs) {
    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    var cell = MasterTable.getCellByColumnUniqueName(row, "ProductName");

    var dock = $find("<%= RadDock1.ClientID %>");

    document.getElementById("<%= Label1.ClientID %>").innerHTML = cell.innerHTML;

    dock.set_closed(false);

[Kien Lim]

Thanks Gimmik.
Actually this only fulfilled half of my requirement. I wish the grid to perform in such a way as below:
For e.g. I have a claim form with a grid to store all the claim details. Claim details include column like Travel from, travel to, mileage,description,project, category and remarks.
1) Grid to show only 3 columns - Travel from, travel to, mileage while the form load. Then double click on the particular row to show all columns.
2) While in edit or add new mode, it should show all fields for user to key in.

[Gimmik]

Hi Kien,

I think the solution I posted will meet your first requirement. You won't be able to display five columns for only one row within the main grid. So you'll either have to display the two detail columns in another control (such as a RadDock) or display the detail columns for the whole main grid. i.e. you double click and the whole grid shows the detail columns, double click again and they are hidden. It sounds like the first option will work better for your application.

Now - regarding your second requirement. That is actually fairly easy. You will need to have all five columns (three regular + two detail) bound to the RadGrid. They won't be accessible to the Edit/Add events unless they are bound to the RadGrid. Setting them to visible=False will not work in this case, since they won't be available to the client. However, hiding them client-side will work well. You can wire-up the OnGridCreated event to hide the detail columns as soon as the grid is created. Those columns will still be bound to the grid, and thus available to the Edit/Add events. I used to popup editor in my example for simplicity. I'll include some sample code below - but this is mainly an expansion of my previous post.

Set MasterTableView to use the Popup editor:

<MasterTableView EditMode="PopUp" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
    DataKeyNames="ProductID">

Wire up the OnGridCreated event to hide the columns:

<ClientSettings>
    <ClientEvents OnRowDblClick="RadGrid1_RowDblClick" OnGridCreated="RadGrid1_OnGridCreated" />
</ClientSettings>

Hide the detail columns in Javascript:

function RadGrid1_OnGridCreated(sender, eventArgs) {
    var grid = sender;
    var MasterTable = grid.get_masterTableView();

    MasterTable.hideColumn(1);
    MasterTable.hideColumn(2);

}

I used a static column index to hide the columns. You can do this dynamically if needed by using the following procedure:

var grid = sender;
var MasterTable = grid.get_masterTableView();

var column = MasterTable.getColumnByUniqueName("ProductID");
var element = column.get_element();

Here is a link to a handy demo that shows off some of your options:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx

Hope this helps!
-Gimmik