ASP.NET Button Click on enter keypress with Javascript and Telerik radcombobox

by pencilvac 4/24/2012 5:18:00 AM

In most modern web browsers if you have focus in a text box and press the enter key it will submit your form for you. I came across a situation where I wanted my aspx page to postback after a user makes a selection in a telerik radcombobox and then presses the enter key. Normally this does not happen automatically like a regular text box so I need a solution:

SOLUTION: In my radcombobox I used the client side event OnClientKeyPressing:

<telerik:RadComboBox OnClientKeyPressing="CheckPressEnterKey" ID="rcbCounterParties"  runat="server"></telerik:RadComboBox>

This client side event is wired up to the javascript function specified which accepts two arguments sender and args, as is seen below:You can access which key the user pressed in the args argument. The enter key has a keyCode of 13 so with a simple if statement we can test the key, if it is indeed the enter key then we can manually click the button we want. Its that easy.


                function CheckPressEnterKey(sender, args) {

                    if (args._domEvent.keyCode == 13) {
                        document.getElementById('<%=btnLoad.ClientID  %>').click();
                    }
                }

Note: You will obviously need to put the javascript function within a telerik radcodeblock in order access the buttons client ID as shown.

Tags:

.NET | ASP.NET Enterprise Library | JavaScript | Telerik

Telerik Rad Loading Panel Not Working or Showing with User Controls

by pencilvac 4/19/2012 6:18:00 AM

I came across an issue with an aspx page containing a user control which had several parts of each ajaxified. We needed to ajaxifiy a number of tasks for our users which also needed telerik content loading panels so the user knew something was happening. The RadAjaxManager is located inside the aspx page as so:

         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <ClientEvents OnRequestStart="onRequestStart" />
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgDeals">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDeals" LoadingPanelID="lpComponents" />
                            <telerik:AjaxUpdatedControl ControlID="lblRecords" />
                        </UpdatedControls>
                     </telerik:AjaxSetting>
                     <telerik:AjaxSetting AjaxControlID="btnRetrieve">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDeals" LoadingPanelID="lpComponents" />
                            <telerik:AjaxUpdatedControl ControlID="lblRecords" />
                            <telerik:AjaxUpdatedControl ControlID="ucPipelineClose" LoadingPanelID="lpComponents" />
                        </UpdatedControls>
                     </telerik:AjaxSetting>    
                     <telerik:AjaxSetting AjaxControlID="ucPipelineClose">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgPipelineClose"
LoadingPanelID="lpPipelineClose" />
                        </UpdatedControls> 
                    </telerik:AjaxSetting>

                </AjaxSettings>
            </telerik:RadAjaxManager>

The bolded AjaxSetting is to Ajaxify the user control within the aspx page. The control ID is obviously ucPipelineClose and the updated control is a radgrid within the control. After many efforts I could not get the loading panel to appear over the radgrid as was expected when changes were made or ajaxified to the user control. Trying to change the control ID and updated controls made no difference as well.

THE SOLUTION: It seemed that the ajax manager was unable to locate exactly which controls were being updated and where exactly to put the loading panel correctly. The solution I came up with was to use a RadAjaxManagerProxy inside of the control to specify the controls to ajaxify, update, and show loading panel for. I set the control ID to the button click that is to be ajaxified, with the radgrid as the updated control and it worked beautifully.

   <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnSavePipelineClose">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgPipelineClose" LoadingPanelID="lpPipelineClose" />
                    <telerik:AjaxUpdatedControl ControlID="rgDeals" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

Tags:

.NET | ASP.NET AJAX | ASP.NET Enterprise Library | Telerik

Setting image for GridImageColumn in ItemDataBound Codebehind

by ebarcza 3/15/2012 12:20:00 PM
    protected void rgDeals_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            CheckBox chkDealLocked = (CheckBox)e.Item.FindControl("chkDealLocked");
            CheckBox chkComponentsLocked = (CheckBox)e.Item.FindControl("chkComponentsLocked");
 
            DataRowView drv = (DataRowView)e.Item.DataItem;
            int missingVolDays = Convert.ToInt32(drv["MissingVolumeDays"].ToString());
            
            GridDataItem item = (GridDataItem)e.Item;  
            Image img = (Image)item["Actualized"].Controls[0];
           
            if (missingVolDays != 0)
            {
                img.Visible = false;
                chkDealLocked.Enabled = false;
                chkComponentsLocked.Enabled = false;
            }
            else
            {
                img.ImageUrl = "~/Images/checkmark_blue.gif " ; 
                chkDealLocked.Enabled = true;
                chkComponentsLocked.Enabled = true;
            }
 
        }
    }

Tags:

.NET | Telerik

Telerik Radcombobox multiple selections with Checkboxes Server Side

by pencilvac 3/13/2012 12:09:00 PM

The Telerik Radcombobox control is great for selecting single values from a drop down list, but with the new addition of the control's CheckBoxes property adding checkboxes and allowing users to make multiple selections is quite easy.

First you need a radcombobox control:

<telerik:RadComboBox ID="rcbServiceTypes"  runat="server" CheckBoxes="True" />

