Questions on UI for ASP.NET AJAX Forum

1 answer

256 views

Trigger jquery event after ajax in user control

Hi,
in few words the problem is:
when i am trying to use $.event.trigger after an ajax request made with RadAjaxManager I am not able to catch the fired event in user controls.
If i put the event handler in default.aspx there is no problem and the event is "catch" but in user control the hndler is never fired...

Here my code, any suggestions? Thank you in advance...

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>

<!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></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

function onResponseEnd(sender, eventArgs) {

console.log("response end");

$.event.trigger({

type: "myEvent",

message: "event",

time: new Date()

});

}

</script>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ClientEvents OnResponseEnd="onResponseEnd"></ClientEvents>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ButtonAddItem">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListViewClips" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadButton ID="ButtonAddItem" runat="server" Text="Add item" OnClick="OnRadButtonClick"></telerik:RadButton>

<telerik:RadListView ID="RadListViewClips" AllowPaging="True" runat="server" Visible="True" OnNeedDataSource="RadListViewClipsOnNeedDataSource"

allowsorting="true" ItemPlaceholderID="placeHolder" DataKeyNames="Id">

<%-- <ClientSettings>

<ClientEvents OnListViewCreated="test"></ClientEvents>

</ClientSettings>--%>

<LayoutTemplate

<div id="placeHolder" runat="server">

<ul></ul>

</div>

</LayoutTemplate>

<ItemTemplate>

<li>

<%# Eval("Name") %><uc1:WebUserControl1 runat="server" id="WebUserControl1" />

</li>

</ItemTemplate>

</telerik:RadListView>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

private List<ItemState> CurrentDockStates

{

get

{

//Store the info about the added docks in the session. For real life

// applications we recommend using database or other storage medium

// for persisting this information.

List<ItemState> currentDockStates = (List<ItemState>)Session["CurrentDockStatesMyPortal"];

if (Equals(currentDockStates, null))

{

currentDockStates = new List<ItemState>();

Session["CurrentDockStatesMyPortal"] = currentDockStates;

}

return currentDockStates;

}

set { Session["CurrentDockStatesMyPortal"] = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

RadListViewClips.DataSource = CurrentDockStates;

RadListViewClips.DataBind();

}

protected void RadListViewClipsOnNeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)

{

RecreateItems();

}

private void RecreateItems()

{

var source = CurrentDockStates;

RadListViewClips.DataSource = source;

}

protected void OnRadButtonClick(object sender, EventArgs e)

{

CurrentDockStates.Add(new ItemState

{

Name = "Prova",

Id = CurrentDockStates.Count

});

RadListViewClips.Rebind();

}

internal class ItemState

{

public string Name { get; set; }

public int Id { get; set; }

}

WebControl.ascx --- Here function myEventHandler is never Fired!!!

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="TelerikWebApp1.WebUserControl1" %>

<script>

$(document).on("myEvent", myEventHandler);

function myEventHandler(e) {

console.log("myEvent on: usercontrol");

}

</script>

Ajax

answered on 17 Mar 2015

1 answer

65 views

Rad Grid Filtering is not working for '<' and '>' symobols

Hi,

I have Shown the filter icon in the UI so that user can select their preferred filter condition and filter RadGrid. Rad grid filter is working perfectly for me But it is not working for '<' and '>' symbols. After giving these symbols when i hit 'ENTER', text box is flushed out and nothing happens with the grid. I have two columns which has these symbols so i need filter option to work for these columns.

Please suggest the ways by which i can achieve it.

Thanks
Abhishek

Grid

answered on 17 Mar 2015

4 answers

217 views

GridDateTimeColumn Required field validator not firing in batch edit mode

Hi,

I'm currently trying to implementing a rad grid with in line batch editing.

I have a GridDateTimeColumn with an associated RequiredFieldValidator

If I leave the datepicker empty and select to add a new row to the table the validator is not firing as expected. Therefore I am incorrectly able to add multiple rows with no date entered
Note that required field validators on other columns are firing correctly in this instance. it only appears to be an issue with the date picker

