Telerik Grid disturbed with action column - c#

Note: when I added an action column with edit delete image into a Telerik grid, the whole grid is disturbed as shown in screenshot.
This only occurs when I want to add action column.
Any help will be highly apprecieted.
Thank you
<telerik:radgrid id="RadGrid1" runat="server" pagesize="20" width="100%"
autogeneratecolumns="False">
<MasterTableView Name="MasterView1" DataKeyNames="Regid" AllowMultiColumnSorting="false">
<ItemStyle CssClass="GridRow1" />
<AlternatingItemStyle CssClass="GridRow2" />
<Columns>
<telerik:GridTemplateColumn HeaderText="Action" DataField="Regid" UniqueName="CkboxDelKey" HeaderStyle-CssClass="LeftGridHeader">
<ItemTemplate>
<nobr>
<asp:ImageButton ID="btnNoteEdit" ToolTip="Edit Goal" ImageUrl="images/EmailAlertEdit.png"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Regid") %>' CommandName="UpdateKeyResult"
runat="server" />
<ItemStyle Width="90px" />
<asp:ImageButton ID="btnDel" ToolTip="Delete Goal" ImageUrl="images/EmailAlertDelete.png"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Regid") %>' CommandName="DelNote" OnClientClick="javascript:return confirm('Are you sure you want to Delete?');"
runat="server" />
<ItemStyle Width="90px" />
</nobr>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="LastName" UniqueName="LastName">
<ItemStyle Width="90px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Firstname" HeaderText="Firstname" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="Firstname" UniqueName="Firstname">
<ItemStyle Width="90px" />
</telerik:GridBoundColumn>
<%-- <telerik:GridBoundColumn DataField="KeyResult" HeaderText="Key Result Score" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="KeyResult" UniqueName="KeyResult">
<ItemStyle Width="80px" />
</telerik:GridBoundColumn>--%>
</Columns>
</MasterTableView>
</telerik:radgrid>

What do you expect it to do? At it's heart, the RadGrid is just a table element with rows and columns. If you add one more cell to one of the rows, it will not look right. I suggest making a GridTemplateColumn for every row and deciding whether to show the buttons or not within this cell.

Related

Check a checkbox when the other is checked in gridview

Currently I have 3 checkboxes in gridview which are Approval,Access and Edit. What I want to achieve is when I checked the Edit column, the Access column will be checked automatically too. Is there any way to solve this? I have looked through a lot internet source but still not able to do it. Please help me..
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="True" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="11pt" HorizontalAlign="Center" Width="65%">
<Columns>
<asp:BoundField DataField="Module" HeaderText="Module" SortExpression="Module" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField HeaderText="Approval">
<ItemTemplate>
<asp:CheckBox ID="CBApproval" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Access">
<ItemTemplate>
<asp:CheckBox ID="CBAccess" runat="server" AutoPostBack="False" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:CheckBox ID="CBEdit" runat="server" AutoPostBack="True"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#FFCC00" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" />
</asp:GridView>
Sinc edit checkbox postback you may set the value of accessed checkbox from codebehind.. Add new event to edit checkbox on click and set new value for accessed checkbox.checked

ASP.NET generate ID using Eval functinon

For each row in GridView i have a HyperLink, and i need to generate different ID´s for each of them. Using Eval doesn´t work properly:
<asp:GridView
ID="ResultTableGvw"
runat="server"
AutoGenerateColumns="false"
OnRowDataBound="ResultTableGvw_RowDataBound">
<Columns>
<asp:BoundField ReadOnly="true" HeaderText="ID" DataField="id" />
<asp:BoundField ReadOnly="true" HeaderText="accountId" DataField="externalId" />
<asp:BoundField ReadOnly="true" HeaderText="tydeId" DataField="typeId" />
<asp:BoundField ReadOnly="true" HeaderText="Estado" DataField="statusId" />
<asp:BoundField ReadOnly="true" HeaderText="Timestamp do Pedido" DataField="timestampRequest" />
<asp:TemplateField HeaderText="Operação" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:HyperLink
ID='<%# DataBinder.Eval( Container.DataItem, "Id", "OperationManagementHl{0}") %>'
runat="server"
Text="">
</asp:HyperLink>
</ItemTemplate>
<ItemStyle Wrap="False"></ItemStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
Any suggestion to solve this problem?
The error is : The ID property of a control can only be set using the ID attribute in the tag and a simple value. Example: <asp:Button runat="server" id="Button1" />
Try with this pattern and it works for me,
<asp:Label ID="lblNames" runat="server" Text='<%# Eval("Names") %>' Height ="60px" Width ="90%" CssClass="LabelDesign" />

Cannot set specific column widths in bootstrap gridview

