Telerik Forums
UI for ASP.NET AJAX Forum
2 answers
174 views
Hey everyone,

It seems that the R.A.D TreeList currently doesn't have a row drag and drop operation. I have knocked up a demo of how to do it using simple form elements and jQuery. Feel free to use this until Telerik implement their own method.

Firstly, add this HTML anywhere on your page:

<div id='paddingBox'>
    <div id='moveBox'>
    </div>
</div>

Next, add this CSS to the page:

<style type='text/css'>
    #moveBox {
        position: fixed;
        background-color: Blue;/*Or whatever*/
        filter: alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
    #paddingBox  {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background-color: White;
        height: 100%;
        filter: alpha(opacity=1);
        opacity: 0.01;
        -moz-opacity: 0.01;
    }
</style>


Finally, you need to hook up your RadTreeList with the ItemCreated client event:

function RadTreeList1_ItemCreated(sender, args) {
    var item = args.get_item();
    var elem = item.get_element();
 
    var rowDrop = function(dropped, onto) {
        /*Do something with the two rows here.*/
    }
 
    $(elem).mousedown(function(e) {
        var mde = e ? e : event;
        if (!e.srcElement.id.endsWith("ExpandCollapseButton")) {
            var items = sender.get_dataItems();
            var hoveredItem = null;
 
            $("#paddingBox").show();
            $("#moveBox").css({
                left: mde.clientX - mde.offsetX,
                top: mde.clientY - mde.offsetY,
                width: elem.clientWidth, height: elem.clientHeight
            });
            $(document).mousemove(function(e) {
                var mme = e ? e : event;
                $("#moveBox").css({
                    left: mme.clientX - mde.offsetX,
                    top: mme.clientY - mde.offsetY
                });
 
                for (var i = 0; i < items.length; i++) {
                    var delem = items[i].get_element();
                    if (delem != elem) {
                        var offset = $(delem).offset();
                        var left = offset.left;
                        var right = left + $(delem).width();
                        var top = offset.top;
                        var bottom = top + $(delem).height();
 
                        if (mme.clientX > left && mme.clientX < right &&
                            mme.clientY > top && mme.clientY < bottom) {
                            $(delem).css({
                                "background-color": "#29DC4F", /*Or whatever*/
                                "filter": "alpha(opacity=50)",
                                "opacity": "0.5"
                            });
                            hoveredItem = delem;
                        }
                        else {
                            if (hoveredItem == delem) {
                                hoveredItem = null;
                            }
                            $(delem).css({
                                "background-color": "",
                                "filter": "",
                                "opacity": ""
                            });
                        }
                    }
                }
            });
            $(document).mouseup(function() {
                $("#paddingBox").hide();
                $(document).unbind("mousemove");
                if (hoveredItem) {
                    rowDrop(elem, hoveredItem);
                }
            });
        }
    });
}

Hope this helps, or at least provides a starting point for you.
Peter
Top achievements
Rank 1
 answered on 28 Nov 2010
2 answers
105 views
Hello,

i am using advancedinserttemplate and advancededittemplate with no modal popup.
When i put a treeview with linq2sql datasource in my advancedinserttemplate, it doesnt show up.
When i remove it, it shows up???

I have no idea where to start to find out why and how it comes. Any idea?
Since 2 weeks, i'm trying to find a solution to this problem and i really need it, before we decide or not to go ahead with rad scheduler or something else.

So please, any help would be really helpful. I already opened a ticket since friday but im still waiting for an answer.

Thank you in advance!
Lucien
Lucien
Top achievements
Rank 2
 answered on 28 Nov 2010
2 answers
111 views
Hi All,

I'm trying out the Client side insert/update/delete sample for RadGrid and am banging my head on a wall trying to figure this out.

In a nutshell when I make the AJAX call to the server I get this Message:

Microsoft JScript runtime error: Function expected


I have the web service setup, and put the service reference in the ASPX page in a telerik handler.  And I understand there is a callback function involved to repaint the grid, but I never get the callback.

Incidentally the web service is being invoked and the database is updated.

Any and all advice is greatly appreciated!


<

 

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

 

 

<script type="text/javascript">

 

 

function updateChanges()

 

{

ProductUpdate.AddProductLineItem(15705, 32608, 2, 1, 1, 1, 1, updateGrid);

 

}

 

 

function updateGrid(result)

 

{

 

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

 

 

 

 

var grid = $find("<%= RadGrid1.ClientID %>");

 

grid.repaint();

}

 

 

</script>

 

</

 

telerik:RadCodeBlock>


 

<

 

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

 

 

<Services>

 

 

<asp:ServiceReference Path="ProductUpdate.asmx" />

 

 

</Services>

 

 

</telerik:RadScriptManager>


 

using

 

System;

 

 

 

using

 

System.Collections.Generic;

 

 

 

