Questions on UI for ASP.NET AJAX Forum

2 answers

239 views

I have a page with a few Comboboxes. Not all of them are required, but the ones that are I would like to make the back ground color yellow. I see that there is a property for BackColor and InputCssClass. That all well and good, but the input area is rendered within a <span class="rcbInner">. If I only change the BackColor and InputCssClass to be yellow the <span> around it is still white. So what I would like to to do is change the rcbInner only for certain controls. I have a radcombobox named cbCC_Month so I thought this might work:

        #cbCC_Month rcbInner {
            background-color: yellow !important;
        }

It did not.

ComboBox

answered on 03 Sep 2021

0 answers

165 views

add new records gives me error Item in insert mode does implement indexer only when the edit form is autogenerated

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" MasterPageFile="~/MasterPageSingleMenu.Master" Inherits="TelerikWebApp.Test" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<link href="styles/grid.css" rel="stylesheet" />
<style>
.RadGrid_Bootstrap .rgRow>td, .RadGrid_Bootstrap .rgAltRow>td, .RadGrid_Bootstrap .rgEditRow>td, .RadGrid_Bootstrap .rgFooter>td, .RadGrid_Bootstrap .rgFilterRow>td, .RadGrid_Bootstrap .rgHeader, .RadGrid_Bootstrap .rgResizeCol, .RadGrid_Bootstrap .rgGroupHeader td {
padding-left: 5px!important;

</style>
<asp:Label ID="comboLbl" runat="server" Text="Select to view its Student Details." />

<telerik:RadComboBox RenderMode="Lightweight" HighlightTemplatedItems="True" Skin="Material" ID="RadComboBox1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="ClassroomName" DataValueField="DDLDetailsId" Width="950px" DropDownCssClass="exampleRadComboBox" Height="150px"
AppendDataBoundItems="true">
<DefaultItem Text="Please select " Value="-1"/>

<HeaderTemplate>

<ul>
<li class="col1">ClassroomName</li>
<li class="col2">GradeName</li>
<li class="col3">SectionName</li>
<li class="col4">TeacherFirstName</li>
<li class="col5">TeacherLastName</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "ClassroomName") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "GradeName") %></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "SectionName") %></li>
<li class="col4">
<%# DataBinder.Eval(Container.DataItem, "TeacherFirstName") %></li>
<li class="col5">
<%# DataBinder.Eval(Container.DataItem, "TeacherLastName") %></li>
</ul>
</ItemTemplate>
</telerik:RadComboBox>
<br />
<br />
<telerik:RadGrid RenderMode="Lightweight" ID="OrdersGrid" AllowPaging="true" DataSourceID="gridSource" runat="server"
OnItemCommand="OrdersGrid_ItemCommand" GridLines="None" Width="100%" AllowSorting="true" OnItemDataBound="OrdersGrid_ItemDataBound">
<MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="False" ShowFooter = "true"
AllowFilteringByColumn="true" TableLayout="Fixed" AllowPaging="True"
DataKeyNames="StudentId"
InsertItemPageIndexAction="ShowItemOnFirstPage ">

<FooterStyle BackColor="#e6e6e6"></FooterStyle>

<Columns>

<telerik:GridBoundColumn DataField="StudentId" HeaderText="StudentId" SortExpression="Name" Display="false"
UniqueName="StudentId" >
<HeaderStyle />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DDLDetailsId" HeaderText="DDLDetailsId" SortExpression="DDLDetailsId" Display="false"
UniqueName="DDLDetailsId" >
<HeaderStyle />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StudentFirstName" HeaderText="StudentFirstName" SortExpression="StudentFirstName"
UniqueName="StudentFirstName">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StudentLastName" HeaderText="StudentLastName" SortExpression="StudentLastName"
UniqueName="StudentLastName">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StudentDob" HeaderText="StudentDob" SortExpression="StudentLastName"
UniqueName="StudentDob">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ParentName" HeaderText="ParentName" SortExpression="ParentName"
UniqueName="ParentName">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StudentGender" HeaderText="Gender" SortExpression="StudentGender"
UniqueName="StudentGender">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="StudentCity" HeaderText="City" SortExpression="StudentCity"
UniqueName="StudentCity">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="StudentFee" HeaderText="Fee" SortExpression="StudentCity"
DataType="System.Decimal" Aggregate="Sum" UniqueName="StudentFee">
<HeaderStyle Width="120px" />
</telerik:GridBoundColumn>