I have a gridview:
<asp:GridView ID="ParentSelect" runat="server" AutoGenerateColumns="false" OnRowCommand="ParentSelect_RowCommand" OnRowCreated="ParentSelect_RowCreated" emptydatatext="Please Submit A Clip. C'mon dude." ShowHeaderWhenEmpty="true" HorizontalAlign="Center" Width="600" CssClass= "table table-striped table-bordered table-condense" OnDataBound="ParentSelect_DataBound" DataKeyNames="SubmissionID" RowStyle-Wrap="true">
<HeaderStyle BorderColor="Black" />
<Columns>
<asp:BoundField DataField ="SubmissionID" />
<asp:TemplateField HeaderText ="Vote" ItemStyle-HorizontalAlign="center" HeaderStyle-CssClass="DisplayCenterHeaderGrid">
<ItemTemplate>
<asp:Imagebutton ID="VoteUp" runat="server" ImageUrl="Content/glyphicons-202-upload.png" Width="20" ToolTip="Vote Up" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>
" CommandName="VoteUp" OnCommand="VoteUp_Command" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField ="Title" HeaderText="Title" Visible="True" HeaderStyle-Width="30" HeaderStyle-CssClass="DisplayCenterHeaderGrid"/>
<asp:BoundField DataField ="VideoUrl" HeaderText="Title" Visible="false" />
<asp:BoundField DataField ="Description" HeaderText="Title" Visible="false" />
<asp:BoundField DataField ="GenreSelection" HeaderText="Genre" Visible="True" HeaderStyle-Width="30" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" HeaderStyle-CssClass="DisplayCenterHeaderGrid" />
</Columns>
</asp:GridView>
I have tried virtually every way imaginable to set specific column widths and have been unsuccessful in doing so. Please help
Try to set ItemStyle-Width this property for your BoundField
<asp:BoundField DataField ="Title" HeaderText="Title" Visible="True"
HeaderStyle-Width="30" HeaderStyle-CssClass="DisplayCenterHeaderGrid"
ItemStyle-Width="300px"/>
In design view, click the GridView handle. Convert the BoundField to a TemplateField. Edit the template. Set the width property of the control in the ItemTemplate.
resulting sample code:
<asp:TemplateField HeaderText="Comments" SortExpression="comments">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("comments") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("comments") %>' Width="400px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>

How to populate a GridView column with a button

I have the following GridView:
<asp:GridView ID="gvDispMsg" ClientIDMode="Static" ShowHeaderWhenEmpty="false" AlternatingRowStyle-BackColor="#EBE9E9" AutoGenerateColumns="false" EmptyDataText="There is no data to display" runat="server" AllowPaging="false" AllowSorting="true">
<Columns>
<asp:BoundField HeaderText="Delete Message" HeaderStyle-Width="12%" />
<asp:BoundField HeaderText="ID" HeaderStyle-Width="12%" DataField="ID" />
<asp:BoundField HeaderText="Date" HeaderStyle-Width="13%" DataField="Created" />
<asp:BoundField HeaderText="Message" HeaderStyle-Width="45%" DataField="Message" />
<asp:BoundField HeaderText="Active" HeaderStyle-Width="10%" DataField="Active" />
<asp:BoundField HeaderText="Created By" HeaderStyle-Width="20%" DataField="CreatedBy" />
</Columns>
</asp:GridView>
It is populated from a SQL table which is executed from code-behind. The only column which is not populated is the Delete Message column.
How can I add a button for each row in the Delete Message column which takes the argument for the ID datafield?
Add
<asp:GridView AutoGenerateDeleteButton="true" DataKeyNames="ID" OnRowDeleted="NewEvent"
and handle the NewEvent in CodeBehind
or
add a <asp:ButtonField ButtonType="Button" CommandName="delete" Text="Delete" HeaderText="Delete"/> instead of a BoundField
or
add
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:Button ID="lbiDelete" runat="server" CommandName="Delete" CommandArgument='<%# Bind("ID") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="lbiDelete" runat="server" CommandName="Delete" CommandArgument='<%# Bind("ID") %>' />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="lbiDelete" runat="server" CommandName="Delete" CommandArgument='<%# Bind("ID") %>' />
</FooterTemplate>
</asp:TemplateField>
where you have most abilities to configure this column in every state

right click values for Gridview column

I have grid named 'GridView1' and displaying columns like this
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Topic" DataField="Topic" />
<asp:BoundField DataField="Moderator" HeaderText="Moderator" />
<asp:BoundField DataField="Expert" HeaderText="Expert" />
<asp:BoundField DataField="StartTime" HeaderText="Start" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:BoundField DataField="EndTime" HeaderText="End" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Join" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="JoinBT" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="Join" Text="Join" Width="52px" />
</ItemTemplate>
<HeaderStyle Height="15px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here what is my requirement is whenever we right click on each row in gridview ,it should display three option join meeting(if we click it will go to
meeting.aspx),,view details(will go to detail.aspx),,Subscribe(subscribe.aspx) just like when we click right any where we can see view,sortby,refresh
like that..Do we need to implement javascript here

Categories

Resources