Questions on UI for ASP.NET AJAX Forum

4 answers

74 views

I'm posting this for future reference and for general discussion.

In my implementation, I'm using ITemplate for custom GridItemTemplateColumns and assigning Javascript Method Names to the ClientEvents of Rad<Controls> that are "InitiatedIn" (ITemplate Implementation Method) my RadGrid, additionally, I've assigned DataKeys & ClientDataKeys in the page markup of the RadGrid Control.

The concept is thus to get the ClientDataKeys from the Telerik.Web.UI.GridDataItem (Client-Side) using the eventArg passed to it. I successfully did this, but discovered that the eventArg is mutable, which was unexpected.

Here is a partial example to follow on:

01.//C# (MyCustomGridItemTemplateColumn.cs file)

02.public class MyCustomGridItemTemplateColumn : ITemplate

03. {

04. public event RadComboBoxSelectedIndexChangedEventHandler OnMyControlSelectedIndexChanged;

05.

06. public string ClientHandlerMethod = "MyLibrary.UI.MyControl.OnMyControlChanging";

07. public string ColumnName { get; private set; }

08.

09. public MyCustomGridItemTemplateColumn(string ColumnName)

10. {

11. this.ColumnName = ColumnName;

12. this.OnMyControlSelectedIndexChanged += MyControlGridItemTemplateColumn_OnMyControlSelectedIndexChanged;

13. }

14.

15. //Exposes the event to be handled on the codebehind

16. void MyControlGridItemTemplateColumn_OnMyControlSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e) {}

17.

18. public void InstantiateIn(Control container)

19. {

20. RadComboBox cbMyControl = new RadComboBox();

21. cbMyControl.ID = "cbMyControl_" + ColumnName;

22. cbMyControl.DataBinding += cbMyControl_DataBinding;

23. cbMyControl.SelectedIndexChanged += cbMyControl_SelectedIndexChanged;

24. cbMyControl.OnClientSelectedIndexChanging = @"function(sender, e){e._cancel = true;console.log('MyControl [IndexChanging] => %o %o', sender, e);}";

25. cbMyControl.OnClientSelectedIndexChanged = @"function(sender, e){console.log('MyControl [IndexChanged] => %o %o',sender, e);}";

26. cbMyControl.EnableViewState = false;

27. container.Controls.Add(cbMyControl);

28. }

29.

30. void cbMyControl_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

31. {

32. this.OnMyControlSelectedIndexChanged(sender, e);

33. }

34.

35. void cbMyControl_DataBinding(object sender, EventArgs e)

36. {

37. RadComboBox cbMyControl = (RadComboBox)sender;

38. //GridDataItem container = (GridDataItem)cbMyControl.NamingContainer;

39. //MyClassObjectModel model = (MyClassObjectModel)container.DataItem;

40.

41. cbMyControl.Items.Add(new RadComboBoxItem("Please Select", "NotSet"));

42. cbMyControl.Items.Add(new RadComboBoxItem("First Choice", "1019q231"));

43. cbMyControl.Items.Add(new RadComboBoxItem("Second Choice", "21vc3131"));

44. cbMyControl.Items.Add(new RadComboBoxItem("Third Choice", "34Af3343"));

45.

46. cbMyControl.OnClientSelectedIndexChanging = String.Format(@"function(sender, e){{ e._cancel = !({0}(sender, e));{1}}}",

47. ClientHandlerMethod,

48. @" console.log(""MyControl [IndexChanging] %o %o "", sender, e);"

49. );

50. }

51.}

Now my library Example

01./* JS - Handler.js file */

02.(function(window){

03.window.MyLibrary = {

04. "UI" : {

05. "MyControl" : {

06. "OnMyControlChanging" : function (sender, e) {

07. var

arg = MyLibrary.Common.GetDataKeyValues(e); }

08. }

09. },

10. "Common" : {

11. "GetDataKeyValues" : function(e) {

12. var max = 4;

13. var iteration = 0;

14.

15. var result = {

16. "FirstKeyID": {},

17. "SecondKeyID": {},

18. "ThirdKeyID": {}

19. };

20.

21. var gridTableView = e.get_item();

22. iteration = 0;

23. while (!(gridTableView instanceof Telerik.Web.UI.GridTableView) && !(iteration >= max)) {

24. gridTableView = gridTableView.get_parent() || gridTableView; //null check on get_parent()

25. iteration += 1;

26. }

27.

28. gridTableView.get_dataItems(); //e has now been mutated; the results of this method call do not matter

29.

30. var gridDataItem = e.get_item();

31. iteration = 0;

32. while (!(gridDataItem instanceof Telerik.Web.UI.GridDataItem) && !(iteration >= max)) {

33. gridDataItem = gridDataItem.get_parent() || gridDataItem; //null check on get_parent()

34. iteration += 1;

35. }

36.

37. result.FirstKeyID = gridDataItem.GetDataKeyValue("FirstKeyID");

38. result.SecondKeyID = gridDataItem.GetDataKeyValue("SecondKeyID");

39. result.ThirdKeyID = gridDataItem.GetDataKeyValue("ThirdKeyID");

40.

41. return result;

42. }

43. }

44.};

45.}(window));

