Questions on UI for ASP.NET AJAX Forum

1 answer

144 views

Requirements
Telerik Product and Version	2017.1.118.40 Telerik.Web.UI
Supported Browsers and Platforms	Internet Explorer 11
Components/Widgets used (JS frameworks, etc.)

PROJECT DESCRIPTION
I am new to Telerik. I have to create a RadGrid with Insert/Update/Delete functionality using onneeddatasource. the code is working to some extent, but I need that when Edit template is opened, there should be databound dropdowns rather than textboxes. Similarly functionality for insert.

<%@ PageLanguage="C#"AutoEventWireup="true"CodeBehind="ReviewerMaintenance.aspx.cs"
    Inherits="textXslt.ReviewerMaintenance"%>

<%@ RegisterAssembly="Telerik.Web.UI"Namespace="Telerik.Web.UI"TagPrefix="telerik"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Reviewer Maintenance</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadAjaxManager ID="RadAjaxManager1"runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadScriptManager ID="RadScriptManager1"runat="server">
    </telerik:RadScriptManager>
    <div>
        <div>
            <telerik:RadGrid ID="RadGrid1"runat="server"AllowFilteringByColumn="True"AllowPaging="True"
                AllowSorting="True"AutoGenerateColumns="False"OnNeedDataSource="radGrid_NeedDataSource"
                Width="97%"OnDeleteCommand="RadGrid1_DeleteCommand"OnInsertCommand="RadGrid1_InsertCommand"
                OnUpdateCommand="RadGrid1_UpdateCommand"EnableAJAX="True"ShowGroupPanel="True"
                Skin="Bootstrap">
                <PagerStyleMode="NextPrevAndNumeric"></PagerStyle>
                <GroupingSettingsCollapseAllTooltip="Collapse all groups"></GroupingSettings>
                <ClientSettingsAllowDragToGroup="True">
                    <ScrollingAllowScroll="True"UseStaticHeaders="True"/>
                </ClientSettings>
                <MasterTableViewAutoGenerateColumns="False"DataKeyNames="AccessID"Width="100%"
                    CommandItemDisplay="Top">
                    <Columns>
                        <telerik:GridButtonColumn CommandName="Delete"Text="Delete"UniqueName="Delete">
                        </telerik:GridButtonColumn>
          <telerik:GridBoundColumn DataField="AccessID" DataType="System.Int32" FilterControlAltText="Filter AccessID column"
                            HeaderText="Access ID" ReadOnly="True"SortExpression="AccessID"UniqueName="AccessID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName"FilterControlAltText="Filter FirstName column"
                            HeaderText="First Name" ReadOnly="True" SortExpression="FirstName" UniqueName="FirstName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastName"FilterControlAltText="Filter LastName column"
                            HeaderText="Last Name" ReadOnly="True" SortExpression="LastName" UniqueName="LastName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FormName"FilterControlAltText="Filter FormName column"
                            HeaderText="Form Name" SortExpression="FormName" UniqueName="FormName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactType"FilterControlAltText="Filter ContactType column"
                            HeaderText="Contact Type" SortExpression="ContactType" UniqueName="ContactType">
                        </telerik:GridBoundColumn>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                    </Columns>
                    <EditFormSettingsColumnNumber="2"CaptionFormatString="Edit details for Access ID {0}"
                        CaptionDataField="AccessID">
                        <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                        <FormMainTableStyle CellSpacing="0"CellPadding="3"Width="100%"/>
                        <FormTableStyle GridLines="Horizontal"CellSpacing="0"CellPadding="2"CssClass="module"
                            Height="110px"Width="50%"/>
                        <FormTableAlternatingItemStyleWrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="50%" BackColor="#EEF2EA"></FormStyle>
                        <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right"CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                    </EditFormSettings>
                    <ExpandCollapseColumnVisible="False">
                        <HeaderStyle Width="19px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <RowIndicatorColumnVisible="False">
                        <HeaderStyle Width="20px"/>
                    </RowIndicatorColumn>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </div>
    </form>
</body>
</html>

Grid

answered on 23 Feb 2017

1 answer

284 views

Populate correct value for GridDropDownColumn inside RadGrid

I am using Telerik.Web.UI version 2017.1.118.40 with Visual studio 2010.

I have an issue using GridDropDownColumn inside RadGrid. In Edit mode when data is displayed in dropdownlist, its data is reset (i.e. it is not displaying the text which was in Item template or on the form for that row). I cannot use SQLDataSource, so please do not give me sample code using that.

