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

SQL Server validating overlapping dates, date ranges

by pencilvac 4/11/2012 5:55:00 AM

When saving records to your database you may find that you cannot allow users to save multiple similar records with overlapping date ranges. The way I went about doing this was to check for the overlap in a SQL stored procedure in SQL server.

ALTER PROCEDURE [dbo].[UpsertGroupFieldValues]
    @GroupFieldValueID int = -1,
    @TargetEntityID int,
    @TargetPKID int,
    @PKID int,
    @EntityID int,
    @GroupFieldID int,
    @StartDate DateTime,
    @EndDate DateTime,
    @UserID int,
    @GroupValueIDReturned int OUTPUT

Out of all of these parameters If these parameters match a record that is already in the database, but without overlapping dates then we are good to save it. If however, the fields do match a record already in the database WITH overlapping dates, then we cannot save the record and we need to alert the user with an error.

To check for overlap I used an IF statement with a NOT EXISTS:

                //Check if there is a similar record (matching fields) with overlapping dates.//

                IF NOT EXISTS(select * from GroupFieldValues
                            WHERE TargetEntityID = @TargetEntityID
                            AND TargetPKID = @TargetPKID
                            AND PKID = @PKID
                            AND EntityID = @EntityID
                            AND GroupFieldID = @GroupFieldID
                            AND (
                                    (@StartDate BETWEEN StartDate AND EndDate)
                                    OR (@EndDate BETWEEN StartDate AND EndDate)
                                    OR(@StartDate <= StartDate AND @EndDate >= EndDate)
                                )


                   )                           

    --Basically we have a similar record. If we do have a similar record lets see if their dates overlap. If the parameter startdate is between the records start and end then it must be overlapping. If the parameter endDate is between the records start and end then it has to be overlapping. Otherwise the only other situation I can think of is if the parameter startdate is before the records startdate and the parameter @EndDate is after the records EndDate which means overlap. If this does not exist then we can go ahead and save the record.


                         
                BEGIN
                           YOUR INSERT STATEMENT
                END
                If it does exist ( an overlap) then we raise an error.
                ELSE
                    BEGIN
                        RAISERROR('Your new grouping was not saved because a similar group already exists within the same date range.',18,1)
                        --Print'Date Confliction'
                    END

ANOTHER TOPIC OF INTEREST: If you are doing an upsert stored procedure aka you are either inserting a new record or updating an already exisitng record with the same SPROC you will have to do a separate Date overlap test. Think of this situation: Your user goes into edit mode of a record in the front end of your application or website. The user changes the end date value to be November instead of October. When you check for overlap with the process above, the check will fail because there is a record with overlapping date ranges and your parameters (The record itself you are trying to update!). A way to get by this is performing separate checks based on whether you are trying to update or insert. Example:

 

IF @GroupFieldValueID = -1 --(our primary key) aka you are trying to insert a new record since its -1 (otherwise this will be the ID of the record you want to update)
    BEGIN --run our check for the new record
                IF NOT EXISTS(select * from GroupFieldValues
                            WHERE TargetEntityID = @TargetEntityID
                            AND TargetPKID = @TargetPKID --The company
                            AND PKID = @PKID --specific Value of contract, Location, Pipeline, Pricing Area from Drop downs.
                            AND EntityID = @EntityID --Entity were grouping on IE Pipeline or Contract
                            AND GroupFieldID = @GroupFieldID
                            AND (
                                    (@StartDate BETWEEN StartDate AND EndDate)
                                    OR (@EndDate BETWEEN StartDate AND EndDate)
                                    OR(@StartDate <= StartDate AND @EndDate >= EndDate)
                                )
                           
                            )   
                BEGIN
                        --PRINT'Start if no date confliction'

                               YOUR INSERT STATEMENT
                       
                END
               
                ELSE
                    BEGIN
                        RAISERROR('Your new grouping was not saved because a similar group already exists within the same date range.',18,1)
                        --Print'Date Confliction'
                    END
                   
                   
    END   
    ELSE--if @GroupFieldValueID != -1 meaning we are trying to update a record
        BEGIN --run a slightly different check where we specify that we are looking for an overlapping record that is NOT this record (AND GroupFieldValueID != @GroupFieldValueID)
            IF NOT EXISTS(select * from GroupFieldValues
                            WHERE TargetEntityID = @TargetEntityID
                            AND TargetPKID = @TargetPKID --The company
                            AND PKID = @PKID --specific Value of contract, Location, Pipeline, Pricing Area from Drop downs.
                            AND EntityID = @EntityID --Entity were grouping on IE Pipeline or Contract
                            AND GroupFieldID = @GroupFieldID
                            AND (
                                    (@StartDate BETWEEN StartDate AND EndDate)
                                    OR (@EndDate BETWEEN StartDate AND EndDate)
                                    OR(@StartDate <= StartDate AND @EndDate >= EndDate)
                                )
                            AND GroupFieldValueID != @GroupFieldValueID
            )
                BEGIN
                      YOUR UPDATE STATEMENT
                END
            ELSE
                BEGIN
                    RAISERROR('Your Group was not updated because there is another group with overlapping date ranges. ',18,1)
                END
        END   
END

 

BOOOM no more conflicting date ranges.

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

Merging Data Tables in C#

by pencilvac 3/9/2012 12:16:00 PM

Merging data tables in C# is incredibly easy. If you have two tables of data pulled from the database:

In this situation our two tables have the same columns.

using System.Data; //include in your code behind so you can use data tables.

 

DataTable dt = Contract.GetDealContracts(pCompanyID, -1,42);

DataTable dt2 = Contract.GetDealContracts(pCompanyID, -1, 40);

 

 

You can then merge the two tables into one by simply:

dt.Merge(dt2); // table1.Merge(table2);

 

BOOM- two tables, now one table, with all your data. 

Tags: , , ,

.NET | ASP.NET Enterprise Library

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

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