</Columns>
<EditFormSettings EditFormType="Template">
<FormTemplate>
<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
style="border-collapse: collapse;">

<tr>
<td>
<table id="Table3" width="450px" border="0" class="module">
<tr>
<td class="title" style="font-weight: bold;" colspan="2">StudentDetails :</td>
</tr>
<tr>
<td>Select Course
</td>
<td>
<telerik:RadComboBox RenderMode="Lightweight" HighlightTemplatedItems="True" Skin="Material" ID="RadComboBox1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="ClassroomName" DataValueField="DDLDetailsId" Width="950px" DropDownCssClass="exampleRadComboBox" Height="150px"
AppendDataBoundItems="true">
<DefaultItem Text="Please select " Value="-1"/>

<HeaderTemplate>

<ul>
<li class="col1">ClassroomName</li>
<li class="col2">GradeName</li>
<li class="col3">SectionName</li>
<li class="col4">TeacherFirstName</li>
<li class="col5">TeacherLastName</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "ClassroomName") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "GradeName") %></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "SectionName") %></li>
<li class="col4">
<%# DataBinder.Eval(Container.DataItem, "TeacherFirstName") %></li>
<li class="col5">
<%# DataBinder.Eval(Container.DataItem, "TeacherLastName") %></li>
</ul>
</ItemTemplate>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td>StudentFirstName:
</td>
<td>
<asp:TextBox DataField="StudentFirstNames" HeaderText="StudentFirstName" SortExpression="StudentFirstName" runat="server"
UniqueName="StudentFirstName">

</asp:TextBox>
</td>
</tr>
<tr>
<td>StudentLastName:
</td>
<td>

<asp:TextBox DataField="StudentLastNames" HeaderText="StudentLastName" SortExpression="StudentLastName" runat="server"
UniqueName="StudentLastName">

</asp:TextBox>

</td>
</tr>
<tr>
<td>StudentGender:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("StudentGender") %>' TabIndex="1">
</asp:TextBox>
</td>
</tr>
<tr>
<td>Birth Date:
</td>
<td>
<telerik:RadDatePicker RenderMode="Lightweight" ID="BirthDatePicker" runat="server" MinDate="1/1/1900" DbSelectedDate='<%# Bind("StudentDob") %>'
TabIndex="4">
</telerik:RadDatePicker>
</td>
</tr>
<tr>
<td>ParentName:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("StudentGender") %>' TabIndex="1">
</asp:TextBox>
</td>
</tr>
<tr>
<td>StudentCity:
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("StudentGender") %>' TabIndex="1">
</asp:TextBox>
</td>
</tr>
<tr>
<td>StudentFee:
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("StudentGender") %>' TabIndex="1">
</asp:TextBox>
</td>
</tr>
</table>
</td>

</tr>

<tr>
<td></td>
<td></td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnUpdate" Text='Insert'
runat="server" CommandName='PerformInsert'></asp:Button> 
<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
CommandName="Cancel"></asp:Button>
</td>
</tr>
</table>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT DDLDetails.DDLDetailsId, Classroom.ClassroomName, Grade.GradeName, Section.SectionName, Teacher.TeacherFirstName, Teacher.TeacherLastName
FROM DDLDetails
INNER JOIN Classroom ON Classroom.ClassroomId = DDLDetails.ClassroomId
INNER JOIN Grade ON Grade.GradeId = DDLDetails.GradeId
INNER JOIN Section ON Section.SectionId = DDLDetails.SectionId
INNER JOIN Teacher ON Teacher.TeacherId = DDLDetails.TeacherId"></asp:SqlDataSource>

<asp:SqlDataSource ID="gridSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="if (@DDLDetailsId <> 0)begin SELECT DISTINCT Student.StudentId, StudentLookup.DDLDetailsId, Student.StudentFirstName, Student.StudentLastName,Student.StudentDob, Student.StudentGender,Student.ParentName, Student.StudentCity, Student.StudentFee FROM StudentLookup INNER JOIN DDLDetails ON DDLDetails.DDLDetailsId = StudentLookup.DDLDetailsId INNER JOIN Student ON Student.StudentId = StudentLookup.StudentId WHERE DDLDetails.DDLDetailsId = @DDLDetailsId end ">
<SelectParameters>
<asp:ControlParameter Name="DDLDetailsId" PropertyName="SelectedValue" ControlID="RadComboBox1" />
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadComboBox1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="OrdersGrid" LoadingPanelID="AjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<script>

