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

AJAX Grid Unselectable items not refreshed

7 Answers 116 Views

Grid

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

7 Answers, 1 is accepted

answered on 04 Mar 2015, 07:21 PM

Hey Angel,

Here is a sample to show you what's going on.

When you run this "Query 1" radio is selected. Click on a row. You will see the grid's ClientState in the text box. Look at the unselectableItemsIndexes. Now click on "Query 2". Try to select one of the first few rows. You will notice that despite them being enabled, you can't click on them. Now click on a row that works. Compare the unselectableItemsIndexes with the previous query. You will see that it is appending indexes.

Thanks,
Blair

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" EnableViewState="false" %>

<!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></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.disabled {

color: lightgray !important;

}

.disabled a {

color: lightgray !important;

}

</style>

</head>

<body>

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

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

function OnRowSelected(sender, args) {

$find("RadTextBox1").set_textBoxValue(document.getElementById("RadGrid1_ClientState").value);

}

</script>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadioButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="RadioButton2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadioButton2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="RadioButton1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Table ID="Table1" runat="server" Width="100%">

<asp:TableRow>

<asp:TableCell>

<asp:RadioButton ID="RadioButton1" runat="server" Text="Query 1" GroupName="rads" AutoPostBack="true" Checked="true" />

<asp:RadioButton ID="RadioButton2" runat="server" Text="Query 2" GroupName="rads" AutoPostBack="true" />

</asp:TableCell>

<asp:TableCell>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell ColumnSpan="2">

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

Width="100%" AutoGenerateColumns="false"

OnItemDataBound="RadGrid1_ItemDataBound" OnColumnCreated="RadGrid1_ColumnCreated"

AllowMultiRowSelection="true" AllowSorting="true">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn UniqueName="id" DataField="id" HeaderText="ID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Status" DataField="Status" HeaderText="Status">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true">

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

<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" />

<ClientEvents OnRowSelected="OnRowSelected" />

<Resizing AllowColumnResize="true" />

</ClientSettings>

</telerik:RadGrid>

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>

<telerik:RadTextBox ID="RadTextBox1" runat="server" Width="100%" Rows="20" Height="50px" Wrap="true" TextMode="MultiLine"></telerik:RadTextBox>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

<div>

</div>

</form>

</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = null;

Int64 result;

if (RadioButton1.Checked)

{

dt = new DataTable();

dt.Columns.Add("Id");

dt.Columns.Add("Name");

dt.Columns.Add("Status");

for (int i = 0; i < 50; i++)

{

Math.DivRem(i, 2, out result);

string status = (result == 0) ? "Disabled" : "Enabled";

if (i == 0)

status = "Disabled";

dt.Rows.Add(i, "Fred Johnson " + i, status);

}

else

{

dt = new DataTable();

dt.Columns.Add("Id");

dt.Columns.Add("Name");

dt.Columns.Add("Status");

for (int i = 50; i < 100; i++)

{

string status = (i < 60) ? "Enabled" : "Disabled";

dt.Rows.Add(i, "Jane Doe " + i, status);

}

RadGrid1.MasterTableView.DataKeyNames = new string[]{"id"};

RadGrid1.MasterTableView.ClientDataKeyNames = new string[] { "id" };

RadGrid1.DataSource = dt;

}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

var gridItem = e.Item as GridDataItem;

string status = ((DataRowView)gridItem.DataItem)["status"].ToString();

if (status.Equals("Disabled"))

{

gridItem.SelectableMode = GridItemSelectableMode.None;

gridItem.CssClass = "disabled";

gridItem.Enabled = false;

}

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

e.Column.ItemStyle.Wrap = false;

}

answered on 09 Mar 2015, 12:36 PM

query2.png

Hey Angel,

Yeah, the problem looks like when you click on Query 2, its not posting back. It works on my machine (typical developer response). I've attached a snapshot of what Query 2 should be returning. You should see ID values starting at 50. If you can get things working , you'll see that you can't click on 51 or 53, even though they are enabled.

Thanks.

Blair

answered on 17 Mar 2015, 12:43 PM

Default2.zip

Hi Blair,

After modifying the provided sample I was able to replicate the described behavior. In order to resolve it you can change the ItemDataBound handler logic as demonstrated below.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

var gridItem = e.Item as GridDataItem;

string status = ((DataRowView)gridItem.DataItem)["status"].ToString();

if (status.Equals("Disabled"))

{

gridItem.SelectableMode = GridItemSelectableMode.None;

gridItem.CssClass = "disabled";

gridItem.Enabled = false;

}

else

{

gridItem.SelectableMode = GridItemSelectableMode.ServerAndClientSide;

}

In attachments you can find a modified version of the page which now behaves as expected.

Regards,
Angel Petrov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

AJAX Grid Unselectable items not refreshed

7 Answers, 1 is accepted