Questions on UI for ASP.NET AJAX Forum

1 answer

152 views

Hello

I have attached to photos in this thread , i want to set my style in a way that , my tab looks like photo2,what ever I do i cant make it looks like photo2 ,i have attached my style ,please help me...

Thanks a lot

.RadTabStrip
{

   margin-top:3px;
   height:37px;
   float:right;
   margin-right:200px;
}
.RadTabStrip div
{
    float:right;
}

.RadTabStripTop_Default_rtl .rtsLevel .rtsLink
{
    padding-right:0 !important
}
.RadTabStrip .rtsUL, .RadTabStripVertical .rtsUL
{

}
.RadTabStrip_Default .rtsLI, .RadTabStrip_Default .rtsLink
{

}
.RadTabStrip .rtsLI .rtsLink
{

}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink
{
    color:#fff;
    background:url(../Images/Cool_Tab/tab-uselected-left.png) 10px 0 no-repeat;
    height:37px;
    font-family:Yekan,YekanNumbers,Tahoma;
    font-size:9pt;
    font-weight:normal;
    padding-left:53px;
    margin-left:0;

}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsOut
{
   background:url(../Images/Cool_Tab/tab-uselected-right.png) right 0px no-repeat;
    height:37px;
    padding-right:53px;


}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsIn
{
      background-image:url('../Images/Cool_Tab/tab-uselected.png');
height:37px;
   background-repeat:repeat-x;
   line-height:37px;
}
.RadTabStrip .rtsLevel1 rtsLI .rtsLink:hover
{
    color:Green;
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected
{
    padding-top: 0px;
   background: transparent url('../Images/Cool_Tab/tab-selected-left.png') 10px 0px no-repeat;
   line-height:40px;
   width:53px;

   z-index:2 !important

}
.RadTabStripTop_Default_rtl .rtsLevel .rtsLink
{
   /*padding-right:5px !important*/
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsOut
{
   background-image:url('../Images/Cool_Tab/tab-selected-right.png');
   background-position:right;
   background-repeat:no-repeat;
   height: 40px;
   color: #fff;
   font-family:Yekan,YekanNumbers,Tahoma;
   font-size:9pt;
   font-weight:normal;

}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsIn
{
background-image:url('../Images/Cool_Tab/tab-selected.png');
height:40px;
   background-repeat:repeat-x;
   color:#000

}

TabStrip

answered on 01 Jan 2015

1 answer

179 views

Cannot get EditFormItem in ItemCommand event procedure when trigger button has CommandName different the "Update"has

Hello,
I'm still using radgrid for asp.net (2007 edition).
I have many grids with edit form in user controls.
Usually I have on the user control (the edit form) two link buttons with command names "Update" and "Cancel".
I handle the command in an ItemCommand event procedure.
When those links are clicked I get in the event argument an item which is "EditFormItem".
I tried to add a third link with new commandname "Attach".
When the the event procedure is called after clicking the new link, I get an item of type "Item".
Can I use commandname which is not "Update", "Insert", "Cancel" and still get EditFormItem item?
If it's hardwired, what can I do to access the edit form when using a different commandname like "Attach"?

TIA
Gad

Grid

answered on 01 Jan 2015

1 answer

74 views

BatchEdit: Insert Item Display at bottom does not have same row order in mastertableview client

Hello,
     Its a simple question with some misunderstanding i-e if I set the property of InsertItemDisplay to bottom and iterate through the rows newly inserted they always show at top. This is normal scenario if InsertItemDisplay is at top but weird when New Item is inserted at bottom. It looks like this:

Display Order                      RowIndex (Client JS)
4 (new row)                                     1
3 (new row)                                     2
1 (old row)                                       3
2 (old row)                                       4

Please provide a solution.
Appreciate your help.

Grid

answered on 01 Jan 2015

1 answer

153 views

RADdatePicker in RadGrid Edit mode

Hi,

I have raddatepicker inside the radgrid edit template. And a a checkbox. Now, I want to hide/show datepicker on click of checkbox.

Can anyone please guide me on the same?

Thanks

Grid

answered on 01 Jan 2015

2 answers

230 views

[Solved] RadGrid Cancelling Export if Request is Too Large

I have a radgrid that may, at times, hold up to or over 30,000 rows. We also have custom paging in place on this radgrid. I've read several places that the radgrid is not meant to handle exporting such large amounts of data. I'm totally fine with this but, from a user point of view, I need a way to cancel such requests and display a message to the user. I'd like to either:

A) Set the exporting buttons on the radgrid to disabled but still show them when the records are over a certain amount.

Or

B) Stop the exporting event on the item command (or at any other point?) when records are over a certain amount and display a message to the user (this one is more favorable).

