Questions on UI for ASP.NET AJAX Forum

4 answers

294 views

[Solved] RadGrid Custom Filter OnTextChanged event got triggered twice

Hi There,

I am using a custom filter in my RadGrid, but when debugging I noticed that the OnTextChanged event got triggered twice. However, if I remove the AjaxSetting section, everything works fine. But I do need to config ajax settings in my application. Is there anyone to explain why this is happening? The following is the demo code. Thanks a lot.

TestCustomFilter.aspx

<%@ Page Language="C#" AutoEventWireup="true" EnableViewStateMac="false" ViewStateEncryptionMode="Never" CodeFile="TestCustomFilter.aspx.cs" Inherits="TestCustomFilter" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>

<head id="Head1" runat="server">

<title>Telerik ASP.NET Example</title>

<link rel="Stylesheet" href="../Styles/styles.css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

<div class="demo-container size-medium">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

GridLines="None" AllowPaging="true"

AllowSorting="true" PageSize="10" AllowFilteringByColumn="true">

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"

DataKeyNames="OrderID" Dir="LTR" Frame="Border"

TableLayout="Auto">

<Columns>

<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="OrderID" Display="false"

DataType="System.Int32" FilterListOptions="VaryByDataType" ForceExtractValue="None"

HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="ShipName" HeaderText="Ship Name" SortExpression="ShipName">

<FilterTemplate>

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

</FilterTemplate>

<ItemTemplate>

<asp:HyperLink ID="targetControl" runat="server" NavigateUrl="#" Text='<%# Eval("ShipName") %>'></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn AllowSorting="true" DataField="ShipCountry" HeaderText="Ship Country"

SortExpression="ShipCountry" UniqueName="ShipCountry">

</telerik:GridBoundColumn>

</Columns>

<PagerStyle PageSizeControlType="RadDropDownList" ShowPagerText="false" />

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

TestCustomFilter.aspx.cs

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

using Telerik.Web.UI;

using System.IO;

public partial class TestCustomFilter : System.Web.UI.Page

{

public class MyOrder

{

public int OrderID { get; set; }

public DateTime OrderDate { get; set; }

public double Freight { get; set; }

public string ShipName { get; set; }

public string ShipCountry { get; set; }

}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

LoadData();

}

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

LoadData();

}

private void LoadData()

{

MyOrder _order1 = new MyOrder();

_order1.OrderID = 1;

_order1.OrderDate = new DateTime(2014, 1, 18);

_order1.Freight = 15.61;

_order1.ShipCountry = "Canada";

_order1.ShipName = "David";

MyOrder _order2 = new MyOrder();

_order2.OrderID = 2;

_order2.OrderDate = new DateTime(2015, 9, 12);

_order2.Freight = 12.39;

_order2.ShipCountry = "US";

_order2.ShipName = "Jack";

MyOrder _order3 = new MyOrder();

_order3.OrderID = 3;

_order3.OrderDate = new DateTime(2015, 6, 2);

_order3.Freight = 6.81;

_order3.ShipCountry = "Mexico";

_order3.ShipName = "Howard";

MyOrder _order4 = new MyOrder();

_order4.OrderID = 4;

_order4.OrderDate = new DateTime(2014, 3, 26);

_order4.Freight = 19.92;

_order4.ShipCountry = "Canada";

_order4.ShipName = "William";

MyOrder _order5 = new MyOrder();

_order5.OrderID = 5;

_order5.OrderDate = new DateTime(2015, 5, 15);

_order5.Freight = 9.96;

_order5.ShipCountry = "US";

_order5.ShipName = "Don";

List<MyOrder> _myList = new List<MyOrder>();

_myList.Add(_order1);

_myList.Add(_order2);

_myList.Add(_order3);

_myList.Add(_order4);

_myList.Add(_order5);

RadGrid1.DataSource = _myList;

}

protected void TextBox1_TextChanged(object sender, EventArgs e)

