Questions on UI for ASP.NET AJAX Forum

1 answer

140 views

The problem is that, we cannot use Find and Replace command in HTML mode of the Telerik ASP.NET AJAX editor.
Tested via IE11, Mozilla 31, FireFox 28, Chrome 34 at:
http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Results:

In Chrome the button is active, but it's not working.
http://screencast.com/t/wvU58rQg1y

In the Internet Explorer 10 the functionallity worked, but in the IE 11 it becomes not enabled:
http://screencast.com/t/Ut9BdJdPMAFg

The FireFox browser of 28 or 31 version shows the same results:
http://screencast.com/t/kkPFsppeW

* Is this a bug?
* Is there are a way to make it working in all of browsers?
* Is there are a way to make it working in some of browsers?

---
Thanks

Editor

answered on 21 Apr 2014

2 answers

169 views

Graphical problem for FilterChecklist

Hi everyone!

I have created a sharepoint webpart containing a radgrid with a little customized filterchecklist; here's my code.

.aspx page:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Assembly Name="Telerik.Web.UI, Version=2014.1.403.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2014.1.403.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RadGridWebPartUserControl.ascx.cs" Inherits="CheckListFiltering.RadGridWebPart.RadGridWebPartUserControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

.HoverClass

{

background-color: aqua;

}

.ClickClass

{

background-color: yellow;

}

.RadFilterMenu_CheckList

{

height: 300px;

width: 200px;

}

</style>

<script type="text/javascript">

