I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. Here's what I am trying to do. I have a RadGrid control that is databound using Linq. Based on the user's row selection I'd like to query additional information from the database and drop it into another control (let's assume that other control is a Rad Listview for the moment). I'd like to do this all clientside without having to post the whole page back to the server. Separately I'm trying to put a button on the page to send the row selection back to the server to trigger some action in the code-behind.
I'd love it if someone could show me how to do the following:
Get the user row selection using Javascript and populate key values from that selection in another control (Using Telerik client-side row selection, not the usual asp.net select link)
Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. I'm assuming that I will be using Linq on the server side to handle this request. Refresh another control to display that info.
Put a button on the page to post the key value from the first question back to the server where it will be caught and stored in a variable.
I realize there's a fair amount of overlap in items 1-3 above but I hope that by breaking it out as I did I'll be better able to understand the mechanics of how client and server side code interacts in an asp.net + telerik environment.
Here are some related posts that I found helpful:
Getting cell values for selected
rows client side
Telerik button
/ client side events
//I'd post other links my my SO reputation score does not permit me to do so
Here's some code from my page. The relevant key value from my grid is the package tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the Header
<!-- Begin Navigation -->
<div id="navigation">
This is the Navigation
</div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
This is the left column
<telerik:RadTreeView ID="RadTreeView1" Runat="server" Skin="Telerik">
<Nodes>
<telerik:RadTreeNode runat="server" Expanded="True" Text="My Account">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Inventory">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Protection Plan">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Addresses">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Profile">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Alert Preferences">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Supplies">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
This is the main body where the inventory stuff goes
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<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">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
ontabclick="RadTabStrip1_TabClick" SelectedIndex="2" AutoPostBack="True"
Skin="Vista">
<Tabs>
<telerik:RadTab runat="server" Text="Pending">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="In Storage">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Returned" Selected="True">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True"
CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
Skin="Vista" Width="654px">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>
</ClientSettings>
<Columns>
<telerik:GridClientSelectColumn FilterControlAltText="Filter column column"
UniqueName="column0" CommandName="SelectRow">
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="Tag"
FilterControlAltText="Filter column2 column" HeaderText="Tag"
UniqueName="column1">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Name"
FilterControlAltText="Filter column3 column" HeaderText="Name"
UniqueName="column3">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Received" DataType="System.DateTime"
EmptyDataText="Not Received" FilterControlAltText="Filter column4 column"
HeaderText="Received" UniqueName="column4" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Shipped" EmptyDataText="In Storage"
FilterControlAltText="Filter column5 column" HeaderText="Shipped"
UniqueName="column5" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridRatingColumn FilterControlAltText="Filter column1 column"
HeaderText="Condition" ItemCount="3" UniqueName="column1">
</telerik:GridRatingColumn>
</Columns>
<SelectedItemStyle BackColor="White" />
If you are talking true client-side scripting, the grid should pass off the selection to a web service, and populate the next control via its client-side API (if the RadListView supports client-side binding, which I'm not sure that it does). It's definitely possible, but a lot more work than the solution below. However:
If you want to postback to the server anyway, why populate the listview on the client-side? Any client-side populated data is lost (because it isn't stored in viewstate), and so client-side binding doesn't help if you are posting back to the server to store a variable. The easiest way since you are doing telerik is to set the ClientSettings.EnablePostBackOnRowClick="true" on the grid, and the ClientSettings.Selecting.AllowRowSelect="true" in markup or code. Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code.
When clicking on the row of the grid, it posts back, the events all work on the server side, the value is stored in your variable (as long as its stored in session, cache, viewstate), and then you can populate the listview.
HTH.
Related
All:
Here are the technical details pertaining to our Development environment for our Web Application:
-Telerik version 2016.2.607.45
-Microsoft Visual Studio Enterprise 2015 Version 14.0.35123.00 Update 2
-.NET Framework 4.5
We are trying to integrate the Telerik “Grid - Excel-like Filtering” which can be seen by clicking on the following link:
https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/excel-like-filtering/defaultcs.aspx
The Telerik “Grid - Excel-like Filtering” looks like the following:
<%# Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering. DefaultCS" %>
<%# 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 runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowFilteringByColumn="true" runat="server" FilterType="HeaderContext" EnableHeaderContextMenu="true"
EnableHeaderContextFilterMenu="true" AllowPaging="True" PagerStyle-AlwaysVisible="true" OnFilterCheckListItemsRequested="RadGrid1_FilterCheckListItemsRequested" DataSourceID="SqlDataSource1" AllowSorting="true" GroupingEnabled="true">
<MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="CustomerID">
<Columns>
<telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="Address" SortExpression="Address" UniqueName="Address">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="City" FilterControlAltText="Filter City column" HeaderText="City" SortExpression="City" UniqueName="City">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="Country" FilterControlAltText="Filter Country column" HeaderText="Country" SortExpression="Country" UniqueName="Country">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
</form>
</body>
</html>
Since yesterday, I've been trying to change values of various attribute of the Telerik tags in order to remove the Columns option. I've modified/removed, and placed back various Telerik tag attributes like FilterCheckListEnableLoadOnDemand, FilterControlAltText, etc., but it still would not remove the Columns option. Could someone please tell me what modifications in the code need to made in order to remove the Columns Option?
Unfortunately, as is the case with most of Telerik's more complicated functionality, this doesn't appear to be very customizable. Have you tried hiding it with CSS?
.RadMenu .rgHCMCols {
display:none !important;
}
You will probably have to get more specific with the selector, knowing how the Telerik skins work.
ASP
<HeaderContextMenu OnItemCreated="HeaderContextMenu_ItemCreated"></HeaderContextMenu>
C#
private void HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
{
switch ((e.Item.Text))
{
case "Columns":
e.Item.Visible = false;
break;
}
}
VB.NET
Protected Sub HeaderContextMenu_ItemCreated(sender As Object, e As RadMenuEventArgs)
Select Case e.Item.Text
Case "Columns"
e.Item.Visible = False
End Select
End Sub
I have a DataGrid that displays notes for a customer form. So if something in the form gets changed a note is created saying what changes where made. Right now the newest notes gets put to the bottom of the list. But how do I switch that around so the newest notes are at the top?
<div id="tabNotesComments" runat="server">
<div>
Notes/Comments for the customer
<asp:DataGrid CssClass="tblResults" runat="server" ID="dgNotes" OnItemDataBound="dgNotes_ItemDataBound" DataKeyField="ID" AutoGenerateColumns="false">
<HeaderStyle CssClass="tblResultsHeader" />
<AlternatingItemStyle BackColor="#EEEEEE" />
<Columns>
<asp:BoundColumn DataField="Note" HeaderText="Note"></asp:BoundColumn>
<asp:BoundColumn DataField="CreatedBy" HeaderText="Entered By"></asp:BoundColumn>
<asp:BoundColumn DataField="DateString" HeaderText="Date"></asp:BoundColumn>
<asp:BoundColumn DataField="TimeString" HeaderText="Time"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</div>
</div>
You can see in the image what I mean. See how the most recent note is at the bottom. I want to display this list in reverse so the newest notes are displayed first.
Code for binding DataGrid:
dgNotes.DataSource = c.NotesList;
dgNotes.DataBind();
Answer
Thanks for Dimitris Batsougiannis's answer I used reverse:
dgNotes.DataSource = c.NotesList;
c.NotesList.Reverse();
dgNotes.DataBind();
Have you tried using the Reverse method ?
I've been using Telerik for the first time and have come across an issue I am unable to resolve due to my implementation. I have a MainPage.aspx that has a RadTabStrip with a RadMultiPage associated with it. Within the page views I have some user created control (.ascx) pages and have implemented them so that when a certain tab is selected the ascx page will show within the page view. I've been working on each page separately and now I'm having to work on the Search page functionality, of which I inserted a RadGrid within a RadPageLayout as seen below:
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:CompositeLayoutColumn Span="12">
<Content>
<telerik:RadGrid ID="rgSearchResults" Width="700px" runat="server" AllowPaging="true" AllowSorting="true">
</telerik:RadGrid>
</Content>
</telerik:CompositeLayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
There hasn't been any data binding, etc, all I'm trying to do is navigate to the search tab but when I do I get that frustrating error "Page cannot be null. Blah Blah Blah" I've looked online and found that I need to add the control to the controls collection of the page, but with my implementation I cant seem to find a way to do this. I've tried to add it in the "!IsPostBack" Page Load event of the search.ascx page but I get a separate error with this. And if I try to add it in the Main.aspx page it still doesn't find it... Never had this much trouble on regular asp.net/C#.. Please help!
have you registered the Telerik assembly on the user control:
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
Do you have a form with runat=server? Does the PageLayout control have its runat=server attribute?
I tried this and it showed up:
un the UC:
<telerik:RadPageLayout runat="server" ID="RadPageLayout1">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:CompositeLayoutColumn Span="12">
<Content>
<telerik:RadGrid ID="rgSearchResults" Width="700px" runat="server" AllowPaging="true" AllowSorting="true">
</telerik:RadGrid>
</Content>
</telerik:CompositeLayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
in the main page
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1">
<Tabs>
<telerik:RadTab Text="first" Selected="true"></telerik:RadTab>
<telerik:RadTab Text="second"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1">
<telerik:RadPageView runat="server" ID="RadPageView1" Selected="true">first page view</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPageView2">
second page view with grid
<uc1:myControl runat="server" ID="myControl1"></uc1:myControl>
</telerik:RadPageView>
</telerik:RadMultiPage>
</form>
You can also see how to work with dynamic page views and user controls here: http://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/dynamic-pageview-creation/defaultcs.aspx. Make sure to add IDs to every dynamic control you create.
I am wanting to create a datatable from a gridview in asp.net. This is what I have so far. I want to use the jquery datatables plugin to create a table that can be filtered and sorted. Is there a way to do this from a gridview, using an sql datasource or is there something else that i need to do, like create an html. The only problem is that i need to be able to have the table update or be dynamic.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Glossary.aspx.cs" Inherits="Home.Glossary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title spellcheck="true">Glossary</title>
<asp:LoginView ID="LoginView2" runat="server"></asp:LoginView>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left: 720px">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333">
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
</asp:Login>
</AnonymousTemplate>
</asp:LoginView>
</div>
<asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="<%$ ConnectionStrings:Glsry_Taylor %>" SelectCommand="SELECT [TermText], [DefNbr], [DefVerNbr], [DefText], [AmplifyingExplanationText], [SeeAlsoText], [AuthoritativeSrcText], [ScopeName], [DomnName], [GovernanceStateName], [LastUpdtTimestamp] FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
$(document).ready(function() {
$('#example').dataTable();
} );
DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary" EnableSortingAndPagingCallbacks="True">
<Columns>
<asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="TermText" />
<asp:BoundField DataField="DefNbr" HeaderText="Definition #" ReadOnly="True" SortExpression="DefNbr" />
<asp:BoundField DataField="DefVerNbr" HeaderText="Definition Vers #" ReadOnly="True" SortExpression="DefVerNbr" />
<asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="DefText" />
<asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" />
<asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="SeeAlsoText" />
<asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" />
<asp:BoundField DataField="ScopeName" HeaderText="Scope Name" SortExpression="ScopeName" />
<asp:BoundField DataField="DomnName" HeaderText="Domn Name" SortExpression="DomnName" />
<asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" />
<asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Update" SortExpression="LastUpdtTimestamp" />
</Columns>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
</asp:GridView>
</form>
</body>
</html>
You need to get the elements of your page in the right place first, you're attempting to link Javascript files and call jQuery functions in the middle of your body, this needs to be done in the head section:
<head>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#GridView1').dataTable();
});
</script>
</head>
Notice also, that you must use the ID of your GridView to initialize the DataTable. Searching will be enabled automatically, to enable filtering, you'll have to use TemplateFields in place of your BoundFields, see http://www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/ for an example of how to convert them. Finally, in your Code Behind, you need to force the GridView to generate proper <thead>, <tbody>, and <tfoot> sections:
gvPortfolio.UseAccessibleHeader = true;
gvPortfolio.HeaderRow.TableSection = TableRowSection.TableHeader;
gvPortfolio.FooterRow.TableSection = TableRowSection.TableFooter;
Just add <FooterStyle CssClass="FilterCell" /> (or some such thing) to add a class to each footer cell, then use that class to connect your filtering:
$("tbody td.FilterCell").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
});
});
You can find the rest of this example at http://datatables.net/release-datatables/examples/api/multi_filter_select.html. Note, as shown above, you're looking for the <td> elements generated by the GridView, rather than the <th> elements expected by the example.
NOTE: I'm a beginner web developer, somewhat familiar with PHP. I've been curious about ASP.NET and wanted to give it a go.
Now, I'm attempting to little library application that displays a table like the following:
Title - Author - Status
The Eye of the World - Robert Jordan - Checked Out
The Great Hunt - Robert Jordan - Check Out
The Dragon Reborn - Robert Jordan - Check Out
I have created a DataSet, and a TableAdapter that performs the following query:
SELECT books.SerialNumber, books.Title, books.Author, CheckedOut.cardNumber
FROM books LEFT OUTER JOIN
CheckedOut ON books.SerialNumber = CheckedOut.SerialNumber
I do this so that I can get either NULL or the cardNumber for use below.
Here is the current state of my main page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Browse.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="SerialNumber,cardNumber" DataSourceID="ObjectDataSource1"
OnRowDataBound="browseMethod"
AllowPaging="True" onselectedindexchanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="SerialNumber" HeaderText="SerialNumber"
InsertVisible="False" ReadOnly="True" SortExpression="SerialNumber"
Visible="False" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:BoundField DataField="Author" HeaderText="Author"
SortExpression="Author" />
<asp:BoundField DataField="cardNumber" HeaderText="cardNumber"
SortExpression="cardNumber" Visible="False" />
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:Button ID="Button1" runat="server"
CommandArgument='<%# Eval("cardNumber") %>'
Text="Check Out" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetLibraryBooks"
TypeName="DataSet1TableAdapters.DataTable1TableAdapter">
</asp:ObjectDataSource>
</asp:Content>
I want to be able to change the "Check Out" button to a label ("Checked Out") when the "cardNumber" value for that row is NULL. Also, how can I create an event when each button is called, and grab the correct SerialNumber?
You can create another control label and sets its visibity to false.You have already defied command argument for the button.Give a command name too .
<asp:Button ID="Button1" runat="server" CommandArgument='<%# Eval("cardNumber") %>' CommandName="CheckOut" Text="Check Out" />
In the gridview_rowCommand callback check for the command Name and do the operations.Set the visibility of button to false there and label to true.ANother option woulb be to enable/disable button as discussed in answer above with disabled style being made in a way such that it looks like a label.For grid view command argument refer the follwoing link :-
http://msdn.microsoft.com/en-us/library/bb907626.aspx
In the browseMethod, which will be called for every row in the grid, when the grid is getting populated. So you can make the button enabled or disabled based on the condition..
You can get the button using row.FindControl by button name "Button1" cast it into button and call button.Enabled = true or false.. based on cc number..
I hope this should direct you in the right path...