In RadGrid, how can we merge 2 datacolumns only for viewing, but still be able to edit them separately? - telerik

I have a Telerik's RadGrid which has 2 columns like this:
<Columns>
<telerik:GridBoundColumn HeaderText="AirlineCode" UniqueName="AirlineCode" DataField="airlineCode" />
<telerik:GridBoundColumn HeaderText="FlightNumber " EditFormColumnIndex="1" DataField="flightNumber" />
...
...
... more code, but unrelevant to the question here.
</Columns>
I am supplying the data for both columns in the relevant NeedDataSource() function.
So it renders correctly like this:
| AirlineCode | FlightNumber |
------------------------------------------
| Delta | 2393 |
| Southwest | 345 |
But now my requirement has changed a little bit.
For viewing, I want to merge them together and show it like this:
| Flight |
--------------------------
| Delta-2393 |
| Southwest-345 |
However, while editing the rows the user should be able to edit "AirlineCode" and "Flight Number" separately. And the values should still be correctly maintained in the datasource.
I know that if we want the user to "View" and "Edit" differently, we would have to use .
So I am trying something like this:
<Columns>
<telerik:GridTemplateColumn EditFormColumnIndex="0" HeaderText="Flight">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "airlineCode")%>
<asp:Literal runat="server" Text="-"></asp:Literal>
<%#DataBinder.Eval(Container.DataItem, "flightNumber")%>
</ItemTemplate>
<EditItemTemplate>
<telerik:GridBoundColumn HeaderText="AirlineCode" UniqueName="AirlineCode" DataField="airlineCode" />
<telerik:GridBoundColumn HeaderText="FlightNumber " EditFormColumnIndex="1" DataField="flightNumber" />
</EditItemTemplate>
</telerik:GridTemplateColumn> ...
...
... more code, but unrelevant to the question here.
</Columns>
But its not working.
Those 2 lines inside are giving warnings:
Element 'GridBoundColumn' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.
Probably I am doing it wrong. Need help.
Any help is appreciated.

drpcken is correct. When you use the GridTemplateColumn, you do not need to use the GridBoundColumn. Instead, you supply the View and Edit template HTML and use the Bind expression to do two-way binding in the Edit template. For example:
<telerik:GridTemplateColumn UniqueName="TemplateColumn">
<ItemTemplate>
<%# Eval("airlinCode") %> - <%# Eval("flightNumber") %>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td style="width: 50%">
<asp:TextBox runat="server" Text='<%# Bind("airlineCode") %>' />
</td>
<td style="width: 50%">
<asp:TextBox runat="server" Text='<%# Bind("flightNumber") %>' />
</td>
</tr>
</table>
</EditItemTemplate>
</telerik:GridTemplateColumn>
As you can see, you use Eval in the ItemTemplate and Bind in the EditItemTemplate. All other code should continue to work without change.
Let me also highlight the Telerik Forums. For Telerik specific questions, there is an active community available to help troubleshoot: www.telerik.com/forums

It has been a while since I used the radgrid, but in your edit template I believe you need to remove the GridBoundColumns and put two textbox controls separated by the dash. Then use your Databinder to fill those txt boxes. Sorry I can't be more concise as I'm typing on my iPhone and can't test. I will followup with you when I am in front of my machine.
Good luck!

Related

How to render aria-label in sitefinity webform widget

I have a webform widget and it need to render aria-label within a select tag. When I try the following, it show an error.
<select id="pre-new-year-sel" name="previous-news-year-select" tabindex="5" class="news-drop test" aria-label='<%$Resources: Labels, SelectAYear %>'>
<asp:PlaceHolder ID="ItemsContainer" runat="server" />
</select>
Error is :
Literal expressions like '<%$Resources: Labels, SelectAYear %>' are not allowed. Use <asp:Literal runat="server" Text="<%$Resources: Labels, SelectAYear %>" /> instead.
How to use ASP Literal to set aria attribute within html control?
Thanks
Salam

How Can I get Cell Values from Telerik RadGrid

