Questions on UI for ASP.NET AJAX Forum

1 answer

683 views

Bind Web API Json to Radgrid in client side

Hi Everyone,

I am new to Telerik world and I am very much impressed with telerik controls. My requirement is to bind web API json data to radgrid in client side(wanted to implement paging and sorting also in client side).And also when I click on my first column link button, popup window should show the selected row data
Below is my code.

Somehow data is binding to radgrid, but when I click on next page in paging nothing is showing(radgrid not displaying). And I am stuck in pass the selected row data to popup(rad window)

Please help me on this.
================================
jsonRadgridBind.aspx
================================
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jsonRadgridBind.aspx.vb" Inherits="defaultvb.jsonRadgridBind" %>
<!DOCTYPE html>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<telerik:RadCodeBlock ID="AnnualProcessAdmin_RadCodeBlock" runat="server">
<style type="text/css">
.rgRow, .rgAltRow {
height: 40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {

jQuery.support.cors = true;
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'JSON',
url: 'http://localhost:5000/api/spaclasslegend',
success: function (result) {

GridData = result;
if (GridData.length > 0) {

var tableView = $find("<%=ClassGrid.ClientID %>").get_masterTableView();
tableView.set_dataSource(GridData);
tableView.dataBind();
}
},
error: function () {
alert('Error on binding the data');
}
});
});
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div class="demo-container no-bg">
<div id="grid">

<telerik:RadAjaxPanel ID="ClassSearchRadAjaxPanel" runat="server">
<telerik:RadWindowManager ID="ClassDetailRadWindowManager" runat="server" SkinID="radWindowManager"></telerik:RadWindowManager>
<telerik:RadWindow ID="ClassDetailModal" SkinID="radWindowModal" runat="server" Width="990" Height="700" />

<telerik:RadGrid ID="ClassGrid" runat="server" SkinID="basicRadGrid"
EnableLinqExpressions="false" ShowFooter="false" PageSize="3" AllowPaging="true" PagerStyle-AlwaysVisible="true"
AllowFilteringByColumn="true" FilterItemStyle-HorizontalAlign="Left"
Visible="true">
<ClientSettings EnablePostBackOnRowClick="true">
<ClientEvents OnCommand="function(){}" />
<Scrolling FrozenColumnsCount="0" />
</ClientSettings>
<FilterMenu />
<MasterTableView
ClientDataKeyNames="atrSpaCityDistrictId,CityDistrict,legend,classCode,isActive" DataKeyNames="atrSpaCityDistrictId,CityDistrict,legend,classCode,isActive">
<CommandItemSettings ShowAddNewRecordButton="false" ShowCancelChangesButton="false" ShowRefreshButton="false" ShowExportToExcelButton="true" />
<Columns>
<telerik:GridTemplateColumn DataField="CityDistrict" HeaderText="City/District" UniqueName="CityDistrict">
<ItemTemplate>
<asp:LinkButton ID="lnkCityDistrict" runat="server"></asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="legend" HeaderText="legend" ColumnEditorID="GridTextBoxEditor">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="classCode" HeaderText="classCode" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="isActive" HeaderText="isActive" ColumnEditorID="GridTextBoxEditor">
</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="atrSpaCityDistrictId" HeaderText="atrSpaCityDistrictId" UniqueName="atrSpaCityDistrictId" Display="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblId"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>

</telerik:RadGrid>
</telerik:RadAjaxPanel>
</div>

</div>
</form>

</body>
</html>
===========================
Json data
===========================
[{"classDesc":"SIDEWALK, DRIVEWAY, CURB","classCode":"EH","legend":"017","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0AB0A7400011202"},
{"classDesc":"SIDEWALK, DRIVEWAY, CURB ","classCode":"EH","legend":"017","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0AD8BCA00011202"},
{"classDesc":"REFUSE SERVICE ","classCode":"EG","legend":"186","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0A0B35200011202"}]

Grid

answered on 19 Oct 2016

2 answers

175 views

Master page - Content Page radajaxpanel postback problem

Hi,

I have a master page and content page in my application.

There is a ragdrid in content page, when i expand radgrid detail table page is refresing i cant handled it.

