Questions on UI for ASP.NET AJAX Forum

4 answers

368 views

Hi All,

I'm evaluating 3rd party controls for my client's websites and wanted to find out if Telerik offers one particular functionality that is needed :-

We have a templated grid that contains various types of controls in different columns - say DatePicker, DropDownList, Numeric textbox etc. We want to be able to insert/update/delete rows in it entirely on the client side. When the user clicks "add new row", for example, a new row will be added with the DatePickers, DropDownList or whatever else is defined in the template. No changes are saved to the database at this point and once the user is done, he can click a "Save" button that will iterate the grid and save the changes.

So, basically the main problem is keeping the template of the grid while adding/editing rows from the client side (no ajax etc) and then be able to iterate it on server side. Can Telerik grid do this?

Thank You,
Manoj

Grid

answered on 25 Oct 2011

1 answer

71 views

How to Generate Insert, Edit Control on runtime

hello this is Vivek here
How can i generate Runtime control in edit or insert, like Binded Dropdown-list etc...

Regards Vivek

Grid

answered on 25 Oct 2011

1 answer

55 views

Month/Year Picker textbox disabled in FireFox when ShowPopOnFocus=true

I am experiencing an issue which appears to be occurring in your demo of the Month/Year Picker control as well. When we set ShowPopUpOnFocus="true", the user is unable to type a date into the DateInput field in FireFox and Safari. This seems to work fine in IE. Any suggestions?

Calendar

answered on 25 Oct 2011

2 answers

133 views

editing throws js null reference exception

I had this working yesterday. I'm not sure what changed. Clicking the edit button in one of my RadGrid rows throws out:

Sys.WebForms.PageRequestManagerServerErrorException: Object reference not set to an instance of an object.

from javascript. Yesterday, it was bringing up the edit form just fine and letting me make changes. It seems as if all my grid events fire on the client o.k. (Edit, ItemCommand, ItemDataBound, ItemCreated), then this error pops up.

Here's my markup if it helps. I don't see what's going on.