using

 

System.Linq;

 

 

 

using

 

System.Web;

 

 

 

using

 

System.Web.Services;

 

 

 

using

 

System.Web.Script.Services;

 

 

 

using

 

System.Data;

 

 

 

using

 

System.Data.SqlClient;

 

 

 

using

 

System.Configuration;

 

 

 

///

 

<summary>

 

///

 

Summary description for ProductUpdate

 

 

 

 

///

 

</summary>

 

 

 

 

[

WebService(Namespace = "http://tempuri.org/")]

 

[

WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 

[

ScriptService]

 

 

 

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

 

 

 

public

 

class ProductUpdate : System.Web.Services.WebService {

 

 

public ProductUpdate () {

 

 

//Uncomment the following line if using designed components

 

 

 

 

 

//InitializeComponent();

 

 

 

 

}

[

WebMethod (EnableSession=true)]

 

 

public string AddProductLineItem(int bidID, int bidAddressID, int productID, int quantity, double originalPrice, double price) {

 

 

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["HarvestWSConnectionString"].ConnectionString);

 

conn.Open();

 

string sql = @"INSERT INTO BidDetail (BidId, BidAddressID, ProductID, Quantity, OriginalPrice, Price)

 

VALUES (@BidId, @BidAddressID, @ProductID, @Quantity, @OriginalPrice, @Price)"

 

;

 

 

SqlCommand cmd = new SqlCommand(sql, conn);

 

cmd.Parameters.Add(

new SqlParameter("@BidID", bidID));

 

cmd.Parameters.Add(

new SqlParameter("@BidAddressID", bidAddressID));

 

cmd.Parameters.Add(

new SqlParameter("@ProductID", productID));

 

cmd.Parameters.Add(

new SqlParameter("@Quantity", quantity));

 

cmd.Parameters.Add(

new SqlParameter("@OriginalPrice", originalPrice));

 

cmd.Parameters.Add(

new SqlParameter("@Price", price));

 

 

 

try

 

 

 

 

{

cmd.ExecuteNonQuery();

}

 

catch (Exception ex)

 

{

 

Console.WriteLine(ex.Message);

 

}

conn.Close();

 

return "Brandon was here";

 

}

 

}

 


Brandon Slezak
Top achievements
Rank 2
 answered on 28 Nov 2010
1 answer
60 views
 

Dear All,
I am new to Telerik RAD Controls and new to this forum too...
Actually,
I am using a Telerik Rad Grid. With in the detail grid, I got various columns, say col1 and col2, col3. When the user entered a value in col1 and col2, I should add them and set to the col3.

 

In the itemdatabound event I have added code to add javascript method to get fired onfocuschange of col1 and col2

 

 

var

 

 

col1 = item["col1"].Controls[0] as RadNumericTextBox;

 

 

 

 

var col2 = item["col2"].Controls[0] as RadNumericTextBox;

 

 

 

 

var col3 = item["col3"].Controls[0] as RadNumericTextBox;

 

 

 

 

 

 

string clientIds =

 

 

 

 

"'" + col1.ClientID + "' ," +

 

 

 

 

"'" + col2.ClientID + "' ," +

 

 

 

 

"'" + col3.ClientID + "'";

 

 

col1.Attributes.Add(

 

 

"onfocusout", "javascript:calculate(" + clientIds + ");");

 

col2.Attributes.Add(

 

 

"onfocusout", "javascript:calculate(" + clientIds + ");");

 

 

 

The following is the javascript method:

 

 

<

 

 

script type="text/javascript" language="javascript">

 

 

 

 

function calculate(price, quantity, totalAmount) {

 

 

 

 

var text1 = document.getElementById(price);

 

 

 

 

var text2 = document.getElementById(quantity);

 

 

 

 

var text3 = document.getElementById(totalAmount);

 

 

 

 

var total = text1.value * 1 + text2.value * 1;

 

alert(total);

alert(document.getElementById(totalAmount));

document.getElementById(totalAmount).value = total;

 

 

 

 

return true;

 

}

 

 

 

</script>

 

 

 

The javascript method is getting fired,and I am able to read the value entered by the user in the col1 and col2. How ever, when I set it to col3, it is not getting updated.

 

It is urgent, any ideas, please?

Regards,
Venkat

Venkat
Top achievements
Rank 1
 answered on 28 Nov 2010
1 answer
76 views
I have a Treeview clientside search going on and when I find an item I set it to Highlighted, and Expanded...ok so that works...kind of

But I want the entire node tree down to the item expanded so I can see it highlighted.  If it's nested right now below 2 parents, since I only expand the first parent, it looks like it didnt find anything.

Is there a property Im missing?
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 27 Nov 2010
8 answers
384 views
Hello Telerik team! Your controls are amazing, they are helping out my project quite a bit...
I am having a serious problem with the RadGrid however.