I have found that I can cancel the exporting by reacting to the client side event of the item command but the moment I add the client side event, even though it does absolutely nothing, the exporting no longer works. The application fires the item command event in the code behind and on the client side but never reaches the grid exporting event. It also never exports. Instead it merely returns the radgrid with the new page size and the removed filters and headers.

protected void RadGridInventory_ItemCommand(object sender, GridCommandEventArgs e)

{

               if (e.CommandName == RadGrid.ExportToExcelCommandName || e.CommandName == RadGrid.ExportToCsvCommandName)

{

RadGridInventory.PageSize = RadGridInventory.MasterTableView.VirtualItemCount;

}

if (e.CommandName == RadGrid.ExportToExcelCommandName)

{

var headerItem = (GridHeaderItem)RadGridInventory.MasterTableView.GetItems(GridItemType.Header)[0];

headerItem.Visible = true;

isExport = true;

}

if (e.CommandName == RadGrid.ExportToCsvCommandName)

{

RadGridInventory.MasterTableView.GetColumn("CSVAcountId").Display = true;

RadGridInventory.MasterTableView.GetColumn("AccountId").Display = false;

RadGridInventory.MasterTableView.GetColumn("CSVStatus").Display = true;

RadGridInventory.MasterTableView.GetColumn("Status").Display = false;

}

protected void RadGridInventory_GridExporting(object source, GridExportingArgs e)

{

if (e.ExportType == ExportType.Excel)

{

string customText = "<h1 style='text-align:center;'>Inventory Report for " + _applicationUser.Customer.Name + "</h1>";

customText += "<p style='text-align:center;'><b>Current Date:</b> " + DateTime.Now + "<br />";

if(RadDatePickerStarting.SelectedDate != null && RadDatePickerEnding.SelectedDate != null){

customText += "<b>Date Range Covered:</b> " + RadDatePickerStarting.SelectedDate + " - " + RadDatePickerEnding.SelectedDate + "<br />";

} else {

customText += "<b>Date Range Covered:</b> " + RadComboBoxChoices.SelectedItem.Text + "<br />";

}

customText += "<b>Clients:</b>";

foreach (var client in ClientSelector1.SelectedClients)

{

customText += " " + client.Name + ",";

}

customText = customText.TrimEnd(',');

customText += "</p>";

e.ExportOutput = e.ExportOutput.Replace("<body>", "<body>" + customText);

}

isExport = false;

}

<script type="text/javascript">

function onRequestStart(sender, args) {

if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||

args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {

args.set_enableAjax(false);

}

function onCommand(sender, args) {

}

</script>

Any advice or examples on how to achieve either of these outcomes would be greatly appreciated.

Grid

answered on 31 Dec 2014

3 answers

110 views

RadWizard in Sitefinity

Hi there,

I'm trying to use the RadWizard in a custom Widget for the latest Sitefinity version (7.3.5600).

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadWizard ID="RadWizard1" runat="server">
    <WizardSteps>
        <telerik:RadWizardStep ID="RadWizardStep1" Title="test" runat="server" StepType="Start">
        </telerik:RadWizardStep>
    </WizardSteps>
</telerik:RadWizard>

Unfortunatelly I get an error, that the type 'Telerik.Web.UI.RadWizardStepCollection' has no property named 'telerik:RadWizardStep'. I used this simple example as well as a more complex version from the demo site. Perhaps a special Sitefinity problem?

Thanks
Dieter

Wizard

answered on 31 Dec 2014

1 answer

143 views

Sorting working for all the columns except for one column

Hi
we have column 'log_message' . if i click that column header it has to be sorted but it is not happening. Instead it is navigated to error page.
I am unable to sort only the specified column( 'log_message' ) in the RadGrid but i can sort all other columns. Please find the code below which we are using

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="x.cs"
Inherits="x" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" runat="server">
<div class="outer_content">
<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CellSpacing="0" DataSourceID="dsx" GridLines="None"
PageSize="100" ShowGroupPanel="True" Skin="Metro">
<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True"
ReorderColumnsOnClient="True">
</ClientSettings>
<MasterTableView DataKeyNames="log_id" DataSourceID="x">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="log_id" DataType="System.Int32"
FilterControlAltText="Filter log_id column" HeaderText="log_id" ReadOnly="True"
SortExpression="log_id" UniqueName="log_id">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="log_time" DataType="System.DateTime"
FilterControlAltText="Filter log_time column" HeaderText="log_time"
SortExpression="log_time" UniqueName="log_time">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="log_type"
FilterControlAltText="Filter log_type column" HeaderText="log_type"
SortExpression="log_type" UniqueName="log_type">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="log_page"
FilterControlAltText="Filter log_page column" HeaderText="log_page"
SortExpression="log_page" UniqueName="log_page">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="log_message"
FilterControlAltText="Filter log_message column" HeaderText="log_message"
SortExpression="log_message" UniqueName="log_message">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="log_context"
FilterControlAltText="Filter log_context column" HeaderText="log_context"
SortExpression="log_context" UniqueName="log_context">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>
<asp:EntityDataSource ID="dsPtcHistoryReports" runat="server"
ConnectionString="name=PTCHistoryReportsEntities"
DefaultContainerName="PtcHistoryReportsEntities" EnableFlattening="False"
EntitySetName="ReportsWebLogs">
</asp:EntityDataSource>
</div>
</asp:Content>

PLease help me in this.

Grid

answered on 31 Dec 2014

1 answer

104 views

Javascript Error

Hello team,

We are having an asp:linkButton inside RadAjaxPanel.on click of asp:linkButton we are opening a radwindow that is having Radgrid inside it.

below are the RadAjaxManager settings:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="spanOutliersCount01">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgReportView" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
Note:spanOutliersCount01 is my linkButton and rgReportView is my Radgrid.

Please find attached screenshot for javascript error that we are getting.

Waiting for your response.

Thanks ,
Ruchi

Ajax

answered on 31 Dec 2014

3 answers

277 views

Export to Excel Missing Column Header Names

When I do the export to excel function its missing header name (first row in excel). I'm dynamically renaming these columns in the page load event. Could that be why?

TreeList

answered on 31 Dec 2014

1 answer

115 views

Url Action not evaluating record ID during Ajax load

I'm using the KendoUI Grid with nested detailed grids in a KendoUI Tab control. In one of the child grids I need to include a custom column as a link to a different page. I need to pass the current row ID as a querystring. The link is drawing but is creating the URL like this: https://localhost:44322/Admin/CompanyModuleAppRole?moduleID=undefined

The routing is working as expected and the controller is getting the request and drawing the new page. Here is the cshtml (line 150 is the problem)
Thanks for any help out there.

@using InnovareClinicianDesktop.Areas.Admin.ViewModels

@model InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyViewModelResults

@{

ViewBag.Title = "Details";

}

<h2>Manage records in the Company table.</h2>

<div id="example" class="k-content">

@RenderCompanyViewModel()

</div>

<h1>Other options:</h1>

@Html.ActionLink("Return to Application Management", "Index", "Home")

@helper RenderCompanyViewModel()

{

@(Html.Kendo().Grid<CompanyViewModel>(Model.CompanyViewModels)

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.CompanyName).Width(127);

columns.Bound(p => p.IsActive).Width(40);

columns.Bound(p => p.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.CreatedBy).Width(80);

columns.Bound(p => p.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.LastModifiedBy).Width(80);

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(160);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable()

.ClientDetailTemplateId("template")

.Resizable(resize => resize.Columns(true))

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

.HtmlAttributes(new { style = "height:530px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

.Model(model => { model.Id(p => p.CompanyID); model.Field(p => p.CompanyID).DefaultValue(System.Guid.Empty); })

.Create(create => create.Action("EditingPopup_Create", "Company", new { area = "Admin" }))

.Read(read => read.Action("EditingPopup_Read", "Company", new { area = "Admin" }))

.Update(update => update.Action("EditingPopup_Update", "Company", new { area = "Admin" }))

.Destroy(update => update.Action("EditingPopup_Destroy", "Company", new { area = "Admin" }))

)

}

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().TabStrip()

.Name("tabStrip_#=CompanyID#")

.SelectedIndex(0)

.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))

.Items(items =>

{

items.Add().Text("Users").Content(@<text>

@(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.ApplicationObjectViewModel>()

.Name("applicationObject_#=CompanyID#")

.Columns(columns =>

{

columns.Bound(u => u.ObjectID).Title("ID").Width(56);

columns.Bound(u => u.ObjectName).Width(110);

columns.Bound(u => u.ObjectType).Width(30);

columns.Bound(u => u.FirstName).Width(190);

columns.Bound(u => u.LastName).Width(40);

columns.Bound(u => u.EmailAddress).Width(160);

columns.Bound(u => u.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(u => u.CreatedBy).Width(160);

})

.ToolBar(toolbar =>

{

toolbar.Custom().Text("Manage Users").Name("manageApplications").Action("Index", "ApplicationObject", new { companyID = "#=CompanyID#" });

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable()

.Resizable(resize => resize.Columns(true))

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(u => u.Action("ToolbarTemplate_ApplicationObjects", "Company", new { companyID = "#=CompanyID#" }))

)

.ToClientTemplate())

</text>

);

items.Add().Text("Applications").Content(@<text>

@(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyApplicationViewModel>()

.Name("companyApplication_#=CompanyID#")

.Columns(columns =>

{

columns.Bound(a => a.CompanyApplicationID).Title("ID").Width(56);

columns.Bound(a => a.ApplicationID).Width(110);

columns.Bound(a => a.IsActive).Width(30);

columns.Bound(a => a.CreatedBy).Width(160);

columns.Bound(a => a.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(a => a.LastModifiedBy).Width(160);

columns.Bound(a => a.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");

})

.ToolBar(toolbar =>

{

toolbar.Custom().Text("Manage Applications").Name("manageApplications").Action("Index", "CompanyApplication", new { companyID = "#=CompanyID#" });

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable()

.Resizable(resize => resize.Columns(true))

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(a => a.Action("ToolbarTemplate_CompanyApplications", "Company", new { companyID = "#=CompanyID#" }))

)

.ToClientTemplate())

</text>

);

items.Add().Text("Modules").Content(@<text>

@(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyModuleViewModel>()

.Name("companyModule_#=CompanyID#")

.Columns(columns =>

{

columns.Bound(m => m.CompanyModuleID).Title("ID").Width(56);

columns.Bound(m => m.IsActive).Width(30);

columns.Bound(m => m.CreatedBy).Width(160);

columns.Bound(m => m.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(m => m.LastModifiedBy).Width(160);

columns.Bound(m => m.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");

columns.Bound(m => m.ModuleID).ClientTemplate("<a href='" + Url.Action("Index", "CompanyModuleAppRole") + "?moduleID=" + "#= item.MethodID #" + "'>Manage Roles</a>").Width(100);

})

.ToolBar(toolbar =>

{

toolbar.Custom().Text("Manage Modules").Name("manageModules").Action("Index", "CompanyModule", new { companyID = "#=CompanyID#" });

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable()

.Resizable(resize => resize.Columns(true))

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(m => m.Action("ToolbarTemplate_CompanyModules", "Company", new { companyID = "#=CompanyID#" }))

)

.ToClientTemplate())

</text>

);

})

.ToClientTemplate())

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function onComplete(e) {

if (e.name == "Delete") {

var result = e.response.result;

if (result == true)

$("#Items").data("tGrid").rebind();

else {

alert("Error on deleting")

}

</script>

Grid

answered on 31 Dec 2014