But, i try same code in page without site.master page and works well.

There is code sample:

MASTER PAGE:

..

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<uc1:LeftMenu ID="cntLeftMenu" runat="server" />
<asp:Literal ID="mySiteLiteral" runat="server"></asp:Literal>

</form>

</body>

CONTENT PAGE:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="TaskMonitor.aspx.cs" Inherits="F8.ReportServer.Pages.TaskMonitor" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<style>
body > div.RadGrid {
border: 0 none;
background: transparent;
}

body > div table.rgMasterTable {
border-collapse: separate !important;
}

body > div table.rgMasterTable th {
border: 1px solid #4e75b3 !important;
}
</style>
<div class="main-menu-top-bar">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="width: 75%; padding-left: 30px; height: 30px;" align="left" valign="middle">
<span style="color: rgb(136, 136, 136); font-size: 21px; font-weight: bold">Task Monitor</span>

</td>
</tr>
</tbody>
</table>
</div>
<div class="content-div">
<asp:HiddenField ID="hidden_ReportId" runat="server" />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 100%;" valign="top">
<div class="project-header">
<div class="project-inner-noimage" style="margin: 0px 10px 35px 15px !important">

<telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="rdGrid" DecoratedControls="All" EnableRoundedCorners="false" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Silk" />
<%-- Grid wrapper--%>
<div id="rdGrid">

<telerik:RadAjaxPanel ID="radajaxpanel1" runat="server">
<telerik:RadGrid
Font-Size="Small"
RenderMode="Lightweight"
ID="RadGrid1"
Culture="tr-TR"
AllowFilteringByColumn="True"
runat="server"
EnableHeaderContextMenu="True"
EnableHeaderContextFilterMenu="True"
ClientSettings-Resizing-AllowResizeToFit="true"
AllowPaging="True"
PagerStyle-AlwaysVisible="true"
AllowSorting="True"
ShowStatusBar="True"
AutoGenerateColumns="False"
AllowMultiRowSelection="True"
EnableLinqExpressions="False"
FooterStyle-Font-Size="Smaller"
OnItemDataBound="RadGrid1_ItemDataBound"
OnNeedDataSource="RadGrid1_NeedDataSource"
ShowFooter="True"
OnDeleteCommand="RadGrid1_DeleteCommand"
ShowGroupPanel="True"
OnDetailTableDataBind="RadGrid1_DetailTableDataBind">

<GroupingSettings CollapseAllTooltip="Collapse all groups" />
<ExportSettings>
<Pdf PageWidth="">
</Pdf>
</ExportSettings>
<ClientSettings AllowDragToGroup="True" EnableRowHoverStyle="true">
<Selecting AllowRowSelect="True" />
<Resizing AllowResizeToFit="True" />
</ClientSettings>
<MasterTableView Font-Size="Smaller" AutoGenerateColumns="false" CommandItemDisplay="Top" DataKeyNames="TASK_ID,ROWSTATE,HAVE_SUB_TASK_ERROR" Name="MasterTable" PageSize="20">
<HeaderStyle Width="70px" />
<%-- <GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="CATEGORY" FieldName="CATEGORY"></telerik:GridGroupByField>
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="CATEGORY" SortOrder="Descending"></telerik:GridGroupByField>
</GroupByFields>
</telerik:GridGroupByExpression>

</GroupByExpressions>--%>

<CommandItemTemplate>
<script type="text/javascript">

function AddNewClicking(button, args) {
window.location = button.get_navigateUrl();
args.set_cancel(true);
}
function ConfirmBox(button, args) {
return confirm("Are you sure to delete ?");
}

</script>

