Questions on UI for ASP.NET AJAX Forum

1 answer

104 views

PageSizeComboBox client-side event issue

Hello,

I need a client-side solution that conditionally will not change the pager combo value. I found an old thread here with some suggested client code at the bottom. Basically, the pager's combo box selectedIndexChanging event is handled, and under given condition is canceled. However, what I'm finding is that when not cancelled, the event is called twice. Why is that, and how do I prevent? Below is a simple example that demonstrates the issue.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server">
    <meta charset="utf-8"/>
    <title></title>
    
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            function pageLoad(sender, eventArgs) {


            }

            function onCommand(sender, args) {
                args.set_cancel(true);

                var lsCommand = args.get_commandName();
                if (lsCommand == "PageSize") {
                    console.log('Got PageSize Command');
                }
            }

            function onMasterTableViewCreated(sender, args) {

                console.log('Creating selectedIndexChanging Handler');

                var pageSizeCombo = $telerik.findControl(sender.get_element(), "PageSizeComboBox");
                if (pageSizeCombo) {
                    pageSizeCombo.add_selectedIndexChanging(function (sender, args) {
                        //this method will fire before the combo changes the
                        //page size in the grid pager. You can cancel this event

                        // If condition is met, cancel
                        if (args.get_item().get_value() == "20") {
                            args.set_cancel(true);
                            console.log('Page Size change cancelled')
                        }
                        else {
                            console.log('Page Size change allowed');
                        }
                    });
                }
            }
        </script>
    </telerik:RadCodeBlock>

</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

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

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Default" ShowChooser="false" />

        <telerik:RadGrid ID="RadGrid1" runat="server"
            EnableViewState="false"
            AutoGenerateColumns="false" 
            AllowPaging="false" 
            AllowSorting="true"
            Width="100%"
            Height="150px"
        >
            <MasterTableView 
                    TableLayout="Fixed"
                    AllowNaturalSort="false" 
                    ClientDataKeyNames="Name"
                    AllowPaging="true" 
                    EnableViewState="false"
            >
                <Columns>
                    <telerik:GridBoundColumn DataField="Name"  UniqueName="Name"  DataType="System.String" HeaderText="Name"  HeaderStyle-Width="150px" />
                    <telerik:GridBoundColumn DataField="Count" UniqueName="Count" DataType="System.Int32" HeaderText="Count" HeaderStyle-Width="150px" />
                </Columns>
                <NoRecordsTemplate>
                    <table style="height: 120px; width:100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="center" valign="middle">
                                There are no files matching the search criteria.
                            </td>
                        </tr>
                    </table>
                </NoRecordsTemplate>
                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" PageSizes="10,20,50,100" />
            </MasterTableView>
            <ClientSettings>
                <ClientEvents 
                    OnCommand="onCommand"
                    OnMasterTableViewCreated="onMasterTableViewCreated"
                />
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <DataBinding ShowEmptyRowsOnLoad="false" />
            </ClientSettings>
            <SortingSettings EnableSkinSortStyles="false" />
        </telerik:RadGrid>

    </form>
</body>
</html>

    public partial class Test2 : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Name", System.Type.GetType("System.String"));
            dt.Columns.Add("Count", System.Type.GetType("System.Int32"));

            DataRow dr = dt.NewRow();
            dr["Name"] = "Name1";
            dr["Count"] = 25;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["Name"] = "Name2";
            dr["Count"] = 18;
            dt.Rows.Add(dr);

            RadGrid1.DataSource = dt;
            RadGrid1.DataBind();

            RadGrid1.MasterTableView.PageSize = 20;
        }
    }

Thanks,

Dave

Grid

answered on 04 Apr 2022

1 answer

290 views

Rad radio button and checkbox styles

When I use the Rad radio button and checkboxes... something is messing up the alignments. I have reviewed my css, in page style changes and inspected the page in chrome and edge and I cannot find what is causing this (looks like all the applied styles are coming from Telerik.Web.

Any thoughts on where to fix this?

CheckBox

RadioButtonList

answered on 04 Apr 2022

1 answer

567 views

RadImageEditor

RadImageEditor maybe one of the worst thought out controls you have in your control suite. It could have been easy...if you consulted programmers who actually have to use this. Rant over, now lets get to the reson why we're here.

The source of my images are stored in a SQL DB. After jumping thru spiked hoops...I figured out how to save and load the images in the RadImageEditor. For the record, way harder than it needed to be. My problem is after I make changes to the image, ie maybe a resize, there is no easy way to to get the altered image. I thought the following code would do the trick:

Dim img As EditableImage = RadImageEditor1.GetEditableImage

boy was I wrong. I've seen the posts about CanvasMode...doesn't change the outcome. I've tried all 3 settings. I've tried changing the property in the aspx page. I've tried changing the property in the code behind. Result is always the unaltered image. Would it have killed you to have a GetChangedImage option?

I'm controlling the events in the code behind. I'm not using client events. I want to press a button and in the code behind/server code...save the data on my screen to a database and I would like to know how to include the altered image in that save? I'm not using any of the buttons on the RadImageEditor.

I would appreciate the code in VB and I would appreciate an actual example not a link to some demo because I've already been thru them with a fine tooth comb.

Thanks in advance.

ImageEditor

answered on 04 Apr 2022

0 answers

132 views

ExportToExcel on extended Grid

The project I am working on, uses Grids and for some reason it has extended (customized styling and other functionalites) RadGrids with extended Column as well (see an extract of the class below).

When I use the functionality exportToExcel in a telerik RadGrid, it works like I want but on the extended RadGrids it doesn't export the grid to a file but it replaces the grid on the UI. Page (I have attached two images, one with the exportToExcel button and the other with the "exported" table) . Do I also need to write a customized ExportToExcel function? or how could I approach this issue?

Thanks in advance.

public class DefaultGridBoundColumn:GridBoundColumn
{
public int ColumnWidth { get; set; }

public DefaultGridBoundColumn()
{
AllowFiltering = false;
ColumnWidth = -1;
}

public override void Initialize()
{
if (ColumnWidth >= 0)
{
base.HeaderStyle.CssClass = (base.HeaderStyle.CssClass + " col-md-" + ColumnWidth).Trim();
base.ItemStyle.CssClass = (base.ItemStyle.CssClass+ " col-md-" + ColumnWidth).Trim();
}
base.Initialize();
}
}
}

