This is a migrated thread and some comments may be shown as answers.

Launch RadWindow with key values from DetailTableView Add Record

8 Answers 147 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Kit asked on 25 Jan 2011, 12:05 PM

Hello all.

I have a two tier RadGrid. Farmers -> Farms. When clicking Add New Farm, I need it to run some javascript which will get the parent record's key (FarmerId) and call the LaunchPopup function with parameters. I've been searching all morning and can't find anything to help.

The grid:

<telerik:RadGrid ID="grdRadGrid" AutoGenerateColumns="False" ItemStyle-VerticalAlign="Top"

AllowSorting="true" AllowAutomaticUpdates="false"

OnNeedDataSource="grdRadGrid_NeedDataSource"

OnDetailTableDataBind="grdRadGrid_DetailDataBind"

OnItemCreated="grdRadGrid_ItemCreated"

ClientSettings-ClientEvents-OnCommand="OnCommand"

runat="server">

<ClientSettings>

<Resizing AllowColumnResize="True" ClipCellContentOnResize="True" />

</ClientSettings>

<MasterTableView Name="grdFarmer"

DataKeyNames="FarmerId" EditMode="InPlace"

CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New Farmer"

NoMasterRecordsText="No Farmers to display."

NoDetailRecordsText="No Farms to display."

ItemStyle-VerticalAlign="Top">

<RowIndicatorColumn Visible="True" />

<ExpandCollapseColumn Visible="True" />

<%--Edit/Update Cancel buttons--%>

<telerik:GridTemplateColumn HeaderStyle-Width="140px">

<ItemTemplate>

<asp:Button ID="btnFarmerEdit" CommandName="Edit" CommandArgument="Farmer" Text="Edit" runat="server" CssClass="gridbutton"/>

</ItemTemplate>

<EditItemTemplate>

<asp:Button ID="btnFarmerUpdate" CommandName="Update" CommandArgument="Farmer" CssClass="gridbutton"

Text="Save" runat="server" CausesValidation="true"/>

<asp:Button ID="btnFarmerCancel" CommandName="Cancel" CssClass="gridbutton"

Text="Cancel" runat="server" CausesValidation="false"/>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="FarmerId" HeaderStyle-Width="50px"

DataType="System.Int32" HeaderText="Id"

SortExpression="FarmerId" UniqueName="FarmerId" />

</Columns>

<DetailTables>

<telerik:GridTableView Name="grdFarms" DataKeyNames="FarmerId,FarmId"

CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New Farm"

NoDetailRecordsText="No Farms to display." AllowSorting="true" BorderWidth="5px" GridLines="None">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="FarmerId" MasterKeyField="FarmerId" />

</ParentTableRelation>

<RowIndicatorColumn Visible="True" />

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn HeaderStyle-Width="100px">

<ItemTemplate>

<telerik:RadButton ID="btnFarmEdit" CssClass="gridbutton" Text="Select" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="FarmId" HeaderStyle-Width="50px"

DataType="System.Int32" HeaderText="Id" SortExpression="FarmId" UniqueName="FarmId" />

<telerik:GridBoundColumn DataField="FarmName" HeaderStyle-Width="225px"

HeaderText="Farm Name" SortExpression="FarmName" UniqueName="FarmName" />

</Columns>

</telerik:GridTableView>

</DetailTables>

</MasterTableView>

</telerik:RadGrid>

And what javascript I've got running so far:

function OnCommand(sender, args) {

if (args.get_commandName() == "InitInsert" && args.get_tableView().get_name() == "grdFarms") {

//Need code here to get relevant grdFarmer's FarmerId from DataKeyValues and launch popup

var _farmerId = 1; //Hardcoded for now, this is the value I need to get

//Popup code:

LaunchPopup_Farm(_farmerId, '-1'); //-1 signals a new record on the popup form

}

function LaunchPopup_Farm(farmerId, farmId) {

window.radopen("popupFarm.aspx?FarmerId=" + farmerId + "&FarmId=" + farmId, "popupFarm");

return false;

}

How do I get the parent record's FarmerId?

TIA

kitster

8 Answers, 1 is accepted

answered on 28 Jan 2011, 09:57 AM

My problem gets better. I still haven't managed to get the parent grid's data key value, but I'm sure that's possible so I've hardcoded a value in for now, and launching the popup like so:

function OnCommand(sender, args) {

if (args.get_commandName() == "InitInsert" && args.get_tableView().get_name() == "grdFarms") { // Clicked on "Add New Record" for grdFarms

return LaunchPopup_Farm('1', '-1');

}

function LaunchPopup_Farm(farmerId, farmId) {

window.radopen("popupFarm.aspx?FarmerId=" + farmerId + "&FarmId=" + farmId, "popupFarm");

return false;

}

The popup loads up, but as soon it can it closes down again and the grid shows some default data entry fields, which aren't part of the grid template.

I presume the calling page is closing the popup and then doing a default "initiate insert/edit" action.

Is there some sort of cancel action I need to take in the js to stop this from happening?

EDIT: I wasn't too sure if the RadWindowManager code was relevant, have decided to add it in:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"

EnableShadow="true" VisibleStatusbar="False" VisibleTitlebar="True"

AutoSize="false" Width="900" Height="500">

<Windows>

<telerik:RadWindow ID="popupFarm" runat="server"

Title="Farm Details" Left="150px" ReloadOnShow="true"

ShowContentDuringLoad="false" Modal="true" />

</Windows>

</telerik:RadWindowManager>

Cheers

kitster

answered on 28 Jan 2011, 02:10 PM

Hello Kit,

This code should work for you to get farmerId right:

function OnCommand(sender, args) {

debugger;

if (args.get_commandName() == "InitInsert" && args.get_tableView().get_name() == "grdFarms") {

var masterTable = sender.get_masterTableView();

var rowIndex = args.get_tableView().get_parentRow().sectionRowIndex;

var _farmerId = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[rowIndex], "FarmerId").innerHTML;

//Popup code:

LaunchPopup_Farm(_farmerId, '-1'); //-1 signals a new record on the popup form

}

All the best,
Vasil
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 02 Feb 2011, 04:38 PM

WebSite1.zip

Hi Kit,

Check the attached web site. And tell us what is the difference between this and yours.

Kind regards,
Vasil
the Telerik team

answered on 14 Feb 2011, 05:19 PM

Apologies for the delay in my response, but this has been frustrating the hell out of me and I've left it alone for a while...

The difference between your project and mine was that FarmerId must be a visible bound column on the parent table, it reads it from the columns InnerHTML. I would prefer not to display my ID's to users, and if you set the column to visible="false" it isn't rendered.

Can't the client-side engine interrogate the tables DataKeys collection, instead of reading a cell's HTML? Some of the tables I'm working with have complex multi-column primary keys, and if I am forced to display them I'm going to lose half of my screen space to what the user would deem irrelevant data.

UPDATE: It appears to be possible to get the data keys using args.getDataKeyValue("FarmerID") if you trap an event from a GridDataItem, like RowClicked, but not from the ItemCommand InitInsert. I wonder if its possible to get the parent table's GridDataItem the child table is bound to, and then use its args.getDataKeyValue method...

In the meantime, setting the column's width to 0 is the best I can do:

<telerik:GridBoundColumn DataField="FarmerId" DataType="System.Int32" HeaderText="Id" UniqueName="FarmerId" Visible="true">

<HeaderStyle Width="0px" />

</telerik:GridBoundColumn>