<table width="100%">
<tr>
<td width="30%">
<telerik:RadButton ID="rdAddNew" runat="server" NavigateUrl="AddNewSchedule.aspx" OnClientClicking="AddNewClicking" RenderMode="Lightweight" Text="Add New">
<Icon PrimaryIconCssClass="rbAdd" />
</telerik:RadButton>
<telerik:RadButton ID="rdDeleteSelectedTask" runat="server" OnClick="rdDeleteSelectedTask_Click" OnClientClicking="ConfirmBox" RenderMode="Lightweight" Text="Delete Selected">
<Icon PrimaryIconCssClass="rbRemove" />
</telerik:RadButton>
<telerik:RadButton ID="rdShowAllList" runat="server" Visible='<%# QueryWhereStr == null ? false:true %>'
OnClick="rdShowAllRecords_Click" RenderMode="Lightweight" Text="Show All Records">
<Icon PrimaryIconCssClass="rbRefresh" />
</telerik:RadButton>
</td>
<td width="40%"></td>
<td width="30%" align="right">
<telerik:RadButton ID="rdRefresh" runat="server" OnClick="rdShowAllRecords_Click" RenderMode="Lightweight" Text="Refresh">
<Icon PrimaryIconCssClass="rbRefresh" />
</telerik:RadButton>
</td>
</tr>
</table>

</CommandItemTemplate>
<DetailTables>
<telerik:GridTableView runat="server" AllowFilteringByColumn="false" AllowMultiRowSelection="True" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="PARENT_TASK_ID,TASK_ID,ROWSTATE" EnableHierarchyExpandAll="true" Font-Size="Smaller" Name="Detail" ShowFooter="false" Width="100%">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="PARENT_TASK_ID" MasterKeyField="TASK_ID" />
</ParentTableRelation>
<Columns>
<telerik:GridClientSelectColumn FooterStyle-Width="2px" HeaderStyle-Width="2px" ItemStyle-Width="2px" UniqueName="ClientDetailSelectColumn">
<FooterStyle Width="2px" />
<HeaderStyle Width="2px" />
<ItemStyle Width="2px" />
</telerik:GridClientSelectColumn>

<telerik:GridTemplateColumn HeaderText="ID" HeaderStyle-Width="10px" ItemStyle-Width="10px"
FooterStyle-Width="10px" AllowFiltering="false">
<ItemTemplate>
<a href='<%# String.Format("TaskDetail.aspx?TaskId={0}&KullaniciId={1}", Eval("TASK_ID"),Session["KULLANICI_KODU"]) %>'><%#Eval("TASK_ID") %></a>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Schedule Name" HeaderStyle-Width="200px" ItemStyle-Width="200px"
FooterStyle-Width="200px" AllowFiltering="true">
<ItemTemplate>
<a href='<%# String.Format("TaskDetail.aspx?TaskId={0}&KullaniciId={1}", Eval("TASK_ID"),Session["KULLANICI_KODU"]) %>'><%#Eval("SCHEDULE_NAME") %></a>

</ItemTemplate>

</telerik:GridTemplateColumn>

