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

Issues With the radgrid

4 Answers 170 Views

Grid

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

Srinivasa Gokidi asked on 13 Dec 2010, 07:27 PM

1.JPG

2.JPG

Hi,

I am getting few issues with radgrid. One is i have gridclientselectcolumn in radgrid. I am able to select all checkboxes using header checkbox but iam not able to select individual ones. Another is when i click the row iam changing the background color of a row but its not coming fully. Only half of the row is changing the color(see image 1). Anothe one is i have radmenu in commanditem template. Which is not displaying properly(see image 2). Here is my code.....

<telerik:RadGrid ID="gvPjtMnt" runat="server" AutoGenerateColumns="false" Height="600px"

BorderWidth="2px" BorderStyle="Solid" BackColor="White" AllowPaging="True" PagerStyle-AlwaysVisible="true"

PageSize="20" AllowSorting="True" OnNeedDataSource="gvPjtMnt_OnNeedDataSource"

AllowFilteringByColumn="true" OnItemCommand="gvPjtMnt_ItemCommand" OnItemCreated="gvPjtMnt_ItemCreated"

OnItemDataBound="gvPjtMnt_ItemDataBound" OnPreRender="gvPjtMnt_PreRender" AllowMultiRowSelection="true"

ClientSettings-Selecting-AllowRowSelect="true">

<HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"

HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />

<AlternatingItemStyle BackColor="#F5F5E9" HorizontalAlign="Center" BorderColor="White" />

<ItemStyle HorizontalAlign="Center" />

<MasterTableView GridLines="None" DataKeyNames="ProjectId" CommandItemDisplay="Top">

<CommandItemTemplate>

<table style="width: 100%">

<tr align="right">

<td style="width: 75%">

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"

EnableAjaxSkinRendering="true">

<Items>

<telerik:RadMenuItem Text="Text" CssClass>

<Items>

<telerik:RadMenuItem ImageUrl="Images/comment-icon.png" Value="1" NavigateUrl="javascript:validateChkUpdate()"

Text="Add Notes">

</telerik:RadMenuItem>

<telerik:RadMenuItem ImageUrl="Images/OrdUpdate.gif" Value="2" NavigateUrl="javascript:validateChkUpdate()"

Text="Bulk Updates">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

<td align="right">

<asp:LinkButton ID="lnkshwFilter" Text="ShowFilter" Font-Underline="true" ForeColor="MidnightBlue"

runat="server" OnClientClick="return showFilterItem()" />

<asp:LinkButton ID="lnkhdFilter" Text="HideFilter" Font-Underline="true" ForeColor="MidnightBlue"

runat="server" OnClientClick="return hideFilterItem()" />

</td>

<td align="right">

<asp:LinkButton ID="lnkclrFilter" Text="ClearFilter" Font-Underline="true" ForeColor="MidnightBlue"

runat="server" OnClick="lnkclrFilter_Click"></asp:LinkButton>

</td>

<td align="right">

Total Records found: <asp:Label ID="lblTotRecCount" runat="server" Font-Bold="True"

Font-Size="10pt" ForeColor="Black" Text="0"></asp:Label>

</td>

<td align="right" valign="middle">

<asp:ImageButton ID="lnkExportAll" ImageUrl="~/images/Excel.png" ToolTip="Export All"

runat="server" OnClick="ExportAll_Click" />

</td>

<td align="right" valign="middle">

<asp:ImageButton ID="ExportToExcelButton" runat="server" ImageUrl="~/images/ExportToExcel.gif"

ToolTip="Export to Excel" OnClick="ExportExcel_Click" />

</td>

</tr>

</table>

</CommandItemTemplate>

<Columns>

<telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn" HeaderStyle-Width="3%">

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="ProjectId" UniqueName="ProjectId" Visible="false">

</telerik:GridBoundColumn>

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

</telerik:GridBoundColumn>

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

</telerik:GridBoundColumn>

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

</telerik:GridBoundColumn>

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

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Project Manager Name" DataField="ProjectMgrName"

UniqueName="ProjectMgrName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Number Of Sites Received" DataField="NumSitesReceived"

UniqueName="NumSitesReceived">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Accept Service Order Date" DataField="AcceptServiceOrderTaskCompleteDate"

UniqueName="AcceptServiceOrderTaskCompleteDate" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="PTD" DataField="PTD" UniqueName="PTD" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Health Reason" DataField="HealthReason" UniqueName="HealthReason">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Project Health" DataField="ProjectHealth" UniqueName="ProjectHealth">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Customer Signed Date" DataField="CustomerSignedDate"