{

TextBox TextBox1 = sender as TextBox;

GridColumn column = RadGrid1.MasterTableView.GetColumnSafe("ShipName");

column.CurrentFilterFunction = GridKnownFunction.Contains;

column.CurrentFilterValue = TextBox1.Text.Trim();

RadGrid1.Rebind();

}

Grid

answered on 16 Sep 2015

4 answers

327 views

RadCalendar Special Days Problem

Hi to all

this is my code how to generate special days in code behind

private void Page_Load(object sender, EventArgs e)

{

var dc =

new takvimDataContext(

"Data Source=xxx;");

var sDays = from tkvm in dc.takvims

where

tkvm.tarih.Year == RadCalendar1.Calendar.GetYear(RadCalendar1.CalendarView.ViewStartDate)

select tkvm;

foreach (var day in sDays)

{

var rcd = new RadCalendarDay {Date = day.tarih,TemplateID = "tatil"};

RadCalendar1.SpecialDays.Add(rcd);

var cl = RadCalendar1.Calendar;

}

and my problem is

i cant display specials days numbers in calendar
they are all empty (In template i make red background to specials days to see are they working ?)
when i try to fill them in template

<CalendarDayTemplates>

<telerik:DayTemplate ID="tatil" runat="server">

<Content>

<div style="background-color:Red">

<%= RadCalendar1.????????????%>

</div>

</Content>

</telerik:DayTemplate>

</CalendarDayTemplates>

How can i show the current date in special days collection ?

Calendar

answered on 16 Sep 2015

9 answers

376 views

Client side service binding, 11 empty rows ?

Hi,

i've implemented a grid databinded with a LinqToSql datasource through client side service
I followed your documentation on demos.telerik.com or telerik.com/help but the grid displays 11 empty rows. (see attached file)

Steps to reproduce:

<telerik:RadGrid ID="RadGrid1" runat="server" Width="300" AllowPaging="True" Skin="Vista" >

<MasterTableView>

<PagerStyle AlwaysVisible="true" />

<CommandItemSettings ShowAddNewRecordButton="false" />

<Columns>

<telerik:GridBoundColumn DataField="RefTransactionTypeID" HeaderText="Transaction Type ID"

SortExpression="RefTransactionTypeID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Wording" HeaderText="Wording"

SortExpression="Wording">

</telerik:GridBoundColumn>

</Columns>

<NoRecordsTemplate>

There are no records to display

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<DataBinding SelectMethod="GetRefTransactions" SelectCountMethod="GetRefTransactionsCount" Location="Service.asmx"

SortParameterType="Linq" FilterParameterType="Linq">

</DataBinding>

</ClientSettings>

</telerik:RadGrid>

Service.asmx:

<%@ WebService Language="C#" CodeBehind="~/App_Code/Service.cs" Class="Service" %>

Service.cs:

[DataContract]

public class MyRefTransactionType

{

[DataMember]

public byte RefTransactionTypeID { get; set; }

[DataMember]

public String Wording { get; set; }

}

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class Service : System.Web.Services.WebService

{

int number = 1;

[WebMethod(EnableSession = true)]

public List<MyRefTransactionType> GetRefTransactions(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression)

{

IQueryable LinqData = DAL.getTransactionTypes(); // LinqToSql access layer

GridLinqBindingData data = RadGrid.GetBindingData(LinqData, startRowIndex, maximumRows, "", "");

var result = data.Data.OfType<DAL.RefTransactionType>().Select(t => new MyRefTransactionType()

{

RefTransactionTypeID = t.TransactionTypeID,

Wording = t.Wording

}).ToList();

number = result.Count;

return result;

}

[WebMethod(EnableSession = true)]

public int GetRefTransactionsCount()

{

return number;

}

My thought was that was not working correctly, because the grid displays 11 empty rows, but i tried to put "return new List<MyRefTransactionType>()", the grid still displays 11 emptys rows.

On page load, the get methods are never called. (breakpoints never reached)

I'm probably doing it wrong, but i can't figure what is wrong, any help ?

Thanks.

Grid

answered on 16 Sep 2015

4 answers

137 views

[Solved] Selected item is cleared on master row edit

We have master-detail grids very similar to the Telerik demo here.

<telerik:RadGrid ID="MasterGrid" runat="server" AllowAutomaticUpdates="True" AllowFilteringByColumn="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="MasterGridDataSource" GroupPanelPosition="Top" ShowGroupPanel="True">

<ClientSettings AllowColumnsReorder="True" EnablePostBackOnRowClick="True">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<Resizing AllowColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="True" />

</ClientSettings>

<MasterTableView CommandItemDisplay="Top" DataKeyNames="OptionsID" DataSourceID="MasterGridDataSource" EditMode="InPlace" AllowMultiColumnSorting="True" ClientDataKeyNames="OptionsID" Caption="Master Grid">

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" Exportable="False">

<HeaderStyle Width="28px" />

</telerik:GridEditCommandColumn>

.

</Columns>

</MasterTableView>

</telerik:RadGrid>

The problem is on master row edit, the master grid SelectedItem is unselected and the child grid is cleared.

Is there any way to keep the selection when entering edit mode?

Grid

answered on 16 Sep 2015

2 answers

438 views

[Solved] hide expand collapse column in radgrid based on child grid values

Hi Team,

I don't want to display the expand/collapse icon if the child grid doesn't contain values.

It should display only the child grid has rows.

Thanks,
Rajesh

Protected Sub Parts_DetailTableDataBind(sender As Object, e As GridDetailTableDataBindEventArgs) Handles Parts.DetailTableDataBind
Dim dataItem As GridDataItem = CType(e.DetailTableView.ParentItem, GridDataItem)
Dim obj As New AutoComplete()
Select Case e.DetailTableView.Name
Case "ComponentDetails"
Dim InventoryID As Integer = CType(dataItem.GetDataKeyValue("InventoryID"), Integer)
e.DetailTableView.DataSource = obj.GetComponentItems(InventoryID)
End Select
End Sub

Grid

answered on 16 Sep 2015

6 answers

644 views

Two-way binding toggle button in grid edit template item

NB. I am posting this self-answered post because I could not find a solution in the forum. Hopefully it will be useful to someone else.

I spent *way* too many hours trying to debug this scenario: I have a GridTemplateColumn with a RadButton as a toggle button. I could not get the toggle button state back from the edit form for the insert and update commands for the life of me. The longer it took to solve, the simpler I knew my error had to be. Unfortunately, I could not find any examples in the demos--they all use simple column binding.

My problem ended up being in my SQL data source: I had declared my "boolean" field as an "int" instead of a "bit". By fixing this, the two way binding worked as desired.

Here is a snippet of my code, with just the RadButton in the template column (there are other controls in my actual application).

<telerik:GridTemplateColumn UniqueName="gtcName" HeaderText="Title">

<ItemTemplate>

<telerik:RadButton ID="rbOpen" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Checked='<%#Bind("isOpen")%>' Height="24" Width="48" ReadOnly="true">

<ToggleStates>

<telerik:RadButtonToggleState ImageUrl="iOpen.png" IsBackgroundImage="false" Value="1" Selected="true" />

<telerik:RadButtonToggleState ImageUrl="iClosed.png" IsBackgroundImage="false" Value="0" />

</ToggleStates>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadButton ID="erbOpen" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Checked='<%#Bind("isOpen")%>' Height="24" Width="48">

<ToggleStates>

<telerik:RadButtonToggleState ImageUrl="iOpen.png" IsBackgroundImage="false" Value="1" Selected="true" />

<telerik:RadButtonToggleState ImageUrl="iClosed.png" IsBackgroundImage="false" Value="0" />

</ToggleStates>

</telerik:RadButton>

</EditItemTemplate>

</telerik:GridTemplateColumn>

In the SQL data source, the column "isOpen" is declared like this, even though it is a "bit" in the SQL database:

<asp:Parameter Name="isOpen" Type="Boolean"/>

Grid

answered on 16 Sep 2015

3 answers

338 views

Radeditor in preview mode, need of the toggle full screen in R/O mode

Hi,
I have a radgrid containing a radeditor per line. The radeditor is set enabled and in previeuw mode. I would like to add the toggle full screen button so the user can open the text in radeditor in fullscreen and R/O.

<telerik:RadEditor runat="server" ID="txtLogText" Enabled="false" EditModes="Preview" Height="140px" Width="1300px" ></telerik:RadEditor>

In attachment you can find a screen shot of the RadGrid so you can see that there is not a lot space to see the content of the radeditor. That's why we need the full screen modus.

Can you please help me?

Kind regards

Suzy

Editor

answered on 16 Sep 2015

1 answer

129 views

Printing Multiple RadPage Views on one Click

Hi,

We've implemented a TabStrip with multiple tabs and content residing in PageViews of Multipage control. We would like to print all content from each pageview when a button is clicked. We want each pageview to be printed in a separate page. I tried selected pageview print from this

It worked perfectly for selected views. I modified the code to append innerHMTL as shown below and i am getting 'undefined' as text in print instead of actual content. Is there a way to print multiple pages in one go irrespective of which tab is active?

function printPageView() {
                var myPageView = $find('<%= RadMultiPage1.ClientID %>');
                  var myIframe = document.getElementById('ifrmPrint');
                  var pvContent = "" // myPageView.get_pageViews().innerHTML;

                  var multiPage = $find("<%=RadMultiPage1.ClientID %>");
                  var i;
                  for (i = 0; i < myPageView.get_pageViews().get_count() ; i++) {
                     // alert(multiPage.get_pageViews().getPageView(i).get_id());
                      pvContent += multiPage.get_pageViews().getPageView(i).innerHTML;
                  }

                  var myDoc = (myIframe.contentWindow || myIframe.contentDocument);
                  if (myDoc.document) myDoc = myDoc.document;
                  myDoc.write("<html><head><title>title</title>");
                  myDoc.write("</head><body onload='this.focus(); this.print();'>");
                  myDoc.write(pvContent + "</body></html>");
                  myDoc.close();
              }

TabStrip

answered on 16 Sep 2015

2 answers

194 views

RadGrid InLine Edit, Set Textbox Skin

I have an inline edit form on a radgrid. I am using the Glow skin and usually the textbox is black and the text is white, however both the text and textbox background colour are being rendered white for the inline edit form. How can I set the skin for the textboxes while in inline edit mode? The inline edit form is not specified I am using the automatic rendering.

Cheers

Caolan

Grid

answered on 16 Sep 2015

1 answer

365 views

show the values of textboxes in grid on button click

I have some combo box whose values should be shown in gridview as the user clicks on submit button. Each time after filling the form, the data should be shown in grid view after pressing the submit button. How to write logic for this in code behind page.

<telerik:RadAjaxPanel ID="mainpanel" runat="server">

<table border="0" width="100%">

<tr>

<td>

<telerik:RadTextBox ID="txtName" runat="server" Width="260px" TextMode="SingleLine" MaxLength="65" Style="text-transform: uppercase;"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="submit" Text="Confirm" runat="server" OnClick="confirm_Click" />

</td>

</tr>

</table>

<telerik:RadGrid ID="gridConfirmSelection" runat="server" PageSize="100" AllowSorting="false" Width="100%"

AllowPaging="True" ShowGroupPanel="false" AutoGenerateColumns="false" GridLines="None" >

<MasterTableView AutoGenerateColumns="false" AllowFilteringByColumn="false" ShowFooter="false" TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn HeaderText="Name"></telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Address"></telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Contact No." ></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

On pressing Confirm button the data should be shown in grid view. How to write logic for this in code behind page?

Grid

answered on 16 Sep 2015