I am having a problem getting the values from the Radgrid auto generated Insert form.
I have my radgrid setup as shown in code shown below. I am only doing inserts and deletes and am using the edit form that is automatically opened when I click the add new record button.
<div id ="specialrequestGrid" class="container">
<div class="row">
<div class="col-md-12">
<telerik:RadAjaxPanel runat="server">
<telerik:RadGrid ID="SpecialRequests" runat="server" OnInsertCommand="SpecialRequests_InsertCommand"
OnUpdateCommand="SpecialRequests_UpdateCommand"
OnItemCommand="SpecialRequests_ItemCommand"
AllowAutomaticInserts="false"
AutoGenerateColumns="false"
OnNeedDataSource="SpecialRequests_NeedDataSource">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="CaseId_FK, ReqId" Font-Size="Medium" NoMasterRecordsText="No Special Requests">
<CommandItemSettings AddNewRecordImageUrl="../Images/Add.png" />
<Columns>
<telerik:GridTemplateColumn HeaderText="Request Date" UniqueName="DateTemplateColumn">
<ItemTemplate>
<asp:Label ID="DateEditItemTemplate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Date","{0:MM/dd/yyyy}") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadDatePicker ID="dpRideDate" runat="server" DateInput-DateFormat="MM/dd/yyyy" DbSelectedDate='<%# Bind("Date") %>' MinDate="1999/1/1" UniqueName="dpRideDate">
</telerik:RadDatePicker>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Requested By ID" UniqueName="RequestorTemplateColumn">
<ItemTemplate>
<asp:Label ID="Requestor" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "RequesterEID_FK") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<button id="btnRequestEID" type="button" class="btn" data-toggle="modal" data-target="#myModal" >--Please Select--</button>
<div>
<input type="text" Id="TxtSPRequestName" disabled />
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Request Reason" UniqueName="RequestReason">
<ItemTemplate>
<asp:Label ID="ItemTemplatelblRequestReason" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblRequestReason" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>' Visible="false">
</asp:Label>
<asp:TextBox runat="server" ID="txtReason" Text='<%# DataBinder.Eval(Container.DataItem, "Reason") %>'></asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn DataField="IsWOO" HeaderText="Is Out of Order" UniqueName="ISWOO"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
</div>
</div>
</div>
This is the screenshot of the auto generated form I get when I click the add new record
When I click the Insert link on the form I run this C# code
protected void SpecialRequests_InsertCommand(object sender, GridCommandEventArgs e)
{
GridEditableItem editedItem = e.Item as GridEditableItem;
UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
T_SpecialRequests t = new T_SpecialRequests();
t.IsWOO = (userControl.FindControl("IsWOO") as CheckBox).Checked;
}
Note the IsWOO is a control in the Radgrid that I did not show in the Screenshot. When I click the save link the Insert Function, shown above Runs but I get the following error:
Unhandled exception at line 1, column 123034 in http://localhost:52028/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81
0x800a139e - JavaScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Object reference not set to an instance of an object.
The strange part is I use this same code in several other projects without any problems. The only difference is this is the first time I have used this auto generated form. I don't want to use the another type of control for this Radgrid due to such a small number of fields, only have 4 control.
I have spent several hours searching for an answer but just can't find the solution.
How can I get the values from this auto generated form?
You can use
t.IsWOO = (editedItem["ISWOO"].Controls[0] as CheckBox).Checked;
or
var newValues = new Dictionary<string, object>();
e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);
t.IsWOO = (bool)newValues["IsWOO"];
The first approach references the control by index because unfortunately it has no ID.
The second one is a bit verbose for just one property but I would surely prefer it if there were more properties.
While #Michal Nawrocik was correct I found that I still had some problems reading all of the controls in the Radgrid. I was able to track down the answer on the Telerik forum and found that you have to use different code based on the Column Type. I had 2 different type of columns.
the code below shows what I used to get all of the control values on the form
protected void SpecialRequests_InsertCommand(object sender, GridCommandEventArgs e)
{
try
{
using(LatentEntities db = new LatentEntities())
{
if (e.Item is GridEditableItem)
{
T_SpecialRequests T = new T_SpecialRequests();
var editableItem = ((GridEditableItem)e.Item);
RadDatePicker picker = (RadDatePicker)editableItem.FindControl("dpDate"); // in EditItem Template
DateTime dt = Convert.ToDateTime(picker.DbSelectedDate);
T.Date = dt;
TextBox Reason = (TextBox)editableItem.FindControl("txtReason"); //This Control was in an Edit Item Template
T.Reason = Reason.Text;
T.IsWOO = (editableItem["ISWOO"].Controls[0] as CheckBox).Checked; //In CheckBox Column
}
}
And if the control is in a Telerik:GridtboundColumn I used this code:
string strFirstName = (editableItem["firstname"].Controls[0] as TextBox).Text;

Telerik rad grid combo box event

I m using telerik rad grid
I have used combo box to display company Type.
If company Type is ABC than Design Firm type should not be displayed
how to write code on combobox in telerik radgrid ![enter image description here][1]
You will need to take two steps to make this work. First, set up an EditForm Template in your RadGrid. Next, you'll need to use related RadComboBoxes (as shown in this example) to achieve your desired functionality.
EditForm Template example code
<telerik:GridTemplateColumn UniqueName="ContactTitle" HeaderText="ContactTitle">
<EditItemTemplate>
<telerik:RadComboBox ID="RadComboBox1" AutoPostBack="true" runat="server" SelectedValue='<%# Bind("CountryID") %>' DataSourceID="SqlDataSource1" DataTextField="CountryID" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="TemplateColumn">
<EditItemTemplate>
<telerik:RadComboBox ID="RadComboBox2" runat="server">
</telerik:RadComboBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
Cascading ComboBox example
protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
RadComboBox rdcbx = (RadComboBox)o;
GridEditableItem editedItem = rdcbx.NamingContainer as GridEditableItem;
RadComboBox ddList = editedItem.FindControl("RadComboBox2") as RadComboBox;
// change the data source for ddList here
.....
}
source

Right-to-left direction for Ext.NET TextField

I need to align the Ext:TextField control along with its FieldLabel attribute, as right-to-left direction.
By setting LabelAlign to right and body dir="rtl", I can only align all the control to the right.
And I get this format displayed:
---------Label:-|||||||TextField||||||||||
But how can I have the following format?
|||||||TextField||||||||||---------:Label
I'm not quite sure if this is possible as there is no real need for such options.
I would suggest that you leave the Label of the text field blank and that you insert an label to the end...
Example:
<ext:textfield ID="Text1" Text="I start on the left" runat="server" />
<ext:label ID="Label1" Text="I am a label starting on the left staying on the right" StyleSpec="float: left;" />
It should work like this!
FieldLabel will not work for rtl text fields. The only solution found is to enclose a Label and a Text Field inside table cells, aligned in a table row, with dir="rtl" set to the table or container, like the following.
<table dir="rtl">
<tr>
<td>
<ext:Label ID="Label1" Text="Sample Label" runat="server" />
</td>
<td>
<ext:textfield ID="Text1" Text="Sample Text" runat="server" />
</td>
</tr>
</table>

only show two weeks Ajax Calender

I am using .Net3.5. I have a scenario where user selects the textbox the Ajax calender pops up. In that calender i just want to display only next two weeks. not entire month or year. How to do that?
<tr>
<td>
</td>
<td align="left">
Next Update Date
</td>
<td align="left">
<asp:TextBox ID="txtEditUpdateDt" runat="server"></asp:TextBox>
<cc2:CalendarExtender CssClass="AjaxCalendar" OnClientShowing="DisplayDateToday"
ID="CalendarExtender3" runat="server" PopupButtonID="txtEditUpdateDt" PopupPosition="BottomLeft"
TargetControlID="txtEditUpdateDt" Enabled="True" />
<asp:RegularExpressionValidator ID="valtxtEditUpdateDt" runat="server" Display="None"
ControlToValidate="txtEditUpdateDt" ErrorMessage="Please enter valid Date." ValidationExpression="((^(10|12|0?[13578])([/])(3[01]|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(11|0?[469])([/])(30|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(2[0-8]|1[0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(29)([/])([2468][048]00)$)|(^(0?2)([/])(29)([/])([3579][26]00)$)|(^(0?2)([/])(29)([/])([1][89][0][48])$)|(^(0?2)([/])(29)([/])([2-9][0-9][0][48])$)|(^(0?2)([/])(29)([/])([1][89][2468][048])$)|(^(0?2)([/])(29)([/])([2-9][0-9][2468][048])$)|(^(0?2)([/])(29)([/])([1][89][13579][26])$)|(^(0?2)([/])(29)([/])([2-9][0-9][13579][26])$))"></asp:RegularExpressionValidator>
<cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" Enabled="True"
TargetControlID="valtxtEditUpdateDt">
</cc2:ValidatorCalloutExtender>
</td>
<td>
</td>
</tr>
Like #Dario said, I don't think you can't limit it in the simple ajax control. An alternative option would be to add a range validator.
<asp:RangeValidator ID="RangeValidatorDT"
runat="server"
ControlToValidate="txtEditUpdateDt"
ErrorMessage="* Invalid date range"
Type="Date">
</asp:RangeValidator>
Then on the page load
RangeValidatorDT.MinimumValue = System.DateTime.Now.ToShortDateString()
RangeValidatorDT.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString()
According to what I know you can't do it, this calendar extender is very easy to use, but very limited, if you use the Calendar control you would be able to enable only the days that you want.

Resources