<%--<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="REF1" DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="20px" HeaderStyle-Height="5px" HeaderStyle-Width="20px" HeaderText="Ref 1" SortExpression="REF1" UniqueName="REF1">
<HeaderStyle Height="5px" Width="20px" />
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="REF2" DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="20px" HeaderStyle-Height="5px" HeaderStyle-Width="20px" HeaderText="Ref 2" SortExpression="REF2" UniqueName="REF2">
<HeaderStyle Height="5px" Width="20px" />
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="REF3" DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="20px" HeaderStyle-Height="5px" HeaderStyle-Width="20px" HeaderText="Ref 3" SortExpression="REF3" UniqueName="REF3">
<HeaderStyle Height="5px" Width="20px" />
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="REF4" DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="20px" HeaderStyle-Height="5px" HeaderStyle-Width="20px" HeaderText="Ref 4" SortExpression="REF4" UniqueName="REF4">
<HeaderStyle Height="5px" Width="20px" />
</telerik:GridDateTimeColumn>--%>
<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"
DataField="ROWVERSION" DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true"
FilterControlAltText="" FilterControlWidth="160px" HeaderStyle-Height="5px" HeaderStyle-Width="160px" HeaderText="Last Modified" SortExpression="ROWVERSION" UniqueName="ROWVERSION">
<HeaderStyle Height="5px" Width="160px" />
</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"
DataField="LAST_ERROR" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText=""
FilterControlWidth="300px" HeaderStyle-Width="300px" HeaderText="Last Error" ItemStyle-Width="300px" SortExpression="LAST_ERROR"
UniqueName="LAST_ERROR">
<HeaderStyle Width="200px" />
<ItemStyle Width="200px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderStyle-Width="80px" ItemStyle-Width="80px" AllowFiltering="false"
AllowSorting="false" HeaderText="State" UniqueName="OrderDate">
<HeaderStyle Height="5px" Width="80px" />
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Visible="false" Width="10" />
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ROWSTATE")%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmText="Are you sure to delete this task ?" FilterControlAltText="Filter DeleteColumn column" HeaderStyle-Width="5px" HeaderText="Delete" ItemStyle-Width="5px" Resizable="false" Text="Delete" UniqueName="DeleteDetail">
<HeaderStyle CssClass="rgHeader ButtonColumnHeader" />
<ItemStyle CssClass="ButtonColumn" />
</telerik:GridButtonColumn>
</Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="PARENT_TASK_ID" />
</SortExpressions>
<PagerStyle AlwaysVisible="True" />
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridClientSelectColumn FooterStyle-Width="2px" HeaderStyle-Width="2px" ItemStyle-Width="2px" UniqueName="ClientSelectColumn">
<FooterStyle Width="2px" />
<HeaderStyle Width="2px" />
<ItemStyle Width="2px" />
</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="TASK_ID" HeaderText="TASK_ID" UniqueName="TASK_ID" Visible="false">
</telerik:GridBoundColumn>
<%-- <telerik:GridBoundColumn AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="SCHEDULE_NAME" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="300px" HeaderStyle-Width="300px" HeaderText="Schedule Name" ItemStyle-Width="300px" SortExpression="SCHEDULE_NAME" UniqueName="SCHEDULE_NAME">
<HeaderStyle Width="300px" />
<ItemStyle Width="300px" />
</telerik:GridBoundColumn>--%>
<telerik:GridTemplateColumn HeaderText="Schedule Name" HeaderStyle-Width="200px" ItemStyle-Width="200px"
FooterStyle-Width="200px" AllowFiltering="true">
<ItemTemplate>
<a href='<%# String.Format("TaskDetail.aspx?TaskId={0}&KullaniciId={1}", Eval("TASK_ID"),Session["KULLANICI_KODU"]) %>'><%#Eval("SCHEDULE_NAME") %></a>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn AllowFiltering="true" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"
DataField="NAME" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" HeaderStyle-Width="150px"
HeaderText="Name" SortExpression="NAME" UniqueName="NAME">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="CHILD_TASK_COUNT" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" HeaderStyle-Width="30px" HeaderText="Task Count" SortExpression="CHILD_TASK_COUNT" UniqueName="CHILD_TASK_COUNT">
<HeaderStyle Width="30px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn AllowFiltering="true" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="CATEGORY" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" HeaderStyle-Width="90px" HeaderText="Category" SortExpression="CATEGORY" UniqueName="CATEGORY">
<HeaderStyle Width="90px" />
<FilterTemplate>
<telerik:RadComboBox Width="90px" runat="server"
DropDownAutoWidth="Enabled" AppendDataBoundItems="true"
DataSourceID="SqlCategoryList"
DataTextField="CATEGORY"
DataValueField="CATEGORY" DropDownWidth="90px" OnClientSelectedIndexChanged="categoryChanged"
RenderMode="Lightweight"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("CATEGORY").CurrentFilterValue %>'>
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
<script type="text/javascript">

function categoryChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("CATEGORY", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>

</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn AllowFiltering="false" AllowSorting="true" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" DataField="ROWVERSION"
DataFormatString="{0:dd.MM.yyyy hh:mm}" Display="true" FilterCheckListEnableLoadOnDemand="true" FilterControlAltText="" FilterControlWidth="110px"
HeaderStyle-Width="110px" HeaderText="Last Modified" SortExpression="ROWVERSION" UniqueName="ROWVERSION">
<HeaderStyle Width="110px" />
</telerik:GridDateTimeColumn>

<telerik:GridTemplateColumn AllowFiltering="true" AllowSorting="true" HeaderText="State" UniqueName="ROWSTATE">
<HeaderStyle Width="90px" />
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Visible="false" Width="10" />
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ROWSTATE")%>'></asp:Label>
</ItemTemplate>
<FilterTemplate>
<telerik:RadComboBox Width="90px" runat="server"
DropDownAutoWidth="Enabled" AppendDataBoundItems="true"
DataSourceID="SqlRowStateList"
DataTextField="ROWSTATE"
DataValueField="ROWSTATE" DropDownWidth="90px" OnClientSelectedIndexChanged="rowstateChanged"
RenderMode="Lightweight"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ROWSTATE").CurrentFilterValue %>'>
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">
<script type="text/javascript">

function rowstateChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("ROWSTATE", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmText="Are you sure to delete this schedule ?" FilterControlAltText="Filter DeleteColumn column" HeaderStyle-Width="5px" HeaderText="Delete" ItemStyle-Width="5px" Resizable="false" Text="Delete" UniqueName="DeleteColumn">
<HeaderStyle CssClass="rgHeader ButtonColumnHeader" />
<ItemStyle CssClass="ButtonColumn" />
</telerik:GridButtonColumn>
</Columns>
<PagerStyle AlwaysVisible="True" />
</MasterTableView>
<FooterStyle Font-Size="Smaller" />
<PagerStyle AlwaysVisible="True" />
<FilterMenu RenderMode="Lightweight">
</FilterMenu>
<HeaderContextMenu RenderMode="Lightweight">
</HeaderContextMenu>
</telerik:RadGrid>

</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" BackgroundPosition="Center" runat="server" Transparency="70">
</telerik:RadAjaxLoadingPanel>
</div>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>

<asp:SqlDataSource ID="MyDataSource" runat="server" ProviderName="System.Data.OracleClient"
SelectCommand=""></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlRowStateList" runat="server" ProviderName="System.Data.OracleClient"
SelectCommand="SELECT distinct a.rowstate FROM IFSAPP.F8RS_TASK_QRY a where a.parent_task_id is null"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlCategoryList" runat="server" ProviderName="System.Data.OracleClient"
SelectCommand="SELECT distinct a.category FROM IFSAPP.F8RS_TASK_QRY a where a.category is not null"></asp:SqlDataSource>

</div>
</div>
</td>

</tr>
</table>

</div>

<script runat="server">

#region Load

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

LoadGrid();
}
}

protected void rdShowAllRecords_Click(object sender, EventArgs e)
{
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
Response.Redirect(Request.CurrentExecutionFilePath);
}

protected void rdDeleteSelectedTask_Click(object sender, EventArgs e)
{
bool hasError = false;
foreach (GridDataItem dataItem in RadGrid1.SelectedItems)//To loop through all selected rows
{
int index = dataItem.ItemIndex;// Get Row Index

try
{
string id = Convert.ToString(dataItem.GetDataKeyValue("TASK_ID"));

F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls.DeleteTask(Convert.ToDouble(id));

}
catch (Exception x)
{
F8.Logger.Instance.Error("Tasklist re-run error: " + x.Message);
F8.ReportServer.fn.ShowAlert(x.Message, F8.ReportServer.fn.MessageType.ERROR);
hasError = true;
break;
}
}

if (!hasError && RadGrid1.SelectedItems.Count > 0)
{
F8.ReportServer.fn.ShowAlert("All selected task(s) have been deleted!", F8.ReportServer.fn.MessageType.SUCCESS);
}

LoadGrid();
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
RadGrid1.Rebind();
}

protected void RadGrid1_DetailTableDataBind(object source, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
{

GridDataItem dataItem = (GridDataItem)e.DetailTableView.ParentItem;
switch (e.DetailTableView.Name)
{
case "Detail":
{
F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls List = new F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls();

string taskid = dataItem.GetDataKeyValue("TASK_ID").ToString();

e.DetailTableView.DataSource = List.GetListUnderMainTask(taskid);

break;
}

}
}

public void LoadGrid()
{

F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls List = new F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls();
MyDataSource.ConnectionString =
SqlRowStateList.ConnectionString =
SqlCategoryList.ConnectionString =
F8.ReportServer.DLL.DbSchema.F8BaseDb.ConnStr;

RadGrid1.DataSource = List.GetListOfMainTask(QueryWhereStr);

}

#endregion

#region Telerik

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
LoadGrid();
}