Grid

asked on 04 Apr 2022

1 answer

141 views

TreeView Drag and Drop between two different TreeViews?

Hi,

Does the latest version of Telerik UI for ASP.NET AJAX support drag/drop between two TreeViews on the same page? How about two Grids?

Thanks,

Grid

TreeView

UI for ASP.NET AJAX in ASP.NET MVC

answered on 01 Apr 2022

26 answers

673 views

Set readonly RadAutoCompleteBox

Dear All,
How can I set RadAutoCompleteBox readonly. I can not find which function support that.
Thank you very much.

AutoCompleteBox

updated answer on 31 Mar 2022

1 answer

111 views

RadAsyncUpload On Azure Server Gets 500 Error

How do I trouble shoot an upload error I am getting on Azure. RadAsyncUpload works fine on my local machines but when deployed to the server I get

"Failed to load resource: the server responded with a status of 500 (Internal Server Error)" & "Uncaught Error while uploading, HTTP Error code is: 500"

AsyncUpload

answered on 31 Mar 2022

1 answer

186 views

Multiple filter string search on RadDropDownTree

Hello,

I want to filter my RadDropDownTree using multiple strings delimited by a space.

I have modified a script but it isn't working quite right.

Note the pic below. I want to match on both "balances" and "sspro" or "ssedge" or "ss.com"

When I add a space and an "s" then nothing is retrieved:

However, when I type in "balances t" I get some results but actually should get all lines that have "balances" and "t". There should be a lot more results:

Here is the script I'm using:

 var $T = Telerik.Web.UI;
    Telerik.Web.UI.RadDropDownTree.Manager.prototype._filterNodes = function (text) {
        var nodes = this._embeddedTree.get_allNodes(),
            count = nodes.length,
            regEx,
            i;

       
        var EnteredText = text.split(" ");

        if (EnteredText[1] == null) {

            EnteredText[1] = "";
        }

        if (this._filter == $T.DropDownTreeFilter.StartsWith)
           /* regEx = new RegExp("^\\s*" + $T.RadDropDownTree.Manager._regExEscape(text), "im");*/
            regEx = new RegExp("^\\s*(?=.*" + EnteredText[0] + ")(?=.* " + EnteredText[1] + ").*$", "im");
        else
           /* regEx = new RegExp($T.RadDropDownTree.Manager._regExEscape(text), "gim");*/
            regEx = new RegExp("^(?=.*" + EnteredText[0] + ")(?=.* " + EnteredText[1] + ").*$", "gim");

       /* alert(regEx);*/

        for (i = 0; i < count; i++) {
            var currentNode = nodes[i];
            var matchIsFound;

            if (currentNode.get_level() !== 2)
            {
                matchIsFound = false;
                /*alert(currentNode.get_text());*/
            }
            else
            {                
                matchIsFound = this._matchNode(currentNode, EnteredText, regEx);
              //  alert(currentNode.get_text());

            }
            if (matchIsFound)
            {
                this._handleVisibleParents(currentNode);
                this._filteredVisibleNodes.push(currentNode);
            }
            else
            {
                this._handleHiddenNode(currentNode);
            }
        }

        this._hideNodes(this._filteredHiddenNodes);
        this._showNodes(this._filteredVisibleNodes);

        this._filteredVisibleNodes = [];
        this._filteredHiddenNodes = [];
    }

Thanks!

--Clark

DropDownTree

Filter

answered on 31 Mar 2022

1 answer

141 views

Filter only on 3rd level of RadDropDownTree

Hello,

I would like to display the filter results of only the 3rd level nodes of my radDropDownTree.

In the example below, I only want 3rd level nodes that have "web" in their text field displayed.

I've marked out what I don't want to see.

Thanks!

--Clark

DropDownTree

Filter

updated question on 31 Mar 2022

0 answers

251 views

how to disable drag and drop files in the image manager or document manager

Hi Telerik Team,

In the application, we have disabled upload, delete and rename functions, but we still can drag and drop files. Is there any way can disable drag and drop files, please?

Regards,

Lan

Editor

asked on 30 Mar 2022