Basically I have a RadGrid where I have 2 static columns whose header text is supposed to be horizontal. But I also dynamically insert BoundColumns from db, and that header text needs to be vertical. Unfortunately when I mess with the header text on the dynamic columns, the control goes haywire.

The scrollbar is not accurately scrolling the rest of the dynamic fields smoothly, it is extremely jumpy.
Also, the gridlines and column headers are not aligned.

I have attached a picture of what our UI wireframe is supposed to look like.

And I have attached a picture of what it looks like right now.

I have tried a TON of tweaks that I have seen in various places on the site (tablelayout = auto/fixed, autogeneratecolumns=true/false, wrapping in a table with fixed layout, etc.), but nothing is solving this issue with the vertical text in the grid headers. Any help is much appreciated!!
chinmaya
Top achievements
Rank 1
 answered on 27 Nov 2010
2 answers
41 views
I add a RadRating control to a RadGrid footer at runtime. I can retrieve a updated value from the server using AJAX and would like to update this value with the latest server value. I have an event that can be called on the client side. My problem is how can I find the RadRating using Javascript at runtime? Below is a sample of the code I use to insert the control during the RadGrid1_ItemCreated event.

if (e.Item is GridFooterItem)
{
    GridFooterItem footerItem = (GridFooterItem)e.Item;
    TableCell tc = new TableCell();
                
    footerItem.Cells[5].Text = "<b>Overall Rating:</b>";
    footerItem.Cells[5].HorizontalAlign = HorizontalAlign.Right;
    //Add group rating summary
    RadRating radrateemp = new RadRating();
    RadRating radratesuper = new RadRating();
    radrateemp.ReadOnly = true;
    radrateemp.ID = "EmpRatingOverall";
    radratesuper.ReadOnly = true;
    radratesuper.ID = "SuperRatingOverall";
    footerItem.Cells[7].Controls.Add(radrateemp);
    footerItem.Cells[6].Controls.Add(radratesuper);
}
Bryan Kowalchuk
Top achievements
Rank 1
 answered on 26 Nov 2010
2 answers
104 views
Hello,

I have used RadGrid on one of the page on the website i am working on. I just realized that it does some weird thing.  So, here is the issue. I added a RadGrid to the page, gave DataSourceID to sqldatasource and gave bottom paging of page size 10. But it display page size like a textbox. Does anyone know what am i doing wrong or how to get rid of this bug? Here is my code for my RadGrid,

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
                                <MasterTableView DataSourceID="SqlDataSource1" AllowSorting="true" DataKeyNames="id" AllowPaging="true" PageSize="10" AllowNaturalSort="false" AutoGenerateColumns="false">    
                                   <Columns>
                                        <telerik:GridTemplateColumn HeaderText="Action">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lbview" CausesValidation="false" CommandName="ViewThread" CommandArgument='<%#Eval("id") %>' runat="server">View</asp:LinkButton>                      
                                        </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn SortExpression="Author" HeaderText="Author" HeaderButtonType="TextButton"
                                            DataField="author_name" UniqueName="Author">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"
                                            DataField="title" UniqueName="Title">
                                        </telerik:GridBoundColumn>                   
                                        <telerik:GridBoundColumn SortExpression="PostDate" DataField="date_created" HeaderText="Post Date" HeaderButtonType="TextButton" UniqueName="PostDate">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="LastCommented" HeaderText="Last Commented" HeaderButtonType="TextButton"
                                            DataField="last_commented" UniqueName="LastCommented">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Rating" HeaderText="Rating" HeaderButtonType="TextButton"
                                            DataField="rating" DataFormatString="{0:N1}" UniqueName="Rating">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>           
                            </telerik:RadGrid>

I have attached the screenshot of the RadGrid displaying that weird textbox.
Vijay Baria
Top achievements
Rank 1
 answered on 26 Nov 2010
1 answer
91 views
Hi, Im new with the RadChart control, here is my problem, i have a chart with y-axis values (0;0.2;0.4;0.6...) If I have a pointmark with y value=0.6 it not appears complete (half the point). What i want is to add a new value (one more step), in this case (0.8) so the pointmark may showed complete. How can I do it?
Martin
Top achievements
Rank 1
 answered on 26 Nov 2010
2 answers
85 views
Hi,

I am using a RadWindow to display a form. The form contains a SharePoint PeopleEditor control.

When I access the form via IE it is perfectly fine. When I access the form via Firefox the textbox is disabled and does not allow me to enter anything.

If I directly access the page (i.e. not via RadWindow) then it is perfectly fine in firefox too. It seems like the problem only occurs in firefox when I use a radwindow to display the form.

This is in SharePoint 2010.
Content and Code
Top achievements
Rank 1
 answered on 26 Nov 2010
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?