Something to keep in mind: Right from the Telerik Doc's:

  • MarkFirstMatch and Filter functionalities are not supported. The reason is that the CheckBox selection is different from the standard RadComboBox's selection - there is no single selected item.
  • Load On Demand functionality is not supported. The reason is that RadComboBox's items loaded on demand are not accessible on the server which is needed for the CheckBox feature

Databind the control just like you would any other dropdownlist:

 private void LoadDropDownLists()

{

           //databind the radcombobox with values from your database

            rcbServiceTypes.DataSource = Utility.GetLookups(9);
            rcbServiceTypes.DataTextField = "LU_Value";
            rcbServiceTypes.DataValueField = "ID";
            rcbServiceTypes.DataBind();

            //preselect a default values checkbox if you want

            RadComboBoxItem item1 = new RadComboBoxItem();
            item1 = rcbServiceTypes.Items.FindItemByValue("49");
            item1.Checked = true;

}

When you want to access the values that the user has checked off from the combobox in the code behind you can do something like this:

                   //create an array to store service types checked in the drop down

                    int itemschecked = rcbServiceTypes.CheckedItems.Count;      //the total boxes that were checked
                    String[] ServiceTypesArray = new String[itemschecked];        //an array to store the values

                    //now lets loop through the service types and get their value
                    var collection = rcbServiceTypes.CheckedItems;    //this variable holds all of the checked boxes so we can loop through
                    int i = 0;
                    foreach (var item in collection)
                     {

                       String value = item.Value; //grab the current check boxes value , you can also use .text to grab the text of the item selected
                       ServiceTypesArray[i] = value; //store it in the array
                       i++;
                     }
                    var ServiceTypes = String.Join(",", ServiceTypesArray); // If you need a String instead of an array then break the array into a comma separated string

Pretty easy to do.

NOTE: If you are having problems where your combobox.CheckedItems is coming up as 0 for a count but you are checking off boxes for sure then

make sure that some properties of your control on the front end are not interfering with the checkboxes property. The documentation on Telerik is not overly extensive.

Check out Teleriks documentation:

Telerik Radcombobox Checboxes Documentation

Tags: , , , ,

.NET | ASP.NET Enterprise Library | Telerik

Disable Asp.net form validators with Javascript API

by pencilvac 2/17/2012 12:00:00 PM

You may come across the necessity in a project to disable or enable server side asp.net form validators because of some form of client side action with javascript. In my scenario I had to either display or hide a state dropdownlist ( a telerik control radcombobox) and show a region/province text box in a customer input form depending on whether the user was from the USA or another country. When the user was outside of the U.S. we obviously need to remove the state recquired field validator.

In order to do so I took advantage of the very robust Telerik radcombobox javascript api which included the onClientLoad and OnClientSelectedIndexChanged Client side functions which I attached to my countries radcombobox.

<telerik:RadComboBox  Width="142" ID="ddlCountries" OnClientLoad="checkCountry" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"  runat="server" MarkFirstMatch="True" />

onClientLoad runs any javascript you put inside of it immediately after the drop down is done loading. OnClientSelectedIndexChanged runs, well, right after the user picks a new value in the drop down.

OnClientLoad function :

    function checkCountry(sender) {

        var value = document.getElementById('<%=ddlCountries.ClientID  %>').value;

        if (value !== "United States") {

            var stateValidator = document.getElementById('<%= valState.ClientID  %>');
            ValidatorEnable(stateValidator, false);

        }
        else {

            var stateValidator = document.getElementById('<%= vaState.ClientID  %>');
            ValidatorEnable(stateValidator, true);

        }
    }

Basically the function onload checks to see if the value of the drop down selected is the United States or not. If it is the U.S. then the 

ValidatorEnable function take the parameter of the server ID of the validator you either want to enable or disable as well as whether you want

to enable or disable it. In order to retrieve the Client side ID of the validator I threw the javascript functions within a Telerik Code block.

 

Like magic you can disable and/or enable your asp.net server side validators from client side javascript using the Telerik javascript API.

Tags:

ASP.NET AJAX | JavaScript | Telerik

RadGrid GridCalculated column aggregate - Sum is not supported for type "System.Object"

by ebarcza 10/10/2011 2:19:00 PM

When you try and aggregate a radgrid GridCalculatedColumn, you might encounter this error

Sum is not supported for type "System.Object"

 

 

to fix this error all you have to do is give the column a datatype - in my case it was  a decimal. the property setting for this is DataType="System.Decimal". See Example below:

<telerik:GridCalculatedColumn DataFields="SumOfNetRev,SumOfUESFee" DataType="System.Decimal"
                        FilterControlAltText="Filter NetTotal column" UniqueName="NetTotal"
                        DataFormatString="{0:c}"
                        Expression="{0}-{1}" HeaderText="Net Total" Aggregate="Sum" FooterAggregateFormatString="{0:c}">
                        <ItemStyle HorizontalAlign="right" />
                        <HeaderStyle HorizontalAlign="Right" />
                        <FooterStyle HorizontalAlign="Right" Font-Bold="true"/>
</telerik:GridCalculatedColumn>

Tags:

Telerik

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

About the author

Name of author Author name
Something about me and what I do.

E-mail me Send mail

Calendar

<<  July 2017  >>
MoTuWeThFrSaSu
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar

Recent comments

Tags

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2017

Sign in