If however I enter a date in the date picker, and then remove it, the validator is firing and I cannot add a new row (as expected)
Further to this if I re-enter the date, select to add a new row and then try to add an additional row without entering a date then the validator is firing in this scenario

Have you any advice on how the required field validator should be implemented to fire when adding a new row??

below is my column definition

<telerik:GridDateTimeColumn DataField="Date" HeaderStyle-Width="135px" HeaderText="Date" ColumnEditorID="dateEditor"

SortExpression="Date" UniqueName="Date" PickerType="DatePicker" >

<ColumnValidationSettings EnableRequiredFieldValidation="True" >

<RequiredFieldValidator ForeColor="Red" ErrorMessage="This field is required" ID="reqDateVal" ></RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDateTimeColumn>

Grid

answered on 17 Mar 2015

6 answers

525 views

RadComboBox TextChanged event fires on button click

I have a problem with the OnTextChanged event of the RadComboBox. The combobox looks like this:

<telerik:RadComboBox ID="RadCB" runat="server" Width="130px" AutoPostBack="true" OnTextChanged="RadCB_TextChanged" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Localization-CheckAllString="(All)" EmptyMessage="Select" CheckedItemsTexts="FitInInput" DropDownWidth="210px" MaxHeight="400px">
</telerik:RadComboBox>

It has some default values selected on page load. Then I change the values of a different combobox and click the search button.

Somehow the OnTextChanged event of the combobox above is fired even though the text and the selected values have NOT changed, which causes the values of the second combobox to be changed again. Is this the designed behavior?

Ajax is enabled on the page and both comboboxes are in the AjaxControls of the button.

Any help will be appreciated.

ComboBox

answered on 17 Mar 2015

1 answer

151 views

RadGrid width problem in Bootstrap

hello all!
i have rad grid with 14 columns

on low resulution i want to show it in normal mode so user can read

here is my grid config in untitled.png

when i set mastertable to tablelayout to fixed

it not shows right check grid.png

how to fix this problem?? i want to minimize grid or columns or spacing

regards R01

Grid

answered on 17 Mar 2015

1 answer

102 views

How to remove extra column above the radGrid header

Please help me to remove extra column kind of thing from radgrid.
find the attachment.

Grid

answered on 17 Mar 2015

4 answers

1.1K+ views

How to merge to columns in Radgrid with same Header

Hi,

I am creating a radgrid dynamically and in that grid i have two columns whit same name and now i want to merge that column in one column and i want to merge cells as well.

Please check attachment for detail.

Please help urgently.

Grid

answered on 17 Mar 2015

1 answer

89 views

Sum of Sum columns in Grid