#endregion
#region Property
public string SessionID
{
get
{

if (Session["SESSIONID"] != null)
{
return Session["SESSIONID"].ToString();
}
else return null;
}
}

#endregion

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridGroupHeaderItem)
{
GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;
System.Data.DataRowView groupDataRow = (System.Data.DataRowView)e.Item.DataItem;
if (item.DataCell.Text.Contains(':'))
{
item.DataCell.Text = string.Format(" {0}: <b>{1}</b>", item.DataCell.Text.Split(':')[0], item.DataCell.Text.Split(':')[1]);
}
}

if (e.Item is GridDataItem && !e.Item.IsInEditMode)
{
GridDataItem itm = e.Item as GridDataItem;

System.Globalization.TextInfo textInfo = new System.Globalization.CultureInfo("tr-TR", false).TextInfo;

//checking for the column in MasterTableView
if (itm.OwnerTableView.Name == "MasterTable")
{
itm["NAME"].Text = textInfo.ToTitleCase(itm["NAME"].Text.ToLowerInvariant()); //War And Peace

if (itm["NAME"].Text.Length > 100)
{
itm["NAME"].ToolTip = itm["NAME"].Text;
itm["NAME"].Text = itm["NAME"].Text.Substring(0, 100);
}

}

if (itm.OwnerTableView.Name == "Detail")
{

if (itm["LAST_ERROR"].Text.Length > 150)
{
itm["LAST_ERROR"].ToolTip = itm["LAST_ERROR"].Text;
itm["LAST_ERROR"].Text = itm["LAST_ERROR"].Text.Substring(0, 150);
}

}

// change image
if (e.Item is GridDataItem)
{
GridDataItem item = e.Item as GridDataItem;
System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)item.FindControl("Image1");

var val = Convert.ToString(item.GetDataKeyValue("ROWSTATE"));
var HaveError = Convert.ToBoolean(item.GetDataKeyValue("HAVE_SUB_TASK_ERROR"));
img.Visible = true;

switch (val)
{
case "Delivered":
case "JobCompleted":

img.ImageUrl = !HaveError ? "~/images/circle-green.gif" : "~/images/circle-red.gif";

break;
case "Error":
img.ImageUrl = "~/images/circle-red.gif";
break;
case "Ordered":
img.ImageUrl = "~/images/circle-ordered.gif";
break;
default:
img.ImageUrl = "~/images/circle-gray.gif";
break;
}

}

}

}

protected void RadGrid1_DeleteCommand(object sender, GridCommandEventArgs e)
{
GridDataItem item = e.Item as GridDataItem;

try
{
string id = Convert.ToString(item.GetDataKeyValue("TASK_ID"));

F8.ReportServer.DLL.DbSchema.F8BaseSchema.TaskCls.DeleteTask(Convert.ToDouble(id));
LoadGrid();
F8.ReportServer.fn.ShowAlert(F8.ReportServer.fn.MessageText.DELETED, F8.ReportServer.fn.MessageType.SUCCESS);

}
catch (Exception x)
{
F8.ReportServer.fn.ShowAlert(x.Message, F8.ReportServer.fn.MessageType.ERROR);
}

}

public string QueryWhereStr
{
get
{
if (Convert.ToString(Request.QueryString["Whr"]) != string.Empty)
{
return Convert.ToString(Request.QueryString["Whr"]);
}
return string.Empty;
}
set { ; }
}

</script>

</asp:Content>

AjaxPanel

answered on 19 Oct 2016

3 answers

156 views

RadMenuItem CssClass RenderMode Mobile

I am using telerik asp.net version 2014.2.618.35

I am using RadMenu which shows in Classic mode in desktop browser and in Mobile mode in mobile browser.