Telerik.Web.UI.RadGrid.prototype._checkListItemsRequestedHandler = function () {

var items = $find(this._filterCheckListClientID).get_items();

var count = items.get_count();

for (var i = 0; i < count; i++) {

var value = items.getItem(i).get_value().toString();

if (value != "0")

items.getItem(i).check();

else

items.getItem(i).uncheck();

items.getItem(i).set_value(items.getItem(i).get_text());

}

function RowCreated(sender, eventArgs) {

var dataItem = eventArgs.get_gridDataItem();

for (var i = 0; i < dataItem.get_element().cells.length; i++) {

dataItem._element.cells[i].onmouseover = function () {

this.className = "HoverClass";

}

dataItem.get_element().cells[i].onmouseout = function () {

var cssName = this.selected ? "ClickClass" : this.defaultStatus;

this.className = cssName;

return;

}

dataItem.get_element().cells[i].onclick = function (event) {

this.selected = this.selected == true ? false : true;

var cssName = this.selected ? "ClickClass" : this.defaultStatus;

this.className = cssName;

return;

}

</script>

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

<telerik:RadGrid runat="server" ID="RadGrid1" AllowFilteringByColumn="true" FilterType="CheckList" EnableLinqExpressions="false"

OnNeedDataSource="RadGrid1_NeedDataSource" OnFilterCheckListItemsRequested="RadGrid1_NeedCheckListItems">

<MasterTableView AutoGenerateColumns="false">

<Columns />

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowCreated="RowCreated" />

</ClientSettings>

</telerik:RadGrid>

.aspx.cs:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using Telerik.Web.UI;

namespace CheckListFiltering.RadGridWebPart

{

public partial class RadGridWebPartUserControl : UserControl

{

private const int VISIBLE = 1;

private const int FILTER = 0;

private const int INVISIBLE = -1;

private const int UNKNOWN = 99;

private static bool Paging; // Paging(true) - Scrolling(false)

private static DataTable Data = new DataTable(); // Contenuto della griglia

private static DataTable DataFiltered; // Contenuto della griglia filtrata

private static int[,] Status; // Struttura ausiliaria utile al riempimento delle "FilterCheckList"

// Inizializzazione dello "ScriptManager" (ad ogni caricamento della pagina), dei dati membro e della griglia (solo al caricamento iniziale)

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);

if (scriptManager == null)

{

scriptManager = new RadScriptManager();

this.Page.Form.Controls.AddAt(0, scriptManager);

}

if (Data.Rows.Count == 0)

{

DataSet Ds = new DataSet();

Ds.ReadXml("C:\\Temp\\App_Data\\data.xml"); // TODO: Read parameter

Paging = true; // TODO: Read parameter

Data = Ds.Tables[0];

DataFiltered = Data.Select("").Length != 0 ? Data.Select("", Data.Columns[0].ColumnName + " ASC").CopyToDataTable() : new DataTable();

Status = new int[Data.Rows.Count, Data.Columns.Count];

for (int i = 0; i < Data.Rows.Count; i++)

for (int j = 0; j < Data.Columns.Count; j++)

Status[i, j] = VISIBLE;

RadGrid1.Width = 220 * Data.Columns.Count;

if (Paging)

{

RadGrid1.AllowPaging = true;

RadGrid1.PagerStyle.AlwaysVisible = true;

}

else

{

RadGrid1.ClientSettings.Scrolling.AllowScroll = true;

RadGrid1.ClientSettings.Scrolling.ScrollHeight = 300;

}

for (int i = 0; i < Data.Columns.Count; i++)

{

GridBoundColumn Column = new GridBoundColumn();

RadGrid1.MasterTableView.Columns.Add(Column);

Column.DataField = Data.Columns[i].ColumnName;

Column.UniqueName = Data.Columns[i].ColumnName;

Column.HeaderText = Data.Columns[i].ColumnName;

Column.FilterDelay = 200;

Column.FilterCheckListEnableLoadOnDemand = true;

}

// Filtraggio e databinding della griglia

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

String filterExpression = Fix_Expression(RadGrid1.MasterTableView.FilterExpression);

DataFiltered = Data.Select(filterExpression).Length != 0 ? Data.Select(filterExpression, Data.Columns[0].ColumnName + " ASC").CopyToDataTable() : new DataTable();

Set_Status(filterExpression);

RadGrid1.DataSource = DataFiltered;

}

// Creazione delle "FilterCheckList"

public void RadGrid1_NeedCheckListItems(object sender, GridFilterCheckListItemsRequestedEventArgs e)

{

int col_index = Get_Index(e.Column.UniqueName);

DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");

for (int i = 0; i < dr.Length; i++)

{

if (!Status[i, col_index].Equals(INVISIBLE))

{

RadListBoxItem Item = new RadListBoxItem();

Item.Text = Convert.ToString(dr[i][col_index]);

Item.Value = Convert.ToString(Status[i, col_index]);

bool Found = false;

for (int k = 0; k < e.ListBox.Items.Count; k++)

{

if (e.ListBox.Items[k].Text.Equals(Item.Text))

{

Found = true;

break;

}

if (!Found)

e.ListBox.Items.Add(Item);

}

// Utility per la manipolazione della "FilterExpression"

public String Fix_Expression(String filterExpression)

{

String newExpression = "";

for (int i = 0; i < Data.Columns.Count; i++)

{

if ( RadGrid1.MasterTableView.Columns[i].EvaluateFilterExpression().Contains("=") )

{

String expression = RadGrid1.MasterTableView.Columns[i].EvaluateFilterExpression();

String col_name = expression.Substring(expression.IndexOf("[") + 1, expression.IndexOf("]") - expression.IndexOf("[") - 1);

String value = expression.Substring(expression.IndexOf("'") + 1, expression.LastIndexOf("'") - expression.IndexOf("'") - 1);

filterExpression = filterExpression + " AND ([" + col_name + "] LIKE '" + value + "%')";

}

String[] Expression = filterExpression.Split(new String[] { " AND " }, StringSplitOptions.RemoveEmptyEntries);

for (int k = 0; k < Expression.Length; k++)

{

if (Expression[k].Contains("LIKE"))

Expression[k] = Expression[k].Replace("'%", "'");

else

{

DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");

String col_name = Expression[k].Substring(Expression[k].IndexOf("[") + 1, Expression[k].IndexOf("]") - Expression[k].IndexOf("[") - 1);

int col_index = Get_Index(col_name);

for (int i = 0; i < Data.Rows.Count; i++)

{

if (Status[i, col_index].Equals(INVISIBLE))

Expression[k] = Expression[k].Remove(Expression[k].LastIndexOf(")")) + " OR ([" + col_name + "] = '" + Convert.ToString(dr[i][col_index]) + "'))";

}

newExpression = (k != (Expression.Length - 1)) ? newExpression + Expression[k] + " AND " : newExpression + Expression[k];

}

return newExpression.Replace("||"," OR ");

}

// Utility per la modifica di "Status" sulla base del valore della "FilterExpression"

public void Set_Status(string filterExpression)

{

for (int j = 0; j < Data.Columns.Count; j++)

{

if (!filterExpression.Contains(Data.Columns[j].ColumnName))

{

for (int i = 0; i < Data.Rows.Count; i++)

Status[i, j] = Status[i, j].Equals(FILTER) ? UNKNOWN : Status[i, j];

}

String[] Expression = filterExpression.Split(new String[] { " AND " }, StringSplitOptions.RemoveEmptyEntries);

for (int k = 0; k < Expression.Length; k++)

{

DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");

String col_name = Expression[k].Substring(Expression[k].IndexOf("[") + 1, Expression[k].IndexOf("]") - Expression[k].IndexOf("[") - 1);

int col_index = Get_Index(col_name);

if ( !Expression[k].Contains("LIKE") )

{

for (int i = 0; i < Data.Rows.Count; i++)

{

if ( Expression[k].Contains(Convert.ToString("'" + dr[i][col_index] + "'")) )

Status[i, col_index] = Status[i, col_index].Equals(FILTER) ? UNKNOWN : Status[i, col_index];

else

Status[i, col_index] = FILTER;

}

for (int i = 0; i < Data.Rows.Count; i++)

for (int j = 0; j < Data.Columns.Count; j++)

{

if (!Is_Filtered(i))

Status[i, j] = VISIBLE;

if (Is_Filtered(i) && !Status[i, j].Equals(FILTER))

Fix_Element(i, j);

}

// Utility di supporto alla modifica di "Status"

public void Fix_Element(int row_index, int col_index)

{

bool Invisible = true;

DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");

for (int i = 0; i < dr.Length; i++)

{

if

(i != row_index && Convert.ToString(dr[i][col_index]).Equals(Convert.ToString(dr[row_index][col_index])) && !Is_Filtered(i))

{

Invisible = false;

break;

}

Status[row_index, col_index] = Invisible ? INVISIBLE : VISIBLE;

}

// Utility che verifica se una specifica riga della griglia è filtrata o meno

public bool Is_Filtered(int index)

{

for (int j = 0; j < Data.Columns.Count; j++)

{

if (Status[index, j].Equals(FILTER))

return true;

}

return false;

}

// Utility che restituisce l'indice di una colonna della tabella a partire dal suo nome

public int Get_Index(String name)

{

for (int j = 0; j < Data.Columns.Count; j++)

{

if (Data.Columns[j].ColumnName.Equals(name))

return j;

}

return -1;

}

as you can see in the attached file there's a little graphical problem (double scroll bar and disallignment of button Apply and button Cancel); how can i solve it using css class ".RadFilterMenu_CheckList" or other way?

Thanks in advance.
Regards Giulio.

Grid

answered on 21 Apr 2014

2 answers

211 views

FilterStyle-CssClass??

I have a radGrid using

FooterStyle-CssClass="preOwnedTierColumn" HeaderStyle-CssClass="preOwnedTierColumn" ItemStyle-CssClass="preOwnedTierColumn"

I am build a responsive design web site. With media queries to hide columns for a certain screen width. In this case I have a css class called 'preOwnedTierColumn' in which I set to display:none when the screen is less than x px.

This all works fine for the header, item and footer, but there is no FilterStyle-CssClass available. I cannot seem to be able to assign the filter template a class or and ID to apply the css rules.

I tried wrapping the content of the filter template in a div with the class of 'preOwnedTierColumn', but this only resulted in the contents not being visible, there is still a TD that is generated and takes on the width of the column in the item, I need the whole TD to be invisible.

<FilterTemplate>

<div class="preOwnedTierColumn">

<telerik:RadComboBox ID="RadComboBoxPreOwnedTier" CssClass="preOwnedTierColumn" runat="server" EnableScreenBoundaryDetection="false" ExpandDirection="Down" AppendDataBoundItems="true" DataSourceID="PreOwnedTierDataSource" DataTextField="Pre-Owned Tier" DataValueField="Pre-Owned Tier" DropDownAutoWidth="Enabled" MarkFirstMatch="true" AutoPostBack="true" OnSelectedIndexChanged="RadComboBoxPreOwnedTier_SelectedIndexChanged"

SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("PreOwnedTier").CurrentFilterValue%>' Sort="Ascending" SortCaseSensitive="False" Width="78px">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<div style="height: 35px; margin-top: 10px;"> </div>

</div>

</FilterTemplate>

Any thoughts on how I can apply a css style to a filterTemplate?

Grid

answered on 21 Apr 2014

2 answers

332 views

GridColumnGroup Header Text Change at Runtime

Hi All, Just wondering on how can I change the value of my GridColumnGroup Header Text at Runtime? Reason is that the Header text needs to be changed based on variable being passed, and some header is date based.

Thanks in advance,
Rj

Grid

answered on 21 Apr 2014

3 answers

164 views

RecurrenceRule.TryParse -- throwing exceptions

We've found some cases where calling RecurrenceRule.TryParse ends up throwing an exception.
//in namespace Telerik.Web.UI
RecurrenceRule blah;
RecurrenceRule.TryParse("DTSTART:20140417T224500Z\r\nDTEND:20140417T234500Z\r\nRRULE:FREQ=YEARLY;INTERVAL=8;COUNT=1;\r\n", out blah); //exception
RecurrenceRule.TryParse("DTSTART:20140417T224500Z\r\nDTEND:20140417T234500Z\r\nRRULE:FREQ=DAILY;INTERVAL=8;COUNT=1;\r\n", out blah); //ok
RecurrenceRule.TryParse("DTSTART:20140417T224500Z\r\nDTEND:20140417T234500Z\r\nRRULE:FREQ=MONTHLY;INTERVAL=8;COUNT=1;\r\n", out blah); //exception
RecurrenceRule.TryParse("DTSTART:20140417T224500Z\r\nDTEND:20140417T234500Z\r\nRRULE:FREQ=MONTHLY;INTERVAL=1;COUNT=1;\r\n", out blah); //exception
RecurrenceRule.TryParse("DTSTART:20140417T224500Z\r\nDTEND:20140417T234500Z\r\nRRULE:FREQ=YEARLY;INTERVAL=1;COUNT=1;\r\n", out blah); //exception

Now, we can obviously wrap these calls in try/catch blocks or try to make the strings valid, but that defeats the entire purpose of the TryParse methods. They should return false if the string being passed in representing the datatype's value is invalid and/or not well formatted.

Scheduler

answered on 21 Apr 2014

1 answer

112 views

Drag & Drop Appointment from ListView

Hi,

Can any one help me with detail C# Code example.
My Question is I want to bind the ListView with DataSet which have the following coloumns i-ID, ii-Name, iii-Detial, iv-PictureURL
so after binding I can drag the record from ListView on Scheduler once I drop the record on scheduler a popup window should appear where I can update the time. I can delete this record also from scheduler, once I delete it should appear in ListView.
at Last once I pressed confirm button all the appointments should save into database with that ID & NAME.

Please help regarding this question with detail code example. thank you me waiting quick response ASAP

Scheduler

answered on 21 Apr 2014

7 answers

112 views

Transfer data between ORG Chart and List box

Hello,
I'm trying to use drag and drop to transfer a row from list box to chart as the demo example (Transfer Employees) but with single binding, i handle the server function AjaxRequest and bind the new data to chart ,, but on screen it doesn't show new data !!!

Protected Sub GeneralManeger_AjaxRequest(sender As Object, e As Telerik.Web.UI.AjaxRequestEventArgs)

Dim seps As Char() = {"-"c}

Dim textAndIds As String() = e.Argument.Split(seps, StringSplitOptions.None)

Dim sep As Char() = {":"c}

Dim stringIds As String() = textAndIds(2).Split(sep, StringSplitOptions.RemoveEmptyEntries)

Dim ids As Integer() = New Integer(stringIds.Length - 1) {}

For i As Integer = 0 To stringIds.Length - 1

ids(i) = Int32.Parse(stringIds(i))

Next

If textAndIds(0) = "drop" Then

Dim newText As String = textAndIds(1)

Dim node As OrgChartNode = AdminOccupationsChart.GetNodeByHierarchicalIndex(ids)

Dim row = (From myRow In Occupations_List.AsEnumerable() Where myRow.RecordName = newText Select myRow).SingleOrDefault

ChartList.Add(New Entities.Extensions.AnonymousTypes.HirarchicalClass With

{.ClusterCode = row.ClusterCode, .PropertyCode = row.PropertyCode, .RecordCode = row.RecordCode, .ParentRecordCode = node.ID, .OriginalRecordCode = row.OriginalRecordCode, .RecordName = row.RecordName, .RecordNameAlternate = row.RecordNameAlternate})

AdminOccupationsChart.DataFieldID="RecordCode"

AdminOccupationsChart.DataFieldParentID="PArentRecordCode"

AdminOccupationsChart.DataSource = ChartList

AdminOccupationsChart.DataBind()

OccupationsList.DataSource = Occupations_List

OccupationsList.DataBind()

End Sub

OrgChart

answered on 21 Apr 2014

3 answers

166 views

Change the visibility of item template

Hi,
in my org chart i add two item template (DeleteBtn,PopUpBtn)
item (DeleteBtn) want to be visible on last level node and item (PopUpBtn) visible on parents node
how can i do it after binding data from database ??

and the item (Name) not always take the same (Container.DataItem) i want to change it at binding the data

should I add the template at run time or how ??

<telerik:RadOrgChart ID="AdminOccupationsChart" runat="server" LoadOnDemand="NodesAndGroups" EnableCollapsing="true"

EnableDragAndDrop="true" >

<ItemTemplate>

<strong id="Name"> <%# DataBinder.Eval(Container.DataItem, "RecordName")%></strong>

<button id="DeleteBtn" title="Remove" class="rocRemoveItemButton" />

<button id="PopUpBtn" title="Open" class="rocOpenPopupButton" />

</ItemTemplate>

</telerik:RadOrgChart>

OrgChart

answered on 21 Apr 2014

1 answer

187 views

Radgrid EnableEmbeddedSkins,EnableEmbeddedBaseStylesheet="false" also disable for pager style

Hi Telerik,

When i disable telerik embeddedskin and basestylesheet on my radgrid as i am using my custom cssclass to design it but it also disable pagerstyle skins on my pagerstyle as below.

<telerik:RadGrid EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" CssClass="table table-striped table-bordered table-hover">
<PagerStyle Mode="Slider">
</PagerStyle>
</telerik:RadGrid>

I want to disable it for radgrid but not for pagerstyle so i need something like this:

<telerik:RadGrid EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" CssClass="table table-striped
table-bordered table-hover">
<PagerStyle Mode="Slider" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="true">
</PagerStyle>
</telerik:RadGrid>

Hope to get help from you.

Thanks in Advance,
Harry

Grid

answered on 21 Apr 2014

1 answer

177 views

find rad grid column value client side on rowselected event.

Hi,
I want to get the value of rad grid column on row selection in client side. The Column value is Boolean type.
My Grid Column Code is

<telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Left" UniqueName="IsDefault" HeaderText="Default" >

<ItemTemplate>

<asp:Label Id="default" runat="server" Text='<%# Convert.ToBoolean(Eval("IsDefault")) == true ? "Yes" : "No" %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn

>

Client side code:

 function gv_SubAccount_RowSelected(sender, args) {

         var grid = sender;

         var MasterTable = grid.get_masterTableView();

       

         var rowEl = MasterTable.get_dataItems()[2].get_element();

       

         var def = $telerik.findElement(rowEl, "default").innerHTML;

          alert(def);//it return always Yes why?.

return false;

}

How can get the value column value on OnRowSelected client side.
Please Provide solutions.

Thanks,
Rahul

Grid

answered on 21 Apr 2014