(BTW, using the edit form to create an entity is working just fine. It's only when I hit the edit link on an existing row).

Thanks,

Scott

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MediaList.ascx.cs" Inherits="PledgeWeb.MediaLibrary.Controls.MediaList" %>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var mediaList = {};

mediaList.get_AddDocumentModalUrl = function mediaList_getAddDocumentModalUrl() {

return '<%= Page.ResolveClientUrl("~/MediaLibrary/Modals/AddDocument.aspx") %>';

}

mediaList.get_ViewDocumentModalUrl = function mediaList_getViewDocumentModalUrl(docId) {

var url = '<%= Page.ResolveClientUrl("~/MediaLibrary/Modals/ViewDocument.aspx") %>' + '?id=' + docId;

return url;

}

//On insert and update buttons click temporarily disables ajax to perform upload actions

//See http://demos.telerik.com/aspnet-ajax/controls/examples/integration/raduploadinajaxifiedgrid/defaultcs.aspx?product=upload

//for a more detailed description of why we need this.

function conditionalPostback(sender, eventArgs) {

var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");

if (eventArgs.get_eventTarget().match(theRegexp)) {

var upload = $find(window['UploadId']);

//AJAX is disabled only if file is selected for upload (i.e., new documents)

if (upload != null && upload.getFileInputs()[0].value != "") {

eventArgs.set_enableAjax(false);

}

function validateRadUpload(source, e) {

e.IsValid = false;

var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);

var inputs = upload.getFileInputs();

for (var i = 0; i < inputs.length; i++) {

//check for empty string or invalid extension

if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {

e.IsValid = true;

break;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

mediaList.onAddDocumentWindowClosed = function mediaList.onAddDocumentWindowClosed(sender, eventArgs) {

var returnValue = eventArgs.get_argument();

if (!Utils.WasRadWindowCancelled(returnValue, true)) {

__doPostBack('', '');

}

mediaList.openAddDocumentWindow = function mediaList_openAddDocumentWindow() {

Utils.OpenRadWindow

(

mediaList.get_AddDocumentModalUrl(),

600,

400,

mediaList.onAddDocumentWindowClosed

);

}

mediaList.openViewWindow = function mediaList_openViewWindow(docId) {

Utils.OpenRadWindow

(

mediaList.get_ViewDocumentModalUrl(docId),

600,

400

);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="conditionalPostback">

<asp:Panel ID="pnlMsg" runat="server">

<asp:Label ID="lblMsg" runat="server" Style="color: Red; font-weight: bold;" />

</asp:Panel>

<telerik:RadGrid ID="grdMediaLibrary" runat="server" Skin="Default" AutoGenerateColumns="false"

Width="100%" AllowPaging="true" PageSize="10" OnItemDataBound="grdMediaLibrary_ItemDataBound"

AllowAutomaticInserts="false" AllowAutomaticUpdates="false" OnEditCommand="grdMediaLibrary_Edit"

OnUpdateCommand="grdMediaLibrary_Update" OnInsertCommand="grdMediaLibrary_Insert"

OnItemCommand="grdMediaLibrary_ItemCommand" OnItemCreated="grdMediaLibrary_ItemCreated"

ShowStatusBar="true">

<PagerStyle Mode="NumericPages" AlwaysVisible="false" Position="Bottom" CssClass="Pager" />

<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="ID" DataKeyNames="ID">

<NoRecordsTemplate>

<asp:Label Text="No documents to display" runat="server" /></NoRecordsTemplate>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn UniqueName="MenuColumn">

<ItemTemplate>

<telerik:RadMenu ID="itemMenu" runat="server" CausesValidation="false">

<Items>

<telerik:RadMenuItem Value="topMenuItem" ImageUrl="~/Images/collapsed_toggleExpandHover.gif"

HoveredImageUrl="~/Images/collapsed_toggleExpandActive.gif" CssClass="SM_imageButton">

<Items>

<telerik:RadMenuItem Text="Archive" ImageUrl="~/Images/archive.jpg" />

<telerik:RadMenuItem Text="Recover From Archive" ImageUrl="~/Images/undo.png" />

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ID" Visible="false" ReadOnly="true" UniqueName="DocID" />

<telerik:GridTemplateColumn HeaderText="Document Name" UniqueName="DocName" ReadOnly="false">

<ItemTemplate>

<asp:Label ID="lblDocName" runat="server" Text='<%#Eval("Name") %>' />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadUpload ID="ruDocument" runat="server" MaxFileInputsCount="1" />

<asp:CustomValidator ID="cvDocument" runat="server" ClientValidationFunction="validateRadUpload"

ErrorMessage="Please select a file" Display="Dynamic" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Description" UniqueName="Description">

<ItemTemplate>

<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTextBox ID="txtDescription" runat="server" Text='<%# Bind("Description") %>'

Columns="50" Rows="5" TextMode="MultiLine" />

<des:RequiredTextValidator ID="rtvDescription" runat="server" ControlIDToEvaluate="txtDescription"

ErrorMessage="* Required" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="Date Created" DataField="CreatedDate" ReadOnly="true"

DataFormatString="{0:d}" />

<telerik:GridBoundColumn HeaderText="Operator" DataField="CreatedBy" ReadOnly="true" />

<telerik:GridImageColumn ImageUrl="~/Images/Tick.gif" HeaderText="Archived?" UniqueName="ArchivedColumn" />

<telerik:GridTemplateColumn ReadOnly="true" UniqueName="ViewColumn">

<ItemTemplate>

<asp:HyperLink ID="hypView" runat="server" Text="View" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn ButtonType="PushButton" />

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server" Skin="Default" />

<telerik:RadAjaxManagerProxy ID="ajaxProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdMediaLibrary" LoadingPanelID="loadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

Grid

answered on 25 Oct 2011

1 answer

307 views

RadGrid Performance with Large Data Set

I would like to bind a large data set to radgrid without the page freezing.

Virtual scrolling would be the ideal solution.

However, I will lose sorting capabilities with virtual scrolling.

What is the recommended solution?

Zhi

Grid

answered on 25 Oct 2011

1 answer

110 views

How to change the folder icon in radfile explorer

Hi,

I am using telerik 35 version. I need to change the folder icon in the treeview portion in a radfileexplorer programatically while the load time.
Please reply me with the appropriate lines of client side code .

Regards,
Praveen.

General Discussions

answered on 25 Oct 2011

3 answers

128 views

Readonly=true fields are FocusedStyle-BackColor is not set

Readonly = true fields are FocusedStyle-BackColor not set

<telerik:RadNumericTextBox ID="Amount" runat="server" Width="85px" ReadOnly="true"

FocusedStyle-BackColor="Lavender" MaxLength="8">

</telerik:RadNumericTextBox>

Thanks,
Mohamed.

Grid

answered on 25 Oct 2011

1 answer

101 views

Grid Height

<telerik:RadGrid ID="RG1" runat="server" AutoGenerateColumns="False"

CellSpacing="0" Width="540px">

<ClientSettings EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="True" />

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

</ClientSettings>

<MasterTableView GridLines="Both" Width="530" DataKeyNames="LCT_Code">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="LCT_Code"

FilterControlAltText="Filter column column" HeaderText="Code"

UniqueName="LCT_Code">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="80px" />

<ItemStyle Font-Bold="True" HorizontalAlign="Center" Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LCT_Desc"

FilterControlAltText="Filter column1 column" HeaderText="Description"

UniqueName="LCT_Desc">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="200px" />

<ItemStyle Font-Bold="True" HorizontalAlign="Left" Width="200px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LCT_WMLC"

FilterControlAltText="Filter column2 column" HeaderText="WMLC"

UniqueName="LCT_WMLC">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="80px" />

<ItemStyle Font-Bold="True" HorizontalAlign="Left" Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LCT_WLCM"

FilterControlAltText="Filter column3 column" HeaderText="WLCM"

UniqueName="LCT_WLCM">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="150px" />

<ItemStyle Font-Bold="True" HorizontalAlign="Left" Width="150px" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

I have a grid with only one row currently. As you can see in the attached image the height of the grid is far greater than the one row. How do I get the grid to only take up the needed space yet expand as required for new rows. I have no height field in the definition. Below is the grid definition.

Thanks,