</script>
</asp:Content>

Aspx,cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace TelerikWebApp
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
float total;
protected void OrdersGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem dataItem = e.Item as GridDataItem;
float fieldValue = float.Parse(dataItem["StudentFee"].Text);
total += fieldValue;
}
if (e.Item is GridFooterItem)
{
GridFooterItem footerItem = e.Item as GridFooterItem;
footerItem["StudentFee"].Text = "total: $ " + total.ToString();
}

}

protected void RadGrid1_InsertCommand(object sender, GridCommandEventArgs e)
{
GridEditFormInsertItem insertedItem = (GridEditFormInsertItem)e.Item;
string LastName = (insertedItem["StudentFirstName"].Controls[0] as TextBox).Text;
string FirstName = (insertedItem["StudentLastName"].Controls[0] as TextBox).Text;
}

protected void OrdersGrid_ItemCommand(object sender, GridCommandEventArgs e)
{
if (e.CommandName == "PerformInsert")
{
GridEditFormInsertItem inserteditem = (GridEditFormInsertItem)e.Item;
string lastname = (inserteditem["studentfirstnames"].Controls[0] as TextBox).Text;
string firstname = (inserteditem["studentlastnames"].Controls[0] as TextBox).Text;

}
}

protected void btnUpdate_Click(string emp)
{

String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
SqlDataAdapter adapter = new SqlDataAdapter();
SqlCommand command = new SqlCommand(
"INSERT INTO [Student] (StudentFirstName, StudentLastName) " +
"VALUES (@StudentFirstName, @StudentLastName)", conn);

// Add the parameters for the InsertCommand.
//command.Parameters.AddWithValue("@StudentFirstName", StudentFirstName.Text);
//command.Parameters.AddWithValue("@StudentLastName", StudentLastName.Text);

adapter.InsertCommand = command;
int modified = (int)command.ExecuteScalar();

}
}
}

Grid

asked on 03 Sep 2021

0 answers

324 views

Add item to RadMultiSelect

Is it possible to add items to RadMultiSelect from the client-side dynamically?

https://demos.telerik.com/aspnet-ajax/multiselect/overview/defaultcs.aspx

MultiSelect

asked on 02 Sep 2021

0 answers

239 views

Bootstrap grid builder integration

This is more like a feature request...very powerfull addition would be a Bootstrap grid builder like this one:

https://www.youtube.com/watch?v=WQZ9zcf_ZRo

How cool would that be, building your Bootstrap parts in the Editor itself. Did anyone try this? Any hints on how one could build this functionality.

Please let me know if we could collaborate to get something like this.

Regards,

Marc

Editor

asked on 01 Sep 2021

1 answer

195 views

How to render RadChat Image Attachement?

I tried to render an image attachment but it gives an empty bubble. Can anyone provide a working sample?

chat.renderAttachments({

            attachments: [{

                contentType: "image_card",

                content: {

                    image: "https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif?cid=3640f6095bf5990153692f462ed33eaa"

}

}],

            attachmentLayout: "list"

        }, chat.get_user());

Chat

answered on 01 Sep 2021

1 answer

481 views

telerik:RadScheduler -- Exception: 13.333333015441895 is not a valid value for Int32

Hi, This is little bit weird and hard to debug. only one user (rest of the 10 business users are not having this issue on their computers, and all users are having similar systems and applications and all are using latest chrome browser only) is getting below error when trying to open advanceedittemplate in telerik:RadScheduler by clicking on any event on the calendar control. we are using 2012 version telerik.web.UI.dll.

tried to put try catch block in all the events but it logs below error only. and more over I'm not able to replicate this issue on the development machine using Visual Studio 2012.

--------------------------------------------------------------------------------------------------