UniqueName="CustomerSignedDate" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="OA Complete Date" DataField="OACompleteDate"

UniqueName="OACompleteDate" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Customer Requested Due Date" DataField="CustomerRequestedDueDate"

UniqueName="CustomerRequestedDueDate" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Last Note Added" DataField="LastNoteAdded" HeaderStyle-Width="10%"

UniqueName="LastNoteAdded">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="EditRows" HeaderStyle-Width="2%" AllowFiltering="false">

<ItemTemplate>

<asp:ImageButton runat="server" ID="EditPMTsk" CommandName="EditRow" ImageUrl="Images/edit-icon.png"

ImageAlign="Middle" ToolTip="Edit Task" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnGridCreated="GridCreated" />

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

<Resizing AllowColumnResize="true" EnableRealTimeResize="false" ResizeGridOnColumnResize="false"

AllowRowResize="false" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

</telerik:RadGrid>

protected void gvPjtMnt_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem dataItem = e.Item as GridDataItem;

TableCell myCell = dataItem["ProjectHealth"];

myCell.Font.Size = 10;

myCell.Font.Bold = true;

if (myCell.Text.Trim() == "GREEN")

{

myCell.BackColor = System.Drawing.Color.Green;

myCell.ForeColor = System.Drawing.Color.White;

}

if (myCell.Text.Trim() == "RED")

{

myCell.BackColor = System.Drawing.Color.Red;

myCell.ForeColor = System.Drawing.Color.White;

}

if (myCell.Text.Trim() == "YELLOW")

{

myCell.BackColor = System.Drawing.Color.Yellow;

myCell.ForeColor = System.Drawing.Color.Black;

}

if (myCell.Text.Trim() == "COMPLETE")

{

myCell.BackColor = System.Drawing.Color.Blue;

myCell.ForeColor = System.Drawing.Color.White;

}

4 Answers, 1 is accepted

answered on 14 Dec 2010, 12:30 AM

HI,

The problem with the telerik:GridClientSelectColumn is i can select the row when i click on the row. But i am able to select only one column. When I am trying to select two columns its not working. Even if i select the checkbox its not working. But if i check the checkbox using shift button its selecting multiple rows. I dono what the issue is.

I tried using the grid template column and its working great. Can i change the row color on select and deselect check box...... If yes can you tell me how. If i sort the column and tried to check the checkboxes getting javascript error like "object is null" . if i dont do the sorting and its working fine. Here is my sample code

function CheckItem(itemCheckBox) {

var masterTableView = RG.get_masterTableView();

if (DataItems == null) {

DataItems = masterTableView.get_dataItems();

}

var row = itemCheckBox.parentNode.parentNode;

alert(document.getElementById(row));

if (row.tagName === "TR" && row.id != "") {

var item = $find(row.id);

if (!item.get_selected() && itemCheckBox.checked) {

masterTableView.clearSelectedItems();

item.set_selected(true);

}

function CheckAll(headerCheckBox) {

var isChecked = headerCheckBox.checked;

var checkboxes = RG.get_masterTableView().get_element().getElementsByTagName("INPUT");

var index;

for (index = 0; index < checkboxes.length; index++) {

if (typeof (checkboxes[index].checked) !== "undefined") {

if (isChecked) {

checkboxes[index].checked = true;

}

else {

checkboxes[index].checked = false;

}

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderStyle-Width="3%" ItemStyle-Width="3%">
                                                                                <HeaderTemplate>
                                                                                    <input onclick="CheckAll(this);" type="checkbox">
                                                                                </HeaderTemplate>
                                                                                <ItemTemplate>
                                                                                    <asp:CheckBox ID="CheckBox1" onclick="CheckItem(this);" runat="server" AutoPostBack="False">
                                                                                    </asp:CheckBox>
                                                                                </ItemTemplate>
                                                                            </telerik:GridTemplateColumn>

Accepted

answered on 14 Dec 2010, 05:01 PM

i have a question why you cleared the selection before you select the current row are you only selecting the current row ????
If you only want the the current row is selected remove AllowMultiRowSelection="true" in telerik:RadGrid and remove masterTableView.clearSelectedItems();. maybe that will solve all your problems

Edit:if you aren't using a Skin for the grid ... there is a style for selected rows you can set it. That would be enough for you need. Selecting the row via Client-side or server-side would use that style and highlight the row as you want

if that doesn't works check this single radiobutton check at a time with row selection (with a small mods you can make it works in you current template)

OK relating to your problems in chekboxes JavaScript function maybe the problem is that you are sending the control itself
try to only send the Client id and manipulate all from there instead of trying to modify the object directly

if this post solves your current problems i encourage you to mark it as answer