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

Grid Clients events don't work correct with some cusom setting

1 Answer 29 Views

Grid

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

Aleksandr asked on 01 Oct 2012, 12:51 PM

Hello,

I got some trouble during learning of product.



It looks like Telerik provide huge flexibility on client side but I got (I think base issues) thanks I can’t resolve with out your help.

1.	Update panel is not show at all, in grid status status bar,

2.	Filer grid doesn’t work from JS part (in your examples it does)

3.	OnDataBundel doesn’t call on page size changes. And images is not show.





Could you please help me thank. 





Looking forward to get answer from you






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Bekey.layouts.BeKey.Test" %>

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

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

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

<head runat="server">

<title>Test</title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript" src="../../assets/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

function page_init() {

//$('.tbl_row:odd').addClass('tr_odd');

//$('.tbl_row:even').addClass('tr_even');

$('.show_tip').hover(function () {

$(this).find('.td_tooltip').show();

}, function () {

$(this).find('.td_tooltip').hide();

});

}

//

function IsBundle(item) {

var fieldName = "type";

var value = item[fieldName];

return value.toLowerCase() != "Address".toLowerCase();

}

function RowDataBound(sender, args) {

var imageurl;

if (!IsBundle(args.get_dataItem())) {

imageurl = "/assets/images/address_icon.png";

} else {

imageurl = "/assets/images/bundle_icon.png";

}

$(args.get_item().findElement("AccessTypeImage")).attr("src", imageurl);

}

function AccessRowDeleting(sender, eventArgs) {

var item = eventArgs.get_gridDataItem().get_dataItem();

var isBundle = IsBundle(item);

var paramData = JSON.stringify({ "access": item, "isBondle": isBundle });

$.ajax({

type: "POST",

url: "/services/netkey.svc/DeleteAccess",

contentType: "application/json",

data: paramData,

success: function (result) {

alert(result);

},

error: function (xhr) {

// console(xhr);

}

});

}

function RequestStart(sender, eventArgs) {

alert('Request start initiated by: ' + eventArgs.get_eventTarget());

}

function ResponseEnd() {

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

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

<div>

<telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadLoadingPanel" Skin="Default" InitialDelayTime="0"

MinDisplayTime="1000" Transparency="25">

<div style="background-color: #000000; width: 100%; height: 100%">

<img id="imgLoader" src="/assets/images/ajax_loader.gif" />

</div>

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowPaging="True"

AllowFilteringByColumn="True" AutoGenerateColumns="False" ShowStatusBar="true"

CellSpacing="0" GridLines="None">

<MasterTableView>

<Columns>

<telerik:GridImageColumn UniqueName="AccessTypeImage" DataAlternateTextField="type">

<FilterTemplate>

<telerik:RadComboBox runat="server" DataTextField="Value" DataValueField="Key" ID="cmbTypeFilter"

OnClientSelectedIndexChanged="TypeSelectedIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="All" />

<telerik:RadComboBoxItem Text="Address" />

<telerik:RadComboBoxItem Text="Bundle" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function TypeSelectedIndexChanged(sender, args) {

var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

var item = args.get_item();

var equalFilter = Telerik.Web.UI.GridFilterFunction.EqualTo;

var noFilter = Telerik.Web.UI.GridFilterFunction.NoFilter;

tableView.filter("type", item.get_text(), item.get_text() != "All" ? equalFilter : noFilter);

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridImageColumn>

<telerik:GridBoundColumn DataField="zipCode" HeaderText="ZIP OR BUNDLE NAME">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="roadName" HeaderText="ADDRESS">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="addressType" HeaderText="TYPE">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fromDatetime" HeaderText="FROM" DataFormatString="{0:MM/dd/yyyy}"

ReadOnly="True" SortExpression="Dates">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="toDatetime" DataFormatString="{0:MM/dd/yyyy}"

ReadOnly="True" HeaderText="TO">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="userName" HeaderText="USER">

</telerik:GridBoundColumn>

<telerik:GridClientDeleteColumn ConfirmTextFields="USER" ConfirmDialogType="Classic"

ConfirmTextFormatString="Are you sure to delete {0}?" HeaderStyle-Width="35px"

ButtonType="ImageButton" ImageUrl="/assets/images/close_del.png" DataTextField="userName"

FilterControlAltText="Filter colDelete column" UniqueName="colDelete">

<HeaderStyle Width="35px"></HeaderStyle>

</telerik:GridClientDeleteColumn>

</Columns>

<PagerStyle AlwaysVisible="True"></PagerStyle>

</MasterTableView>

<ClientSettings ReorderColumnsOnClient="True">

<ClientEvents OnRowDataBound="RowDataBound" OnRowDeleting="AccessRowDeleting" />

<DataBinding SelectMethod="GetAccessData" Location="/services/my.svc" SortParameterType="Linq"

FilterParameterType="Linq" >

</DataBinding>

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 04 Oct 2012, 10:54 AM

Hi,

Could you post your code-behind file content, this will help me better understand your scenario.

StatusBar in RadGrid is used only to show the current Ajax request that is performed, it does not show any additional information. The status bar is located in the left-most part of the pager item.

About the filtering problem, could you check whether there is a JavaScript error on the page. If there is a JS error on the page, then no client-side functionality will work.

About your third question, most probably the issue comes from some databinding errors, that is why I need to take a look at your code-behind file.

Regards,
Andrey
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.