Radgrid GridTemplateColumn Not Displaying on all rows - javascript

I have an aspx page, however I am experiencing a strange problem.
I have a RadGrid datagrid in my webpage, I'm binding the data on the client side using JavaScript. I have created a GridTemplateColumn in the RadGrid, see below code:
<td colspan="2">
<telerik:RadGrid ID="OrderLines" GridLines="None" AutoGenerateColumns="false" PageSize="1" AllowMultiRowEdit="True" MasterTableView-EditMode="EditForms" AllowPaging="false" AllowSorting="false" runat="server">
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
<ClientEvents OnCommand="onCommand" />
</ClientSettings>
<MasterTableView ShowFooter="true" ClientDataKeyNames="ItemID" TableLayout="Auto" EditMode="InPlace">
<Columns>
<telerik:GridBoundColumn DataField="ItemCode" HeaderText="Item" UniqueName="Item"
HeaderStyle-Width="400px" ItemStyle-Width="400px" ItemStyle-HorizontalAlign="Left"
ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Test" HeaderStyle-HorizontalAlign="Left"
UniqueName="Test" HeaderStyle-Width="120px" ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<telerik:RadNumericTextBox runat="server" ID="Qty" Width="40px"/>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="UnitPrice" HeaderText="Unit Price" HeaderStyle-HorizontalAlign="Left"
UniqueName="UnitPrice" HeaderStyle-Width="100px" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left"
DataFormatString="{0:N}" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LineTotalExVat" HeaderText="Total (Excl VAT)"
HeaderStyle-HorizontalAlign="Left" UniqueName="LineTotalExVat" HeaderStyle-Width="100px"
ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left" DataFormatString="{0:N}"
ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="VAT" HeaderText="VAT" HeaderStyle-Width="100px"
HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left"
DataFormatString="{0:N}" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LineTotal" HeaderText="Line Total" HeaderStyle-Width="100px"
HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Left"
DataFormatString="{0:N}" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn HeaderText="Delete" CommandName="Delete" Text="Delete"
ItemStyle-Width="50px" HeaderStyle-Width="50px">
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</td>
</tr>
The problem is when I launch the website I get the following: see below image:
The custom column doesn't appear on all the rows.
Any help would be greatly appreciated.

Hi I managed to sort this out by changing the PageSize="1" to read PageSize="1000" so the first 1000 records on my RadGrid will display my custom ColumnTemplate.

Related

Add item to DropDownList in EditItemTemplate of a Gridview

I am trying to find a way to add an item to a dropdownlist using codebehind or javascript.
the dropdownlist is located within a gridview in the edit item section
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataKeyNames="pallet" DataSourceID="RFS_TW" AllowPaging="True" Width="100%">
<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="pallet" HeaderText="Pallet" ReadOnly="True" SortExpression="pallet" ItemStyle-Width="10%" >
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="date_added" HeaderText="Date" SortExpression="date_added" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="department" HeaderText="Department" SortExpression="department" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:TemplateField HeaderText="sold_by" SortExpression="sold_by">
<EditItemTemplate>
<asp:DropDownList ID="soldby_ddl" runat="server" >
<asp:ListItem>Please Select</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("sold_by") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Try to use
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.appendChild(option);
}
or
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.options[i++] = option;
}

Calculate Running Total in asp.net Gridview [duplicate]

This question already has answers here:
how I can show the sum of in a datagridview column in asp.net
(2 answers)
Closed 7 years ago.
i would like to calculate running total in gridiview using javascript or any other method just to calculate the total hours and the grand total hours as users keying in the numbers. So here is how my current gridview look like
i want to calculate the running total as users key in the number as shown in the green highlighted color.
<div>
<asp:GridView ID="grvTest" runat="server"
ShowFooter="True" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333"
GridLines="None" OnRowDeleting="grvStudentDetails_RowDeleting">
<Columns>
<asp:BoundField DataField="ID" HeaderText="Row ID" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:DropDownList ID="ddl1" runat="server">
<%--<asp:ListItem Value="G">test1</asp:ListItem>
<asp:ListItem Value="P">test2</asp:ListItem>--%>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Day1">
<ItemTemplate>
<asp:TextBox ID="txtDay1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Day2">
<ItemTemplate>
<asp:TextBox ID="txtDay2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
GRAND TOTAL:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
</div>
I assume that you are using a query like below to fetch data from database and binding it to your grid.
SELECT ID, NAME, HOURS1, HOURS2 FROM YOUR_TABLE
You can updated this query to have a new column to calculate your totals.
SELECT ID, NAME, HOURS1, HOURS2, HOURS1 + HOURS2 AS TOTAL FROM YOUR_TABLE
If this is not the case then please share how you are fetching and filling data into grid. So that I can suggest your more relevant solution.