I am adding items to RadMenu at runtime and setting the CssClass property of RadMenuItem. In Classic mode it adds the css class to anchor tag <a> whereas in Mobile mode it adds the css class to list item tag <li>.

Is it possible to set the css class of anchor tag in Mobile mode?

The reason for adding a css class ("animsition-link") is to use Animsition jquery plugin for animated page transitions.

Thanks

Menu

answered on 19 Oct 2016

1 answer

234 views

How to trigger a refresh?

I have a RadScheduler to show a customer's sales records by date. At the top of the page, I have a table to select the customer. When I click to select the customer, I update the customer's other information on the page and update a session variable that I use to filter the RadScheduler.

The RadScheduler does not update with the new customer selected, however. It continues to show the first customer in the list (which populated the session variable on page load).

How do I trigger a refresh of the RadScheduler to pick up the new session variable value and refresh the RadScheduler?

Thanks!

Scheduler

answered on 19 Oct 2016

5 answers

273 views

RadAjaxManager: Microsoft JScript runtime error: 'get_postBackElement().id' is null or not an object

I am gettting the following error when using RadAjaxManager and an asp:LinkButton.

Microsoft JScript runtime error: 'get_postBackElement().id' is null or not an object

However, if I invoke an Ajax call using the addNewClient button, and then I try and click the deleteClientLinkButton everything works fine. It is just on the first page load that the error is thrown.

