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

RadGrid fill textbox details on row select

4 Answers 346 Views

Grid

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

Curt asked on 06 Mar 2011, 07:45 PM

I should start by saying, Im really new student and any help would be great.

What I want to do is fill a custom edit form with details from my RadGrid when a client selects a row. I found an example here but i cant seem to get it to work right and its not exactly what im looking for. I rarely use javascript and know a little c#. Ive tried something like the RadGrid1_SelectedIndexChanged but it didnt work so I tried to use the javascript from the example but have had problems with it also.
Can someone please advise me on how to get this working. The page Im working with is below.

protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)

{

GridDataItem item = RadGrid1.SelectedItems[0] as GridDataItem;

// using Column UniqueName

string strtxt = item["ColumnUniqueName"].Text;

//using cell index

textbox.Text = item.Cells[0].Text;

}

   <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
   <script type="text/javascript">
   var eweekspeakerId, currentSpeaker, currentRowIndex = null;

   var eweekspeaker
   {
   EWeekSpeakerId: null;
   Hnumber: null;
   Title: null;
   Description: null;
   SpeakerDate: null;

   create: function () {
   var obj = new Object();
   obj.EWeekSpeakerId = "";
   obj.Hnumber = "";
   obj.Title = "";
   obj.Description = "";
   obj.SpeakerDate = "";

   return obj;
   }
   }

   function setValues(eweekspeaker) {
   $get("<%= rgEWeekSpeakers.ClientID %>").innerHTML = eweekspeaker.EWeekSpeakerId;

   $find("<%= rcbEditSpeaker.ClientID %>").findItemByValue(eweekspeaker.Hnumber).select();
   $find("<%= rtbEditTitle.ClientID %>").set_value(eweekspeaker.Title);
   $find("<%= rtbEditDescription.ClientID %>").set_value(eweekspeaker.Description);
   $find("<%= rdtpEditSpeakerDate.ClientID %>").set_selectedDate(eweekspeaker.SpeakerDate);
   }

   function getValues() {
   eweekspeaker.EWeekSpeakerId = $get("<%= rgEWeekSpeakers.ClientID %>").innerHTML;

   eweekspeaker.Hnumber = $find("<%= rcbEditSpeaker.ClientID %>").get_value();
   eweekspeaker.Title = $find("<%= rtbEditTitle.ClientID %>").get_value();
   eweekspeaker.Description = $find("<%= rtbEditDescription.ClientID %>").get_value();
   eweekspeaker.SpeakerDate = $find("<%= rdtpEditSpeakerDate.ClientID %>").get_selectedDate();

   return eweekspeaker;
   }

   function getDataItemKeyValue(radGrid, item) {
   return parseInt(radGrid.get_masterTableView().getCellByColumnUniqueName(item, "EWeekSpeakerId").innerHTML);
   }

   function OnClientClicked(button, args) {
   if (window.confirm("Are you sure you want to delete this speaker?")) {
   button.set_autoPostBack(true);
   }
   else {
   button.set_autoPostBack(false);
   }
   }

   // function RowDblClick(sender, eventArgs) {
   // sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
   // }

   function RowSelected(sender, eventArgs) {
   var grid = sender;
   var MasterTable = grid.get_masterTableView();
   var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
   var cell = MasterTable.getCellByColumnUniqueName(row, "EWeekSpeakerID");
   //here cell.innerHTML holds the value of the cell
   $get("<%= rgEWeekSpeakers.ClientID %>").innerHTML = employee.EWeekSpeakerId;

   $find("<%= rcbEditSpeaker.ClientID %>").set_value(employee.Hnumber);

   }

   function GetSelectedSpeaker() {
   var grid = $find("<%=rgEWeekSpeakers.ClientID %>");
   var MasterTable = grid.get_masterTableView();

   var selectedRows = MasterTable.get_selectedItems();
   for (var i = 0; i < selectedRows.length; i++) {
   var row = selectedRows[i];
   var cell = MasterTable.getCellByColumnUniqueName(row, "EWeekSpeakerID")
   //here cell.innerHTML holds the value of the cell
   }
   }
   </script>
   </telerik:RadCodeBlock>
   <telerik:RadGrid ID="rgEWeekSpeakers" CssClass="grid" runat="server" GridLines="None"
   AllowPaging="True" PageSize="20" AllowSorting="True" AutoGenerateColumns="False"
   AllowMultiRowEdit="True" ShowStatusBar="True" OnUpdateCommand="rgEWeekSpeakers_UpdateCommand"
   AllowFilteringByColumn="True" OnSelectedIndexChanged="rgEWeekSpeakers_SelectedIndexChanged">
   <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
   <Selecting AllowRowSelect="true" />
   <ClientEvents OnRowSelected="rowSelected" />
   <Scrolling AllowScroll="true" UseStaticHeaders="true" />
   <%-- <ClientEvents OnRowDblClick="RowDblClick" />--%>
   </ClientSettings>
   <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="EWeekSpeakerID">
   <EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit {0}" CaptionDataField="FullName"
   PopUpSettings-Modal="true">
   <EditColumn FilterControlAltText="Filter EditCommandColumn column">
   </EditColumn>
   <PopUpSettings Modal="True"></PopUpSettings>
   </EditFormSettings>
   <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
   <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
   <HeaderStyle Width="20px"></HeaderStyle>
   </RowIndicatorColumn>
   <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
   <HeaderStyle Width="20px"></HeaderStyle>
   </ExpandCollapseColumn>
   <Columns>
   <telerik:GridBoundColumn DataField="EWeekSpeakerID" FilterControlAltText="Filter EWeekSpeakerID column"
   HeaderText="EWeekSpeakerID" SortExpression="EWeekSpeakerID" UniqueName="EWeekSpeakerID"
   DataType="System.Int32" ReadOnly="True" Visible="false">
   </telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="FullName" FilterControlAltText="Filter FullName column"
   HeaderText="FullName" SortExpression="FullName" UniqueName="FullName">
   </telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="Title" FilterControlAltText="Filter Title column"
   HeaderText="Title" SortExpression="Title" UniqueName="Title">
   </telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="Description" FilterControlAltText="Filter Description column"
   HeaderText="Description" SortExpression="Description" UniqueName="Description"
   Visible="false">
   </telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="SpeakerDate" DataType="System.DateTime" FilterControlAltText="Filter SpeakerDate column"
   HeaderText="SpeakerDate" SortExpression="SpeakerDate" UniqueName="SpeakerDate"
   DataFormatString="{0:M/dd/yyyy}">
   </telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="Hnumber" DataType="System.Int32" FilterControlAltText="Filter Hnumber column"
   HeaderText="Hnumber" SortExpression="Hnumber" UniqueName="Hnumber" Visible="false"
   ReadOnly="true">
   </telerik:GridBoundColumn>
   </Columns>
   </MasterTableView>
   <FilterMenu EnableImageSprites="False">
   </FilterMenu>
   <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
   </HeaderContextMenu>
   </telerik:RadGrid>
   <br />
   <telerik:RadTabStrip ID="rtseWeekSpeakers" runat="server" SelectedIndex="0" MultiPageID="rmpeWeekSpeakers">
   <Tabs>
   <telerik:RadTab Text="Edit Speaker" Selected="true" PageViewID="rpvEditSpeaker" />
   <telerik:RadTab Text="Add Speaker" Selected="True" PageViewID="rpvAddSpeaker" />
   </Tabs>
   </telerik:RadTabStrip>
   <telerik:RadMultiPage ID="rmpeWeekSpeakers" runat="server" SelectedIndex="0">
   <telerik:RadPageView ID="rpvEditSpeaker" runat="server" BorderStyle="Solid" BorderWidth="1px">
   <div style="padding: 5px">
   <asp:Label ID="lEditSpeakerId" runat="server"></asp:Label>
   <telerik:RadComboBox ID="rcbEditSpeaker" DataTextField="FullName" DataValueField="HNUMBER"
   runat="server" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10" ShowMoreResultsBox="True"
   EnableVirtualScrolling="True" EmptyMessage="Select Speaker" MinFilterLength="4">
   </telerik:RadComboBox>
   <br />
   <telerik:RadTextBox ID="rtbEditTitle" runat="server" Width="50%">
   </telerik:RadTextBox>
   <br />
   <telerik:RadTextBox ID="rtbEditDescription" runat="server" TextMode="MultiLine" Columns="50"
   Rows="10" Width="80%">
   </telerik:RadTextBox>
   <br />
   <telerik:RadDateTimePicker ID="rdtpEditSpeakerDate" runat="server" MinDate="1/1/1000"
   MaxDate="1/1/3000">
   </telerik:RadDateTimePicker>
   <telerik:RadButton ID="rbUpdate" runat="server" Text="Update">
   </telerik:RadButton>
    
   <telerik:RadButton ID="rbDelete" runat="server" Text="Delete" OnClientClicked="OnClientClicked">
   </telerik:RadButton>
   </div>
   </telerik:RadPageView>
   <telerik:RadPageView ID="rpveAddSpeakers" runat="server" BorderStyle="Solid" BorderWidth="1px">
   <div style="padding: 5px">
   <telerik:RadComboBox ID="rcbAddSpeaker" DataTextField="FullName" DataValueField="HNUMBER"
   runat="server" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10" ShowMoreResultsBox="True"
   EnableVirtualScrolling="True" EmptyMessage="Select Speaker" MinFilterLength="4">
   </telerik:RadComboBox>
   <br />
   <telerik:RadTextBox ID="rtbAddTitle" runat="server" Width="50%" EmptyMessage="Enter Title">
   </telerik:RadTextBox>
   <br />
   <telerik:RadTextBox ID="rtbAddDescription" runat="server" TextMode="MultiLine" Columns="50"
   Rows="10" Width="80%" EmptyMessage="Enter Description">
   </telerik:RadTextBox>
   <br />
   <telerik:RadDateTimePicker ID="rdtpAddSpeakerDate" runat="server">
   </telerik:RadDateTimePicker>
   <telerik:RadButton ID="rbInsert" runat="server" Text="Insert" OnClick="rbInsert_Click">
   </telerik:RadButton>
   </div>
   </telerik:RadPageView>
   </telerik:RadMultiPage>