Here is the ASPX code :

            <telerik:RadGrid ID="RadGrid1"runat="server"AutoGenerateColumns="False"GridLines="None"
                AllowMultiRowEdit="True"OnItemDataBound="RadGrid1_ItemDataBound"OnNeedDataSource="RadGrid1_NeedDataSource"
                OnUpdateCommand="RadGrid1_UpdateCommand">
                <MasterTableViewAutoGenerateColumns="false"DataKeyNames="AccessID"Width="100%"
                    CommandItemDisplay="Top">
                    <Columns>
                        <telerik:GridButtonColumn CommandName="Delete"Text="Delete"UniqueName="Delete">
                        </telerik:GridButtonColumn>
                      <telerik:GridBoundColumn DataField="AccessID" DataType="System.Int32" FilterControlAltText="Filter AccessID column"
                            HeaderText="Access ID" ReadOnly="True"SortExpression="AccessID" UniqueName="AccessID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName"FilterControlAltText="Filter FirstName column"
                            HeaderText="First Name" ReadOnly="True" SortExpression="FirstName" UniqueName="FirstName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastName"FilterControlAltText="Filter LastName column"
                            HeaderText="Last Name" ReadOnly="True" SortExpression="LastName" UniqueName="LastName">
                        </telerik:GridBoundColumn>

                        <telerik:GridDropDownColumnFilterControlAltText="Filter ddlForm column" UniqueName="ddlForm"
                            ListTextField="FormName"ListValueField="FormID"SortExpression="FormName"
HeaderText="Form Name"
                            DataField="FormID"ListDataMember="FormName"DropDownControlType="DropDownList">
                        </telerik:GridDropDownColumn>

                        <telerik:GridBoundColumn DataField="ContactType"FilterControlAltText="Filter ContactType column"
                            HeaderText="Contact Type" SortExpression="ContactType" UniqueName="ContactType">
                        </telerik:GridBoundColumn>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                    </Columns>
                    <EditFormSettingsColumnNumber="2"CaptionFormatString="Edit details for Access ID {0}"
                        CaptionDataField="AccessID">
                        <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                        <FormMainTableStyle CellSpacing="0"CellPadding="3"Width="100%"/>
                        <FormTableStyle GridLines="Horizontal"CellSpacing="0"CellPadding="2"CssClass="module"
                            Height="110px"Width="100%"/>
                        <FormTableAlternatingItemStyleWrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="100%"BackColor="#EEF2EA"></FormStyle>
                        <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>

Here is code behind:
    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {

            SqlConnection con = newSqlConnection(DataAccess.Connection.StrConn);
            SqlCommand cmd = newSqlCommand("dbo.MyStoredProc", con);
            SqlDataAdapter adapter = newSqlDataAdapter();
            adapter.SelectCommand = cmd;

            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandTimeout = 90;

            DataTable myDataTable = newDataTable();

            con.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                con.Close();
            }

            RadGrid1.DataSource = myDataTable;
        }

        protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {

                GridEditableItem editedItem = e.Item as GridEditableItem;

                GridEditManager editMan = editedItem.EditManager;

                GridDropDownListColumnEditor editor = editMan.GetColumnEditor("ddlForm") as GridDropDownListColumnEditor;
                DropDownList ddList = editor.DropDownListControl;
                ddList.DataSource = GetDataTable("SELECT [FormID], FormName FROM dbo.[Table_FormList]"); //ds;
                ddList.DataTextField = "FormName";
                ddList.DataValueField = "FormID";
                ddList.DataBind();

            }
            }
            public DataTable GetDataTable(string query)
            {
                SqlConnection con = new SqlConnection(DataAccess.Connection.StrConn);
                SqlDataAdapter adapter = new SqlDataAdapter();
                adapter.SelectCommand = new SqlCommand(query, con);
                DataTable myDataTable = new DataTable();
                con.Open();
                try
                {
                    adapter.Fill(myDataTable);
                }
                finally
                {
                  con.Close();
                }
                return myDataTable;
            }

Grid

answered on 23 Feb 2017

1 answer

78 views

Issue with Retrieving Value from GridDropDownColumn inside RadGrid

I am trying to retrieve value of the selected item in GridDropDownColumn on RadGrid1_UpdateCommand event. I get