make (GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript

How can i make this (Filter GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript ?
<asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="True" DataSourceID="DropDownDataSource"
DataTextField="SC" DataValueField="SC" AppendDataBoundItems="True">
<asp:ListItem Text="All " Value="" />
</asp:DropDownList>
<asp:SqlDataSource ID="DropDownDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT [SC] FROM [CountTable]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="False" DataSourceID="GridDataSource"
DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="150"
InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="SC" HeaderText="SC" ItemStyle-Width="150"
SortExpression="SC" />
<asp:BoundField DataField="Traffic" HeaderText="Traffic"
SortExpression="Traffic" />
</Columns>
<HeaderStyle BackColor="#3AC0F2" ForeColor="White"></HeaderStyle>
</asp:GridView>
<asp:SqlDataSource ID="GridDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT * FROM [CountTable]" FilterExpression="SC = '{0}'">
<FilterParameters>
<asp:ControlParameter Name="SC" ControlID="ddlCountries" PropertyName="SelectedValue" />
</FilterParameters>
</asp:SqlDataSource>

Edit/Delete dosen't work in Telerik Grid (telerik control)

I trying to edit row or delete it an this just doesn't work,and don't throw any ex
Do any know what i am missing here?
My server side is empty i didn't put any functions there.
I think if don't get any errors maybe,i have problem in sql security that don't allow me to do update
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RadGroupedGridForm.aspx.cs" Inherits="RadGroupedGridForm" %>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:WebsiteConnectionString %>" ID="DataSource1" runat="server" DeleteCommand="DELETE FROM [TABLE_PRODUCT_CATEGORY] WHERE [ID] = #ID" InsertCommand="INSERT INTO [TABLE_PRODUCT_CATEGORY] ([ID], [LoadCategory], [ProductCategory], [ShortDescription], [NumberOfItems]) VALUES (#ID, #LoadCategory, #ProductCategory, #ShortDescription, #NumberOfItems)" SelectCommand="SELECT [ID], [LoadCategory], [ProductCategory], [ShortDescription], [NumberOfItems] FROM [TABLE_PRODUCT_CATEGORY]" UpdateCommand="UPDATE [TABLE_PRODUCT_CATEGORY] SET [LoadCategory] = #LoadCategory, [ProductCategory] = #ProductCategory, [ShortDescription] = #ShortDescription, [NumberOfItems] = #NumberOfItems WHERE [ID] = #ID">
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="LoadCategory" Type="Boolean" />
<asp:Parameter Name="ProductCategory" Type="String" />
<asp:Parameter Name="ShortDescription" Type="String" />
<asp:Parameter Name="NumberOfItems" Type="Int16" />
<asp:Parameter Name="ID" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="True" GridLines="None" DataSourceID="DataSource1" AllowFiltering="False" AllowFilteringByColumn="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0">
<MasterTableView GroupLoadMode="server" ShowGroupFooter="False" GroupsDefaultExpanded="False" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column" HeaderText="ID" ReadOnly="True" SortExpression="ID" UniqueName="ID">
</telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn DataField="LoadCategory" DataType="System.Boolean" FilterControlAltText="Filter LoadCategory column" HeaderText="LoadCategory" SortExpression="LoadCategory" UniqueName="LoadCategory">
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn DataField="ProductCategory" FilterControlAltText="Filter ProductCategory column" HeaderText="ProductCategory" SortExpression="ProductCategory" UniqueName="ProductCategory">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="ShortDescription" SortExpression="ShortDescription" UniqueName="ShortDescription">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="NumberOfItems" DataType="System.Int16" FilterControlAltText="Filter NumberOfItems column" HeaderText="NumberOfItems" SortExpression="NumberOfItems" UniqueName="NumberOfItems">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="True">
</ClientSettings>
</telerik:RadGrid>
</div>
</form>
</body>
</html>
Please add below property in your radgrid and check.
<telerik:RadGrid AllowAutomaticDeletes="true"
AllowAutomaticUpdates="true" AllowAutomaticInserts="true">

How to read values from nested asp.net DataGrid using Javascript

I need to read the value from a nested data grid in aspx page using Javascript.
Here is my code:
<tr>
<td colspan="2" align="center">
<asp:DataGrid ID="sampleData" AutoGenerateColumns="false" runat="server" OnItemDataBound="sampleData_ItemDataBound">
<Columns>
<asp:BoundColumn HeaderText="Name" DataField="Name" />
<asp:BoundColumn HeaderText="City" DataField="City" />
<asp:BoundColumn HeaderText="State" DataField="State" />
<asp:TemplateColumn HeaderText="Inner Data">
<ItemTemplate>
<asp:DataGrid ID="innerData" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundColumn HeaderText="Name" DataField="Name" />
<asp:BoundColumn HeaderText="City" DataField="City" />
<asp:BoundColumn HeaderText="State" DataField="State" />
</Columns>
</asp:DataGrid>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</td>
</tr>
look at the id which is generated for the component on browsers view source page
Probably it would be iterating by incremental numbers. I am not aware of <asp:Datagrid>
Get the component in javsacript by using document.getElementById('innerData') and the values accordingly.
if its a table then by document.getElementById('innerData').getElementsByTagName('td');

Categories