Grid

answered on 18 Nov 2014

1 answer

105 views

Broken Tools in Inline Mode at 100% Width

Can anyone reproduce this? The editing tools are all out of whack when I set inline mode and make the width 100%. I'm using it inside a Layout

<telerik:LayoutRow>

<Columns>

<telerik:LayoutColumn Span="12" SpanXs="12" SpanSm="12">

<div style="background-color: #EEEEEE; margin-top: 10px;">

<telerik:RadEditor ID="RadEditor1" runat="server" EditType="Inline" Width="100%" Enabled="True">

<Content>

<div>

<h2 class="titleText">RadEditor for ASP.NET AJAX</h2>

<p style="text-align: justify;">

<span style="color: #4f6128; font-size: 19px;"><strong>RadEditor</strong></span><span style="color: #4f6128;">

</span>is not simply an HTML

<a href="#HTMLDescription">

<sup>1</sup>

</a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in

<a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>.

</p>

</div>

</Content>

</telerik:RadEditor>

</div>

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

Editor

answered on 18 Nov 2014

17 answers

347 views

NestedViewTemplate Disabling Postbacks

I have a radgrid with a NestedViewTemplate which contains a custom user control, which contains another grid.

I have turned off all click events on the nested grid, but still when I click anywhere on the nested grid, it still runs the grd_Init and reinitializes everything.

I want it to just sit there and do absolutely nothing if someone clicks the child grid. My NestedView is setup like so. Keep in mind, I do all my databinding and initialization and everything else in the code behind.

    
            <telerik:RadGrid ID="grdComponent" runat="server">  
        
                     <MasterTableView GroupLoadMode="Server">  
        
                           <NestedViewTemplate> 
        
                               <uc:ReviewerGrid ID="ReviewerGrid" runat="server" ReviewId='<%# Eval("ReviewId") %>' /> 
        
                           </NestedViewTemplate> 
        
                        <DetailTables> 
        
                        </DetailTables> 
        
                       </MasterTableView> 
        
            </telerik:RadGrid>

For my child grid, I specifically set these commands on my grid init, so I thought this should take care of any clicks, but it doesn't.

    
                        With grdReviewer  
        
                            .ClientSettings.EnablePostBackOnRowClick = False 
        
                            .AllowSorting = False 
        
                            .ClientSettings.Selecting.AllowRowSelect = False 
        
                        End With

I still need the parent row to have the click event, just not the embedded grid.

Any ideas?

thanks.

Grid

answered on 18 Nov 2014

6 answers

181 views

RadTooltip ignores content if target hyperlink has title

I am using a RadTooltip instance to display some text and I am adding my content server-side to the tooltip's Controls collection. I set the TargetControlID property to a hyperlink. The tooltip ShowEvent is set to OnClick.

If the target hyperlink has its ToolTip property set, then the tooltip uses that text as its content and ignores the content I added via the Controls collection.

If the target hyperlink does not have its ToolTip property set, then the content is correctly displayed.

Is there something I need to do to override this behavior or is this a known bug?

I want the target hyperlink ToolTip/title text displayed when the user mouses over the link, and the rich content (RadTooltip.Controls) to be displayed when the user clicks the link.

ToolTip

answered on 18 Nov 2014

10 answers

514 views

RadButton and ASP.NET 4.5 Unobtrusive Validation

Usually when the RadButton is used for submitting a form, the page also contains validation controls that check the entered data. The following sample presents such a setup:

<asp:ScriptManager ID="Scriptmanager1" runat="server" />

<asp:TextBox ID="Textbox1" runat="server" />

<telerik:RadButton ID="RadButton1" runat="server" Text="Submit" />

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ErrorMessage="Enter a value in the input"

ControlToValidate="Textbox1" />

If you place this markup in an ASP.NET 4.5 website and run it, you will encounter the following exception:

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

According to Microsoft, Unobtrusive Validation is the new way ASP.NET validation works and by default it requires jQuery. The following approach will help you register the jQuery that is shipped with the RadControls for ASP.NET AJAX so that it can be used by the Unobtrusive Validation feature:

Add a Global.asax file.
Put the following code in the Application_Start event handler:

var def = new ScriptResourceDefinition()

{

ResourceName = "Telerik.Web.UI.Common.jQuery.js",

ResourceAssembly = System.Reflection.Assembly.GetAssembly(typeof(Telerik.Web.UI.RadWebControl))

};

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", def);

NOTE: In order for Unobtrusive Validation to work, the default ASP ScriptManager needs to be instructed to register jQuery before the core scripts that provide client-side validation : http://connect.microsoft.com/VisualStudio/feedback/details/748064/unobtrusive-validation-breaks-with-a-script-manager-on-the-page.

Button

answered on 18 Nov 2014

3 answers

1.0K+ views

Edit only single cell in telerik rad grid

Hello Sir/Madam,

Currently i am using telerik rad grid in my project and my requirement is when i click on cell in telerik rad grid only that cell should be editable, no other cell should be in editable mode. here is my screen shot, in this screen shot i want to edit Vendordescription column in rad grid. so please help me asap..