If I set ClientIdMode = AutoID for the page (http://www.telerik.com/community/forums/aspnet-ajax/ajax/radajax-broken-in-vs-2010-beta-2-in-master-content-pages.aspx) then the LinkButton works properly. However, this renames all my controls and all my CSS is broken and no longer works.

Help please...

<asp:Content ID="Content1" ContentPlaceHolderID="headerContentPlaceholder" runat="Server">

<script type="text/javascript">

$(document).ready(function () {

SetElements();

});

function SetElements() {

//addNewClient

$('#addNewClient').click(function () {

$('#addNewClient').attr("disabled", true);

$('#mainContentPlaceholder_newClientContainer').slideDown(function () {

$('#mainContentPlaceholder_newClientContainer').show();

});

//cancel

$('#cancel').click(function () {

$('#addNewClient').removeAttr("disabled");

$('#mainContentPlaceholder_newClientContainer').slideUp();

});

//close

$('#close').click(function () {

$('#mainContentPlaceholder_notificationContainer').fadeOut();

$('#notificationContainer').fadeOut();

});

};

function ResponseEnd(sender, eventArgs) {

SetElements();

Cufon.replace('h1');

Cufon.replace('h2');

Cufon.now();

};

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceholder" runat="Server">

<div id="leftContainer" runat="server">

<h1>

Clients

</h1>

<div id="notificationContainer" runat="server" visible="false">

<asp:Literal ID="notificationLiteral" runat="server" /><span><a href="#" id="close"></a></span></div>

<%--<uc1:Notifications ID="notifications" runat="server" />--%>

<div id="navigation">

<a id="addNewClient" href="#" class="button hex2C608F">Add New Client</a>

</div>

<div id="newClientContainer" class="extra-b5" runat="server">

<table class="clientDetailsTable" cellspacing="0" cellpadding="0">

<tr>

<td>

<h4 class="extra-b5">

Client Details</h4>

</td>

</tr>

<tr>

<td>

<asp:Label ID="clientNameLabel" runat="server" Text="Client Name" /><br />

<asp:TextBox ID="clientNameTextBox" runat="server" CssClass="textbox short" MaxLength="50" />

<asp:RequiredFieldValidator ID="clientNameRequiredValidator" runat="server" ErrorMessage="Please enter a client name."

Display="None" ControlToValidate="clientNameTextBox" ValidationGroup="newClientGroup" />

</td>

<td>

<asp:Label ID="themeLabel" runat="server" Text="Theme" /><br />

<asp:DropDownList ID="themeDropDownList" runat="server" AppendDataBoundItems="true"

CssClass="short">

<asp:ListItem Value="-1">-- Please Select --</asp:ListItem>

</asp:DropDownList>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="2">

<asp:Button ID="addClientButton" runat="server" Text="Add" OnClick="addClientButton_Click"

ValidationGroup="newClientGroup" />

or <a id="cancel" href="#">Cancel</a>

</td>

</tr>

</table>

<asp:ValidationSummary ID="newClientValidationSummary" runat="server" ShowMessageBox="true"

ShowSummary="false" ValidationGroup="newClientGroup" />

</div>

<asp:ListView ID="clientsListView" runat="server">

<LayoutTemplate>

<ul class="list1">

<div id="itemPlaceholder" runat="server" class="list1">

</div>

</ul>

</LayoutTemplate>

<ItemTemplate>

<li>

<%# Eval("Name") %><div class="options">

<a href="ClientDetails.aspx?ClientId=<%# Eval("Id") %>">Edit</a><span class="separator">|</span>

<asp:LinkButton ID="deleteClientLinkButton" runat="server" OnCommand="DeleteClient"

CommandArgument='<%# Eval("Id") %>' OnClientClick="return confirm('Are you sure you want to delete this client?')"

Text="Delete" />

<%--<a href="ManageClients.aspx?ClientId=<%# Eval("Id") %>" onclick="return confirm('Are you sure you want to delete this client?')">Delete</a></div>--%>

</li>

</ItemTemplate>

</asp:ListView>

</div>

<div id="rightContainer" runat="server">

<h1>

Placeholder

</h1>

<h4 class="extra-b12">

Integer in metus sapien.</h4>

<p>

Praesent diam tellus, congue nec pellentesque dictum, convallis non dui. Nam tincidunt

tempor lectus quis placerat. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. Proin condimentum posuere nisl, ut mollis

metus mollis at.</p>

<p>

Integer in metus sapien. Maecenas aliquet porttitor nisl, a rhoncus ligula pellentesque

at. Maecenas tempor odio ut dolor pharetra faucibus. Cras in massa a odio vulputate

ultricies ac non purus. Etiam in orci nibh, quis dictum ante. In hac habitasse platea

dictumst.</p>

</div>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="addClientButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="leftContainer" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="deleteClientLinkButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="leftContainer" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" Skin="Vista">

</telerik:RadAjaxLoadingPanel>

</asp:Content>

Ajax

answered on 18 Oct 2016

1 answer

114 views

Dynamically Generated RadGrid

Dynamically Generated Radgrid with Form Template loses Dynamic Binding on Edit Click.

I have a RadGrid that gets Created and Bound Dynamically. But when I click edit it rebinds the grid then when I hit update it rebinds the grid and loses the datasource and so It has to call NeedDataSource again which blows away the new values before it gets to the update command.

Grid

answered on 18 Oct 2016

4 answers

640 views

GridDateTimeColumn to localtime

How can I convert the date time to localtime in GridDateTimeColumn? On ASP.net grid control, I used itemtemplate then convert the datetime field to local time using "ToLocalTime()" but I don't know how to do it in GridDateTimeColumn.

Thanks
Tom

Grid

answered on 18 Oct 2016

2 answers

85 views

RadInput boxes not saving on mobile - SharePoint 2010

Hi,

We are trying to create a mobile view of some forms which use Telerik controls for some elements, namely RadInput and RadInputMulti. All other form fields save when the form is posted back on mobile except for the Telerik based fields. When the page is posted back we are seeing a javascript error that reads 'Uncaught TypeError: Cannot read property 'PageRequestManager' of undefined', coming ScriptResource.axd at line 106.

Is there an issue with using these fields on mobile, and if so is there anything we can do to mitigate this issue and make things work?

We are using version 2015.2.818.35 of the Telerik controls, on a SharePoint 2010 platform.

Testing is happening in Chrome and Safari for iOS, although the solution needs to work on Android as well.

Thanks for any help in advance.

Ben

Input

answered on 18 Oct 2016

3 answers

368 views

Dropdownlist cancel postback

Hi,

I am using RadTabstrip and Raddropdownlist.

Whenever the RadTabstrip is selected, the values selected in dropdownlist should be cleared, but i notice whenever i use the categoryList.get_selectedItem().unselect(); it causes to postback. How to cancel the post back ?

I am using this code below