I have kendo grid as follows
    <script>
            $(document).ready(function () {
                $.support.cors = true;

                var url = "url";

                $("#grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: url
                        },
                        schema: {
                            model: {
                                fields: {
                                    ResourceName: { type: "string" },
                                    ProjectName: { type: "string" },
                                    WeekOneUtilization: { type: "number" },
                                    WeekTwoUtilization: { type: "number" },
                                    WeekThreeUtilization: { type: "number" },
                                    WeekFourUtilization: { type: "number" },
                                }
                            }
                        },
                        group: {
                            field: "ResourceName",
                            aggregates: [
                               { field: "WeekOneUtilization", aggregate: "sum" },
                                { field: "WeekTwoUtilization", aggregate: "sum" },
                                 { field: "WeekThreeUtilization", aggregate: "sum" },
                                  { field: "WeekFourUtilization", aggregate: "sum" }
                            ]
                        },
                        aggregate: [{ field: "ProjectName", aggregate: "count" },
                                    { field: "WeekOneUtilization", aggregate: "sum" },
                                { field: "WeekTwoUtilization", aggregate: "sum" },
                                 { field: "WeekThreeUtilization", aggregate: "sum" },
                                  { field: "WeekFourUtilization", aggregate: "sum" }]
                    },
                    height: '100%',
                    width: 500,
                    columns:
                        [
                            {
                                field: "ResourceName",
                                title: "Resource Name",
                                width: 225
                            },
                        {
                            field: "ProjectName",
                            title: "Project Name",
                            width: 100
                        },
                            {
                                field: "WeekOneUtilization",
                                title: "@weekOneDisplayName",
                                width: 100,
                                aggregates: ["sum"],
                                //footerTemplate: "Total Utilization: #=sum#",
                                groupFooterTemplate: "Individual Utilization: #=sum#"
                            },
                              {
                                  field: "WeekTwoUtilization",
                                  title: "@weekTwoDisplayName",
                                  width: 100,
                                  aggregates: ["sum"],
                                  //footerTemplate: "Total Utilization: #=sum#",
                                  groupFooterTemplate: "Individual Utilization: #=sum#"
                              },
                                {
                                    field: "WeekThreeUtilization",
                                    title: "@weekThreeDisplayName",
                                    width: 100,
                                    aggregates: ["sum"],
                                    //footerTemplate: "Total Utilization: #=sum#",
                                    groupFooterTemplate: "Individual Utilization: #=sum#"
                                },
                                  {
                                      field: "WeekFourUtilization",
                                      title: "@weekFourDisplayName",
                                      width: 100,
                                      aggregates: ["sum"],
                                      //footerTemplate: "Total Utilization: #=sum#",
                                      groupFooterTemplate: "Individual Utilization: #=sum#"
                                  },
                        ]
                });

            });
        </script>

I want to add new column to the group footer with the sum of all four week sum. How can I achieve that in kendo grid

Grid

answered on 17 Mar 2015

1 answer

175 views

Expand all items on page load

Anyone,
I am using a RadGrid that contains one DetailTable as in the below code. I am binding the datasource for the grid in the NeedDataSource Event (need to do this way). I need to Expand all the items to show up the details table, on the page load (first time load); i am not sure when to expand the items. I tried doing it on the NeedDataSource event, but it doesn't work.

Please note: I have a asp button on the page for collapsing all the grid items. So i am unable to use the PreRender event as well.

Can someone please suggest how do i go about this scenario?

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

AllowSorting="False" AllowMultiRowSelection="False" AllowPaging="False" OnNeedDataSource="RadGrid1_NeedDataSource"

OnDetailTableDataBind="RadGrid1_DetailTableDataBind" Skin="Default">

<MasterTableView DataKeyNames="col1" ExpandCollapseColumn-ButtonType="PushButton">

<DetailTables>

<telerik:GridTableView Name="detailGrid" Width="95%" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center">

<Columns>

<telerik:GridBoundColumn HeaderText="col1" HeaderButtonType="TextButton" DataField="col1" />

<telerik:GridBoundColumn HeaderText="col2" HeaderButtonType="TextButton" DataField="col2" />

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

.....

Grid

answered on 16 Mar 2015

1 answer

63 views

ASP.NET Reference dynamically created control back in server aspx.cs server code

And my endless problems from server created controls continue.

I have users that are in different groups and each group has different user information. I am creating a page to manage users in a group using a Telerik RadGrid. Because of the unknown nature of the grid columns I am creating the grid on completely on the server. You cannot have a grid defined in the aspx page and add columns in the server aspx.cs code, all kinds of things break like sorting, filters and extra text added. The grid works fine.

A feature I need is to output excel files with the grid's data. The problem, how do I reference the grid in server calls backs. If you look at Grid Export To Excel there is a button callback that changes grid values on the server and initiates the excel export on the grid control in ImageButton_Click. In my case RadGrid1 is created in the server in the Page_Init and added to an asp:PlaceHolder.

Is there any way to reference a server added control back in the server aspx.cs code. Putting the control id will not compile.

I am going to want deal with Row Selected values which will also need server intervention dealing with the selected rows.

Thanks,
George

Grid

answered on 16 Mar 2015