How to make all the row cells editable on click of the edit button.
Following is the code snipped. Any help would be appreciated. On click of btnEdit_Click event, i want the radgrid row cells editable so that use can update existing data. i dont want to add inline edit button for each row in radgrid, instead on single edit button, all row cells should be editable based on their data type.
<asp:ImageButton runat="server" ID="btnEdit" ImageUrl="~/images/Buttons/Edit.gif"
OnClick="btnEdit_Click" />
<radG:RadGrid ID="grdAction" runat="server" AllowPaging="True" Width="100%" EnableAJAXLoadingTemplate="true"
CellPadding="1" CellSpacing="1" AllowSorting="True" ShowHeader="false" OnNeedDataSource="grd_View_NeedDataSource"
OnDetailTableDataBind="grd_View_DetailTableDataBind" PageSize="11" MasterTableView-GroupsDefaultExpanded="true"
OnPreRender="grd_View_PreRender" AllowMultiRowSelection="true" MasterTableView-EditFormSettings-EditColumn-AutoPostBackOnFilter="false"
Skin="Glassy" AllowMultiRowEdit="true">
<MasterTableView AutoGenerateColumns="False" HierarchyDefaultExpanded="true">
<AlternatingItemStyle CssClass="GridView-GroupHeaderItemStyle" />
<Columns>
<radG:GridTemplateColumn UniqueName="TemplateColumn" SortExpression="VSGroupBy">
<ItemTemplate>
<asp:Label ID="lblStatus" Visible="false" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, FIRSTGROUP).ToString() %>'> </asp:Label>
<asp:Label ID="lblStatus1" runat="server" Text='<%# GetGroupBy(DataBinder.Eval(Container.DataItem, FIRSTGROUP).ToString()) %>' />
<asp:Label ID="lblcnt" runat="server" Text='' />
</ItemTemplate>
<ItemStyle Width="100%" />
</radG:GridTemplateColumn>
</Columns>
<ExpandCollapseColumn>
<HeaderStyle Width="19px" />
</ExpandCollapseColumn>
<DetailTables>
<radG:GridTableView Width="100%" runat="server" AutoGenerateColumns="False" ShowHeader="True"
HierarchyLoadMode="ServerBind">
<HeaderStyle CssClass="GridView-HeaderStyle" Width="10%" />
<Columns>
<radG:GridTemplateColumn HeaderText="Header1" SortExpression="Header1">
<ItemTemplate>
<asp:Label ID="lblItem1" runat="server" Text='<%# Eval("RootCause").ToString()+ " " %>'></asp:Label>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
<HeaderStyle Width="22%" Wrap="True" />
</radG:GridTemplateColumn>
<radG:GridTemplateColumn HeaderText="header2" SortExpression="" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblAgree" runat="server" CssClass='<%# Eval("lblitem2").ToString()=="N"?"AgreeStyles": ""%>' Text='<%# Eval("lblitem2").ToString()+ " " %>'></asp:Label>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
<HeaderStyle Width="3%" Wrap="True" />
</radG:GridTemplateColumn>
<radG:GridTemplateColumn HeaderText="header3" SortExpression="What">
<ItemTemplate>
<asp:Label ID="lblitem3" runat="server" Text='<%# UIHelper.TextArea2HTML(Eval("lblitem3").ToString())+ " " %>'></asp:Label>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
<HeaderStyle Width="15%" Wrap="True" />
</radG:GridTemplateColumn>
</Columns>
<PagerStyle Mode="NumericPages" Position="TopAndBottom" />
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn">
</EditColumn>
</EditFormSettings>
<AlternatingItemStyle CssClass="GridView-ItemStyle" />
<GroupHeaderItemStyle CssClass="GridView-GroupHeaderItemStyle" />
<ExpandCollapseColumn ButtonType="ImageButton" UniqueName="ExpandColumn" Visible="False">
<HeaderStyle Width="19px" />
</ExpandCollapseColumn>
<ItemStyle CssClass="GridView-ItemStyle" />
<RowIndicatorColumn UniqueName="RowIndicator" Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<NoRecordsTemplate>
There is no document to display
</NoRecordsTemplate>
</radG:GridTableView>
</DetailTables>
<NoRecordsTemplate>
There is no Actions to display
</NoRecordsTemplate>
<ExpandCollapseColumn Visible="False">
<HeaderStyle Width="19px" />
</ExpandCollapseColumn>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ItemStyle CssClass="GridView-GroupHeaderItemStyle" />
</MasterTableView>
<PagerStyle Mode="NumericPages" PageButtonCount="20" />
<HeaderStyle CssClass="GridView-HeaderStyle" />
<GroupHeaderItemStyle CssClass="GridView-GroupHeaderItemStyle" />
<ItemStyle CssClass="GridView-GroupHeaderItemStyle" />
<AlternatingItemStyle CssClass="GridView-GroupHeaderItemStyle" />
<PagerStyle Mode="NumericPages" Position="TopAndBottom" PageButtonCount="20" />
<FilterMenu HoverBackColor="LightSteelBlue" HoverBorderColor="Navy" NotSelectedImageUrl="~/RadControls/Grid/Skins/Default/NotSelectedMenu.gif"
SelectColumnBackColor="Control" SelectedImageUrl="~/RadControls/Grid/Skins/Default/SelectedMenu.gif"
TextColumnBackColor="Window"></FilterMenu>
<ClientSettings>
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</radG:RadGrid>
Ok, several issues.
You are (it looks like) using a data pager - this can compliate things quite a bit.
Next, you using radgrid - so, a large % of the posters here - they may well not have an answer.
But, I do think the idea of tossing up a grid - let user edit, and then a SINGLE saved for all edits makes a WHOLE lot of sense. In fact, given that UI, then really no need for a edit buttion. all you really need/want is a save button, and then say a cancel/undo edits.
A really neat-o trick for above? Just persist the data source. Once you do that?
Then you allow the user to edit the grid - (no code required).
Then on save, you move grid edits back to the data talbe, and then in ONE NICE EASY update, send the data table back to the database. This results not only in VERY little code, but also provivdes a reather nice and un-cluttered UI to the user.
So, lets use a GridView. In fact, I OFTEN suggest to use a listview.
Why?
Well, with gridview (and the older datagrid), for each column control you drop in, you MUST put that standard control inside of "template" tags - so you require more (messy) markup.
But, lets do this with a simple gridview, and as you can see, not only is this easy, but we ALSO get .net to create the update statetments, and this we "leverage" the built in system to do all the dirty work.
So, say we have this grid:
<style> .borderhide input {border:none}</style>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
cssclass="table table-hover borderhide">
<Columns>
<asp:TemplateField HeaderText ="First Name">
<ItemTemplate>
<asp:TextBox ID="txtFirst" runat="server" Text = '<%# Eval("FirstName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Last Name">
<ItemTemplate>
<asp:TextBox ID="txtLast" runat="server" Text = '<%# Eval("LastName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="City">
<ItemTemplate>
<asp:TextBox ID="txtCity" runat="server" Text = '<%# Eval("City") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Active">
<ItemTemplate>
<asp:CheckBox ID="Active" runat="server" Checked = '<%# Eval("Active") %>'></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn-primary" OnClick="cmdSave_Click1" />
<asp:Button ID="cmdAdd" runat="server" Text="Add Row" CssClass="btn-primary" style="margin-left:20px"/>
<br />
Ok, not much markup.
So, now here is our code to fill the grid:
private DataTable rstPeople = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadGrid();
ViewState["MyTable"] = rstPeople;
Session["test"] = "hello";
}
else
rstPeople = (DataTable)ViewState["MyTable"];
}
public void LoadGrid()
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * from People",
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
rstPeople.Load(cmdSQL.ExecuteReader());
GridView1.DataSource = rstPeople;
GridView1.DataBind();
}
}
Ok, but NOTE how we load the grid, but ALSO save (perist) the data table.
So, we now have this:
Ok, so you are now free to tab around - edit - it feels ALMOST like a spreadsheet.
Now, here is the save button to send the WHOLE set of edits back to database in one shot:
protected void cmdSave_Click1(object sender, EventArgs e)
{
// pull grid rows back to table.
foreach (GridViewRow rRow in GridView1.Rows)
{
int RecordPtr = rRow.RowIndex;
DataRow OneDataRow;
OneDataRow = rstPeople.Rows[RecordPtr];
OneDataRow["FirstName"] = ((TextBox)rRow.FindControl("txtFirst")).Text;
OneDataRow["LastName"] = ((TextBox)rRow.FindControl("txtLast")).Text;
OneDataRow["City"] = ((TextBox)rRow.FindControl("txtCity")).Text;
OneDataRow["Active"] = ((CheckBox)rRow.FindControl("Active")).Checked;
}
// now send table back to database with updates
string strSQL = "SELECT ID, FirstName, LastName, City, Active from People WHERE ID = 0";
using (SqlCommand cmdSQL = new SqlCommand(strSQL,
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
SqlDataAdapter daupdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder cmdBuild = new SqlCommandBuilder(daupdate);
daupdate.Update(rstPeople);
}
}
So, we send grid back to table.
We then send table back to database.
As you can see, this approach saves buckets of code.
the ONLY addtional issues here?
You are using a datapager. However, that means for each page navigation, re-bind the grid from that persisted table - do NOT re-load the data table from the database each time. But, a data pager complicates this VERY much, since on page navigation, we in theory would have to save the changes on that displayed page back to the table (we don't need to send table back to database, but we DO need to send possible changes from grid back to table. Thus, since navigation comes from that table, then this should work - and we not yet had to hit save to send persisted table back to database.
And note that the gridrow (and most controls) can return either the current page index or the overall index location of the row. So, I not done above with a datapager, but it should be possible to work.
And no real need for a edit button - I mean, what would edit do anyway? I don't think it is required - and just messes up the simple UI anyway.
And of course we should provide a cancel/undo. And all that would do is call LoadGrid again, and re-load grid from the database.
The above approaches should work with radGrid - but I never used it.
As noted, above idea works with GridView, listview and even older datagrid.
My preferred choice out of the 3 is actually list view, since as noted, you don't have to put messy template tags around each plain jane asp.net controls (such as text box, or as per above also a check box).
and the add row code in above, to allow adding a new row?
we have this:
protected void cmdAdd_Click(object sender, EventArgs e)
{
// add a new row to the grid
DataRow OneRow = rstPeople.Rows.Add();
GridView1.DataSource = rstPeople;
GridView1.DataBind();
}
Once again - really simple!!! and again it was easy since we operate against the table, and then just re-bind against the grid.
I am setting up HealthMonitoring and I am writing a couple of pages to manage the event logs.
I have one page which has a GridView and another that has a DetailsView. The GridView has a template button on each row with an onClick event that loads the second page with the DetailsView on it.
What I would like to do is; when I click the template button on the GridView it then loads the second page with the DetailsView and inserts that particular record from the GridView into the DetailsView table.
The DetailsView must have paging enabled. I am stuck trying to find out which page index to load with the right record from the GridView. Currently it will just load up the first page index, then I have to click next to the record I need.
Without the paging enabled, I can read my 2 global variables and then load the correct record into the DetailsView table, but with paging enabled I'm not sure how to do it.
On the GridView page:
protected void Details1_ButtonClick(object sender, EventArgs e)
{
//I set 2 global variables here of the selected EventId and
//Details to read when the next page loads
Response.Redirect("ErrorDetails.aspx");
}
On the DetailsView page.
protected void Page_Load(object sender, EventArgs e)
{
//without paging I can set the SqlDataSource1.SelectCommand to select
//the correct record using one of the global variables
}
I have tried to use DetailsView1_PageIndexChanged, DetailsView1_Load and Page_Load to get the value in the first row, but for some reason it is allways a page behind. The variable always shows the ID of the previous page when it loads. I was going to try and keep track of the page for deleting records, but it will not work either.
This is the DataSource and DetailsView in ErrorDetails.aspx:
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:DefaultConnection %>"
ProviderName="<%$ ConnectionStrings:DefaultConnection.ProviderName %>">
<DeleteParameters>
<asp:Parameter Name="EventId" />
</DeleteParameters>
</asp:SqlDataSource>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" DataSourceID="SqlDataSource1" DataKeyNames="EventId" AutoGenerateRows="False" OnItemDeleted="DetailsView1_ItemDeleted" OnItemDeleting="DetailsView1_ItemDeleting" AllowPaging="True" OnLoad="DetailsView1_Load" OnPageIndexChanged="DetailsView1_PageIndexChanged" OnPageIndexChanging="DetailsView1_PageIndexChanging">
<AlternatingRowStyle CssClass="alt" />
<Fields>
<asp:CommandField ShowDeleteButton="True" />
<asp:BoundField DataField="EventId" HeaderText="EventId" />
<asp:BoundField DataField="EventTimeUtc" HeaderText="EventTimeUtc" />
<asp:BoundField DataField="EventTime" HeaderText="EventTime" />
<asp:BoundField DataField="EventType" HeaderText="EventType" />
<asp:BoundField DataField="EventSequence" HeaderText="EventSequence" />
<asp:BoundField DataField="EventOccurrence" HeaderText="EventOccurrence" />
<asp:BoundField DataField="EventCode" HeaderText="EventCode" />
<asp:BoundField DataField="EventDetailCode" HeaderText="EventDetailCode" />
<asp:BoundField DataField="Message" HeaderText="Message" />
<asp:BoundField DataField="ApplicationPath" HeaderText="ApplicationPath" />
<asp:BoundField DataField="ApplicationVirtualPath" HeaderText="ApplicationVirtualPath" />
<asp:BoundField DataField="MachineName" HeaderText="MachineName" />
<asp:BoundField DataField="RequestUrl" HeaderText="RequestUrl" />
<asp:BoundField DataField="ExceptionType" HeaderText="ExceptionType" />
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<asp:Label ID="Label1" runat="server">
<%= EventVariables.EventDetails %>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Fields>
<PagerSettings Mode="NextPreviousFirstLast" />
<PagerStyle CssClass="pager" />
</asp:DetailsView>
This is the DataSource and GirdView from the parent form:
<asp:GridView
ID="ErrorGrid"
runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
DataKeyNames="EventId"
OnRowDeleting="ErrorGrid_RowDeleting"
AllowPaging="True"
AllowSorting="True"
Font-Size="Small"
CellPadding="10"
CellSpacing="1" >
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?');" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="Details1" Text="Details" runat="server" AutoPostBack="true" OnClick="Details1_ButtonClick" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EventId" HeaderText="EventId" SortExpression="EventId" />
<asp:BoundField DataField="EventTime" HeaderText="EventTime" SortExpression="EventTime" />
<asp:BoundField DataField="RequestUrl" HeaderText="RequestUrl" SortExpression="RequestUrl" />
<asp:BoundField DataField="ExceptionType" HeaderText="ExceptionType" SortExpression="ExceptionType" />
</Columns>
</asp:GridView>
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:DefaultConnection %>"
SelectCommand="SELECT * FROM [aspnet_WebEvent_Events]"
DeleteCommand="DELETE FROM [aspnet_WebEvent_Events] WHERE [EventId]=#EventId">
<DeleteParameters>
<asp:Parameter Name="EventId" />
</DeleteParameters>
</asp:SqlDataSource>
I managed to solve this by doing a calculation. As there is 10 rows per page in the GridView I'm able to calculate the page by doing this:
EventVariables.EventPage = ((((ErrorGrid.PageIndex + 1) * 10) - 10) + Row.RowIndex);
And then loading the page in the DetailsView from the variable when it loads.
I am working on a asp.net application where i am able to load the data from the SQL to the gridview in aspx page.User has the ability to edit and save the values in the gridview.
My grid view has the itemtemplates where i have two colums with textboxes.I want to highlight all the cells with a different color which user edits in the gridview.
I am able to do the same thing for the textboxes in another aspx page with out gridview with java script with the code below:
<script type="text/javascript">
$(document).ready(function() {
$(':input').change(function() {
$(this).addClass("textchanged");
});
});
</script>
<asp:GridView runat="server" ID="gvnames" AutoGenerateColumns="False" CellPadding="4"
Font-Names="Georgia" ForeColor="Black" GridLines="Vertical" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" DataKeyNames="Name"
DataSourceID="SqlDataSource1"
>
<RowStyle BackColor="#F7F7DE" />
<colums>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" Visible='<%# !(bool) IsInEditMode %>' runat="server"
Text='<%# Eval("Name") %>' />
<asp:TextBox ID="txtName" Width="250px" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
</colums>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
When i try to implement the same code for the text box inside a grid view its doesn't work.
Is is the right approach or is there any other way to achieve ?
I would appreciate if some one can guide me in right path.
I think that you should remove the : that is in front of the word input in your jquery. Additionally if this is only supposed to happen to textboxes then you should be more specific in your jquery selector and change it to this:
$('input[type=text]')
In your markup, please change the
<colums><colums>
-tag to
<Columns></Columns>
This should help, if jQuery runs properly
I have a gridview in which i have two textboxes. The senarios is such that the value I enter in one (txtCharges) should come as * 10 in the other textbox (txtTotalCharges). How to achieve this using javascript ? Markup code for gridview is as follows:
<asp:GridView ID="grdFixedMontlhy" CssClass="gridview" runat="server" AutoGenerateColumns="False"
Width="100%">
<RowStyle CssClass="gridviewItemStyle" HorizontalAlign="center" />
<Columns>
<asp:CheckBoxField Text="Select" />
<asp:BoundField DataField="Bill_HeadName" HeaderText="Head" />
<asp:BoundField DataField="Applicable_Charges_Category_Text" HeaderText="Type" />
<asp:TemplateField HeaderText="Charges" ItemStyle-CssClass="gridviewColumnControls">
<ItemTemplate>
<asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges") %>'></asp:TextBox>
<asp:FilteredTextBoxExtender ID="txtCharges_FilteredTextBoxExtender" runat="server"
Enabled="True" TargetControlID="txtCharges" ValidChars="0123456789.">
</asp:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle CssClass="gridviewColumnControls" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Days" ItemStyle-CssClass="gridviewColumnControls">
<asp:TemplateField HeaderText="Total Charges" ItemStyle-CssClass="gridviewColumnControls">
<itemtemplate>
<asp:TextBox ID="txtTotalCharges" runat="server" Text=""></asp:TextBox>
<asp:FilteredTextBoxExtender ID="txtTotalCharges_FilteredTextBoxExtender"
runat="server" Enabled="True" TargetControlID="txtTotalCharges"
ValidChars="0123456789.">
</asp:FilteredTextBoxExtender>
</itemtemplate>
<itemstyle cssclass="gridviewColumnControls" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Thanks in advance.
You can add onKeyUp javascript event for the txtCharges as below
<asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges")%>' onkeyup="calculateTotalCharge(this);"></asp:TextBox>
Now the Javascript as below
<script type="text/javascript">
function calculateTotalCharge(elem)
{
var totChargeid = $(elem).attr("id").replace('_txtCharges', '_txtTotalCharges');
$('#' + totChargeid).val(parseInt($(elem).val())*10);
}
</script>
Also you must do the required checkups for NAN. Hope this is helpful to you.
fail ... lack of understanding above ...
put the script on the page that suryakiran suggests (with a slight alteration) ...
<script type="text/javascript">
function calculateTotalCharge(charge, total)
{
$(total).val(parseInt($(charge).val())*10);
}
</script>
// in grid template
<asp:Textbox onkeyup='calculateTotalCharge(this, <%= totalchargestextbox.clientid %>)' ... />
as an attribute for the txtCharges box.
that way each rows dynamic id for the total box is passed in to the js on the client when it's called.
You can do this on the server side also
<asp:TextBox ID="txtTotalCharges" runat="server" Text='<%# Convert.ToString(Convert.ToInt32(DataBinder.Eval(Container.DataItem, "Charges"))*10 )></asp:TextBox>
I am having an issue with the paging system on Telerik's RadGrid (AJAX). First take a look at this screenshot:
As you can see, the First/Last Prev/Next buttons are there, but there is no markings on them. Also, the dropdown (thats where those values are coming from) and whatever that 'select' is are really messed up. Here is my designer code:
<asp:LinqDataSource ID="ItemViewDataSource" runat="server" ContextTypeName="GSFyi.GSFyiDataClasses_DataContext"
TableName="FYI_Items" OrderBy="FYI_State.name, name" EnableDelete="True">
</asp:LinqDataSource>
<h2 class="gridTitle">
All Items</h2>
<telerik:RadGrid ID="ItemViewRadGrid" runat="server" AutoGenerateColumns="False"
DataSourceID="ItemViewDataSource" GridLines="None" AllowAutomaticDeletes="True"
EnableEmbeddedSkins="False" OnItemDataBound="itemsGrid_ItemDataBound"
AllowPaging="True" PageSize="15" AllowCustomPaging="True">
<HeaderContextMenu>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</HeaderContextMenu>
<PagerStyle FirstPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_first.png"
LastPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_last.png"
Mode="NextPrev"
NextPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_next.png"
PrevPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_previous.png" />
<MasterTableView DataKeyNames="id" DataSourceID="ItemViewDataSource" CommandItemDisplay="None"
CssClass="listItems" Width="98%" PageSize="15" PagerStyle-Mode="NextPrevAndNumeric">
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn ItemStyle-CssClass="gridActions edit" UniqueName="Edit">
<ItemTemplate>
<asp:HyperLink ID="edit" runat="server" Text="Edit"></asp:HyperLink>
</ItemTemplate>
<ItemStyle CssClass="gridActions edit"></ItemStyle>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn ConfirmText="Are you sure you want to delete this item?"
ConfirmDialogType="RadWindow" ButtonType="LinkButton" ItemStyle-CssClass="gridActions delete"
CommandName="Delete">
<ItemStyle CssClass="gridActions delete"></ItemStyle>
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="name" HeaderText="Item Name" SortExpression="name"
UniqueName="name">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="State" UniqueName="state" >
<ItemTemplate>
<asp:Literal ID="stateLit" runat="server" Text='<%# Eval("FYI_State.name") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Type" UniqueName="type">
<ItemTemplate>
<asp:Literal ID="typeLit" runat="server" Text='<%# Eval("FYI_Type.name") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="url" HeaderText="Value" SortExpression="url" UniqueName="url">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif"
CancelImageUrl="Cancel.gif">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
I assumed that AT LEAST the images would be present since I specified these images:
But no luck. Any input will be greatly appreciated!
Cheers,
anders
Most probably the (embedded) skin CSS files have failed to load. You can use Fiddler or Firebug to check your web site for failing requests. I have a blog post showing how to troubleshoot and resolve such problems. You can check it here
Indeed the odd appearance of the grid is due to the default skin not loading. This is because you have set EnableEmbeddedSkins="False". I assume you want the 'Default' skin because you have not specified one. Remove this declaration or set it to true. The odd combobox layout is due to the lack of the skin.
The images not loading is probably unrelated to the skin not loading. I'd check the path to the images.