Error: "Cannot find a cell bound to column name 'FormID'". I am giving all the code, but the issue is in RadGrid1_UpdateCommand when it tries to get the FormID.

            <telerik:RadGrid ID="RadGrid1"runat="server"AutoGenerateColumns="False"GridLines="None"
                AllowMultiRowEdit="True"OnItemDataBound="RadGrid1_ItemDataBound"OnNeedDataSource="RadGrid1_NeedDataSource"
                OnUpdateCommand="RadGrid1_UpdateCommand">
                <MasterTableViewAutoGenerateColumns="false"DataKeyNames="AccessID"Width="100%"
                    CommandItemDisplay="Top">
                    <Columns>
                        <telerik:GridButtonColumn CommandName="Delete"Text="Delete"UniqueName="Delete">
                        </telerik:GridButtonColumn>
                      <telerik:GridBoundColumn DataField="AccessID" DataType="System.Int32" FilterControlAltText="Filter AccessID column"
                            HeaderText="Access ID" ReadOnly="True"SortExpression="AccessID" UniqueName="AccessID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName"FilterControlAltText="Filter FirstName column"
                            HeaderText="First Name" ReadOnly="True" SortExpression="FirstName" UniqueName="FirstName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastName"FilterControlAltText="Filter LastName column"
                            HeaderText="Last Name" ReadOnly="True" SortExpression="LastName" UniqueName="LastName">
                        </telerik:GridBoundColumn>

                        <telerik:GridDropDownColumnFilterControlAltText="Filter ddlForm column" UniqueName="ddlForm"
                            ListTextField="FormName"ListValueField="FormID"SortExpression="FormName"
HeaderText="Form Name"
                            DataField="FormID"ListDataMember="FormName"DropDownControlType="DropDownList">
                        </telerik:GridDropDownColumn>

                        <telerik:GridBoundColumn DataField="ContactType"FilterControlAltText="Filter ContactType column"
                            HeaderText="Contact Type" SortExpression="ContactType" UniqueName="ContactType">
                        </telerik:GridBoundColumn>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                    </Columns>
                    <EditFormSettingsColumnNumber="2"CaptionFormatString="Edit details for Access ID {0}"
                        CaptionDataField="AccessID">
                        <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                        <FormMainTableStyle CellSpacing="0"CellPadding="3"Width="100%"/>
                        <FormTableStyle GridLines="Horizontal"CellSpacing="0"CellPadding="2"CssClass="module"
                            Height="110px"Width="100%"/>
                        <FormTableAlternatingItemStyleWrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="100%"BackColor="#EEF2EA"></FormStyle>
                        <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>

Here is code behine:
    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {

            SqlConnection con = newSqlConnection(DataAccess.Connection.StrConn);
            SqlCommand cmd = newSqlCommand("dbo.MyStoredProc", con);
            SqlDataAdapter adapter = newSqlDataAdapter();
            adapter.SelectCommand = cmd;

            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandTimeout = 90;

            DataTable myDataTable = newDataTable();

            con.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                con.Close();
            }

            RadGrid1.DataSource = myDataTable;
        }

        protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {

                GridEditableItem editedItem = e.Item as GridEditableItem;

                GridEditManager editMan = editedItem.EditManager;

                GridDropDownListColumnEditor editor = editMan.GetColumnEditor("ddlForm") as GridDropDownListColumnEditor;
                DropDownList ddList = editor.DropDownListControl;
                ddList.DataSource = GetDataTable("SELECT FormID, FormName FROM dbo.[Table_FormList]"); //ds;
                ddList.DataTextField = "FormName";
                ddList.DataValueField = "FormID";
                ddList.DataBind();

            }
            }
            public DataTable GetDataTable(string query)
            {
                SqlConnection con = new SqlConnection(DataAccess.Connection.StrConn);
                SqlDataAdapter adapter = new SqlDataAdapter();
                adapter.SelectCommand = new SqlCommand(query, con);
                DataTable myDataTable = new DataTable();
                con.Open();
                try
                {
                    adapter.Fill(myDataTable);
                }
                finally
                {
                  con.Close();
                }
                return myDataTable;
            }

         protected void RadGrid1_UpdateCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
            {
                if (e.Item isGridEditableItem && e.Item.IsInEditMode)
                {

                    GridEditableItem editedItem = e.Item as GridEditableItem;

                    string AccessID = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["AccessID"].ToString();
//error on this line
                    string FormID = (editedItem["FormID"].Controls[0] as DropDownList).SelectedItem.Text;
                    string ContactType = (editedItem["ContactType"].Controls[0] as TextBox).Text;

                    try
                    {
                        //do update to database
                    }
                    catch (Exception ex)
                    {
                        RadGrid1.Controls.Add(new LiteralControl("Unable to update data. Reason: " + ex.Message));
                        e.Canceled = true;
                    }
                }

            }