Inner Exception Type: System.FormatException
Inner Exception: Input string was not in a correct format.
Inner Source: mscorlib
Inner Stack Trace:
at System.Number.StringToNumber(String str, NumberStyles options, NumberBuffer& number, NumberFormatInfo info, Boolean parseDecimal)
at System.Number.ParseInt32(String s, NumberStyles style, NumberFormatInfo info)
at System.ComponentModel.Int32Converter.FromString(String value, NumberFormatInfo formatInfo)
at System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
Exception Type: System.Exception
Exception: 13.333333015441895 is not a valid value for Int32.
Source: ~/centerappointmentdetails.aspx CenterGUID : 2945ff5c-78a4-4f80-967b-a244d5e85515
Stack Trace:
at System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)
at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)
at System.Web.Script.Serialization.ObjectConverter.AssignToPropertyOrField(Object propertyValue, Object o, String memberName, JavaScriptSerializer serializer, Boolean throwOnError)
at System.Web.Script.Serialization.ObjectConverter.ConvertDictionaryToObject(IDictionary`2 dictionary, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)
at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)
at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)
at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)
at Telerik.Web.UI.RadScheduler.LoadPostData(String postDataKey, NameValueCollection postCollection)
at System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad)
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

--------------------------------------------------------------------------

Scheduler

answered on 01 Sep 2021

1 answer

368 views

Get Mouse Coordinates while drawing/cropping

Hi,

I am able to get the mouse position using the client sides events but is it possible to get the starting/ending mouse positions while drawing a rectangle? or is the information from the cropping window available on the client side (Width, Height, Position X,Y?

The requirement is to have the user identify something on the image and create "tag". Ideally, the user can use the rectangle to draw the outline. I would need to get the starting/ending mouse coordinates.

I can use the click events but that is not ideal.

I tried to use some other client side events but with no luck.

Thanks.

-Haris

ImageEditor

answered on 31 Aug 2021

0 answers

225 views

Prevent grid flickering using Ajax?

Hello,

I have a RadGrid and when adding anew record, there are some of cascade dropdown. Once a selection is made in "Record Type", then the dropdown below, "Sub-Type" rebinds to the data source and displays only relevant records.

Code below (it works correctly, I am just adding it as a reference to understand the issue I am experiencing):

Protected Sub RecordType_SelectedIndexChanged(ByVal sender As Object, ByVal e As DropDownListEventArgs)
    Dim combo As RadDropDownList = TryCast(sender, RadDropDownList)
    Dim container As GridEditableItem = TryCast(combo.NamingContainer, GridEditableItem)

    Dim workProductCombo As RadDropDownList = TryCast(container.FindControl("SubTypeDropDown"), RadDropDownList)
    If Not workProductCombo Is Nothing Then
      SqlDataSource7.SelectCommand = "SELECT [Sub_Type] FROM [Record_Sub_Type] WHERE [id]=(SELECT [ID] from [Record_Type1] where [Record_Type]='" & combo.SelectedValue & "') OR [ID]=0 ORDER BY [Sub_Type] ASC"
        SqlDataSource7.DataBind()

      workProductCombo.DataBind()
      workProductCombo.ClearSelection()
    End If

   
  End Sub

Action on grid when adding new record:

Everything works correctly but.... grid is flickering when dropdown selection triggers a data source rebind. How to avoid this? I tied to "ajaxify" the grid as follows, but no result.



  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadGrid1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManager>

Ajax

Grid

updated question on 30 Aug 2021

1 answer

169 views

How does the RadAsyncUpload differentiate between web users?

When a file is added to the UploadFiles collection, it goes to the RadUploadTemp folder, and given a filename prefix consisting of numbers.

When it comes time to actually upload those files to the desired location, and considering there is one Temp location for all users, how does this tool differentiate, and only upload the items pertaining to that user/session, etc.?

I've monitored the temp folder while dropping files into the dropzone, from two different computers, and I don't understand how it knows which files go with which browser session.

AsyncUpload

answered on 27 Aug 2021

1 answer

160 views

Hide Chart Series by Series Name - Client Side

I have figured out how to hide a series by the index but I am not guaranteed the index will always be the same for each series, how can I hide/show series by name client side?

This hides by index:

var chart = $find("<%= myChart.ClientID %>");
var kendoChart = chart.get_kendoWidget();

kendoChart.options.series[1].visible = false;

I have tried to figure out how to get the index from below but have not been successful:

kendoChart.findSeriesByName("mySeriesName");

Chart (HTML5)

answered on 26 Aug 2021