Thanx in advance...

and here is my code:

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

AllowSorting="True" CellSpacing="0" GridLines="None"

oneditcommand="Grid_PurchaseOrder_Lines_EditCommand">

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="375px" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="false" DataKeyNames="CompanyId, LineDesc,ID">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

UniqueName="Edit" HeaderStyle-HorizontalAlign="Center"

HeaderStyle-VerticalAlign="Middle">

<ItemTemplate>

<asp:Button ID="edit" runat="server" CommandName="Edit" />

<asp:Button ID="Cancel" runat="server" CommandName="Cancel" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Company" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# Eval("CompanyName")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="" HeaderText="Vendor Description"

UniqueName="TemplateColumn1" ReadOnly="false">

<HeaderStyle Width="70px" />

<ItemTemplate>

<%#Eval("vendordescription")%>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="TextBox1" runat="server"

Text='<%# Eval("vendordescription") %>'></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Component" UniqueName="TemplateColumn1" ReadOnly="true">

<HeaderStyle Width="80px" />

<ItemTemplate>

<%# Eval("LineDesc")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Size" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# Eval("LineSize")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Material/ Caliper" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# Eval("LineMatl")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Deco" UniqueName="TemplateColumn1" ReadOnly="true">

<HeaderStyle Width="70px" />

<ItemTemplate>

<%# Eval("LineDeco")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Coating/ Finish" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# Eval("LineFinish")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Quantity" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:n0}", Eval("LineQty"))%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Unit Price" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:C3}",Eval("UnitPrice"))%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Line Total" UniqueName="TemplateColumn1" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:C3}",Eval("LineTotal"))%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

UniqueName="TemplateColumn1" HeaderText="Sale Quantity" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:n0}", Eval("SaleQty"))%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn6 column"

UniqueName="TemplateColumn6" HeaderText="Sale Price" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:C}",Eval("SellPrice")) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn6 column"

UniqueName="TemplateColumn6" HeaderText="Sale Total" ReadOnly="true">

<ItemTemplate>

<%# String.Format("{0:C}", Eval("SaleTotal")) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

Grid

answered on 18 Nov 2014

2 answers

86 views

Hierarchical RadGrid + NestedViewTemplate + RadGrid

Hi there,

I apologize in advance if there is already a solution to this problem, but I've been searching all morning.

I have a Hierarchical Rad Grid that uses a NestedViewTemplate. I use an ObjectDataSource for the parent grid that provides the columns 'CreatedBy' and 'CreatedOn' (string and datetime, respectively).

I'd like to display these values in the child RadGrid without having to make a separate call to the database.

How do I access these values from a nested RadGrid? Outside of the RadGrid, the standard Eval("CreatedBy") works.

Thanks,
Dustin

Grid

answered on 18 Nov 2014

3 answers

355 views

Integration with DNN

Hallo,
DNN (formerly Dot Net Nuke) come shipped with a special modified version of your dll, plus has its own wrappers around Telerik control.
What I would like is being able to buy the complete, full and up to date version of your Ajax suite and use it in my DNN modules.
Now the problem I'm facing is this... since the Telerik dlls are already in the DNN bin folder, but they are modified versions, and so the namespace is already there as well, how can I let live the "commercial full" dlls I will buy for my modules together with DNN ones?

Another commercial question is this. I will make those modules for some of my customers, so they are very customized and not intended for reselling BUT would I be allowed to resell modules built upon the commercial licensed Ajax Suite?

The most important point for me is the first, how to have the DNN custom and official Telerik dlls (+ Namespaces) live together... I looked around for some resurces like the "external" statement (only available in C# I guess but I'm coding in VB.NET at the moment) but I don't know if this is the way to follow.

Thanks in advance

General Discussions

answered on 18 Nov 2014

9 answers

826 views

RadAsyncUpload in SharePoint 2010

Hi,

I am trying to use RadAsyncUpload control in SharePoint but so far I am having no luck.

First of all, I have to say that I have found very little documentation to help me on this. I am currently stuck at a point where I keep getting the following error when I select a file:

Error: Unhandled Error in Silverlight Application Failed to Invoke: _onSilverlightError.   at System.Windows.Browser.ScriptObject.Invoke(String name, Object[] args)
   at UploadPrototype.EventManager.SilverlightError(String message, Int32 index)
   at UploadPrototype.MainPage.<>c__DisplayClass1f.<ProcessResponse>b__18()

I have uploaded a screenshot that shows where exactly the error is thrown in ure JS. I have also uploaded a screen shot that shows the UI.

Can you please clarify what I need to do to get this to work in SharePoint 2010? What changes do I need to make to the Web.Config?

Thanks

AsyncUpload

answered on 18 Nov 2014

1 answer

36 views

Require add one comment section other than appointment

Hi Team,

I want to give a option to add comment section on scheduler context menu, the appointment section will remain same. So this will show one comment for entire Day. For example we are booking appointment but doctor say I am not available or leave any message so while booking appointment user can read and work accordingly.

Please help me how we can achieve this.

Thanks
Dheeraj Swami

Scheduler

answered on 18 Nov 2014