Grid

answered on 23 Feb 2017

0 answers

96 views

Update Saved filter settings for PivotGrid

I have a Pivot grid with two filter. I am able to save and load the saved filter settings from the xml file in App_Data. But now I need some modifications to be made.

One of the Filters is a DataRange field which holds the Release dates and I want the Latest DateRange to be selected by default on load. Since this will require the saved xml file to be updated with new values.

I will have the latest Date in my dataset. is there a way to update the saved xml file with a value from the Dataset before loading the pivot with default settings.

PivotGrid

asked on 23 Feb 2017

2 answers

70 views

Unhide RadGrid columns on clientside

I am using a RadGrid, on load some of the columns are hidden. I have a button which should unhide those columns when clicked and the text should change to Hide. On click of the same button again the columns should hide. I am able to hide the columns successfully but unable to figure out how to unhide.

Here is the code:

function HideUnhide() {

var grid = $find("<%= RadGrid1.ClientID %>");
grid.get_masterTableView().hideColumn(8);
grid.get_masterTableView().hideColumn(9);
grid.get_masterTableView().hideColumn(10);
}

I am trying to include condition in the function where I can change the text from Unhide to Hide and depending on the text Unhide the columns in the else part but that doesn't seem to work.

Currently this code can only hide unhidden columns.

Please help.

Grid

answered on 23 Feb 2017

0 answers

51 views

Column swap does not transfer tooltip or justification

I have several grids that won't transfer tool tips and other column "decorations" like left / right justification when a column is moved interactively by the user. I believe I have found via google search this was a know problem in older versions. Is there a way I can tell which versions have the problem?

We are running 2014.3

Grid

asked on 22 Feb 2017

0 answers

95 views

Not sure whether or not I have a RadComboBox problem or a Bootstrap problem?

In my current program I have 2 RadComboBoxes within col-md-4 divs.

The labels of these boxes are vertically out of line both with their drop down boxes and with the RadTextBox on the same line (in another col-md-4 div).

Is there a way yet to fix this, either through settings or CSS?

Most of the references I've found so far seem pretty old. (I'm currently running the latest version of the Telerik Asp.Net for Ajax controls.)

ComboBox

asked on 22 Feb 2017

3 answers

148 views

After deleting last item, ajax call fails

I am using a RadListBox for adding and deleting items. To delete the item from the list i use: "listBox.deleteItem(selectedItem);" and items are deleted from the list successfully. After adding items and deleting all of the items (leaving no items in the list) , an ajax call i make fails, and does not reach the required function on the server side. if no items are added to the list, or some items are added to the list, or some items are added and some are deleted but not all of the items the ajax call succeeds. The exception i receive is: "Uncaught Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index "

Thanks for the help in advance.

ListBox

answered on 22 Feb 2017

9 answers

593 views

RadMediaPlayer issue with Source set as RelativeUrl

Hi,

I have come across a strange behavior with RadMediaPlayer (version : 2013.3.1015.40) while specifying the relative path of a media file. If the "Source" property is set to a relative path using the Web application root operator (~), the video won't load. Instead of using the (~) operator, if I specify the relative path using ../FolderName/ then the control works as expected. The relative URL containing the Web application root operator works properly when it is set to the Path property of the MediaPlayerSource under the Sources tag.

ASPX: (Video does not load)

<telerik:RadMediaPlayer ID="RadMediaPlayer2" runat="server" Width="500" Height="400px"

Source="~/Videos/RadControls.mp4">

</telerik:RadMediaPlayer>

ASPX: (Video loads as expected)

<telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" Width="500" Height="400px">

<Sources>

<telerik:MediaPlayerSource Path="~/Videos/RadControls.mp4" />

</Sources>

</telerik:RadMediaPlayer>

Please have a look into this complete solution where the above mentioned issue can be replicated. Also I would like to point out that if I select the media file through the controls smart tag, the relative URL generated for the Source will be having the Web application root operator (~) (check the screenshot attached) but the video wont load which seems to confuse the users.

Thanks,
Shinu.

MediaPlayer

answered on 22 Feb 2017

2 answers

130 views

RadDatePicker with Unity.WebForms

Hello,

I am using Unity.WebForms to enable dependency injection in my WebForms app. Whenever I attempt to access a page that contains a RadDatePicker, I get an exception telling me "The type CalendarPopupButton has multiple constructors of length 1. Unable to disambiguate."

Can you help me understand why Unity is not playing well with the Telerik tools? Thank you bery much,

Don

Calendar

answered on 22 Feb 2017