4 Answers, 1 is accepted

answered on 07 Mar 2011, 06:55 AM

Hello Curt,

You need to set 'EnablePostBackOnRowClick="true" to fire 'OnSelectedIndexChanged' of RadGrid. (If you want to do it from server side).

ASPX:

<ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">

</ClientSettings>

If you want to do it from client side, try the folowing code snippet.

ASPX:

<ClientSettings Selecting-AllowRowSelect="true">

<ClientEvents OnRowSelected="rowSelected" />

</ClientSettings>

Java Script:

<script type="text/javascript">

function rowSelected(sender, args) {

var grid = sender;

var row = args.get_gridDataItem();

var MasterTable = grid.get_masterTableView();

var fullName = MasterTable.getCellByColumnUniqueName(row, "FullName").innerHTML;

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

rtbEditTitle.set_value(fullName)

}

</script>

Thanks,
Princy.

Accepted

answered on 10 Mar 2011, 06:36 AM

Hello Curt,

You can set values for RadComboBox and RadDateTimePicker from client side like below.

Java Script:

<script type="text/javascript">

function rowSelected(sender, args) {

. . . . .

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

rcbEditSpeaker.set_text("Alex");

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

var endDate = new Date('2/3/2001');

rdtpEditSpeakerDate.set_selectedDate(endDate);

}

</script>

Thanks,
Princy.