Click here to Skip to main content
Click here to Skip to main content
Go to top

Range Administration and Maintenance Control

, 27 Jul 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

I am working on a project where a series of ranges are to be administered. The ranges are associated with a certain value. Say that a sales associate is at 20% commission when his sales are from 0 to 3 million, and after 3 million, the commission goes up to 25%. This data is stored in tabular format but that was getting very difficult to maintain and administer. We wanted a graphical way to represent range based data.

We first put a "slider" (http://jqueryui.com/demos/slider/)control, but the ranges are all affected by each other. This caused us to layer slider on top of slider and it became a visual and administrative mess. We went over to the white board to think of how else to represent ranges of values.

Background

We first worked out a layout for this system. A number line, with icons indicating the various possible actions. We tried to decide on a layout that would be as easy to reproduce in html as possible.

RangeWidget.jpg

The number line spans from 0 to infinity. We created a variable to control the number of items to show on a line before wrapping.

You'll notice units are missing from this control - A text caption above or below would help to explain that from 0 to 10 million, the sales associate receives 40% commission, from 10 to 20 million 50% commission, and so forth.

A saveevent allows the end user to modify values in any of the textbox controls. Clickingthe red X icon will raise an event to delete the range, and clicking the"split" icon will present a dialog forthe user to split a range into two smaller ranges.

Using the Code

The sample solution has a folder "RangeController" with two ascx files: NumberLine.ascx and RangeControl.ascx. All necessary code to replicate the above UI is in these two classes. To instantiate a NumberLinecontrol, add the NumberLine to a page.
<uc1:NumberLine ID="NumberLine1" runat="server" RowSize="4" 
   OnRangeDeleted="NumberLine1_RangeDeleted"    OnRangeSplit="NumberLine1_RangeSplit" />

Notice the property RowSize which determines the number of units per row before wrapping to the next row.

OnRangeDeleted is the event fired when the red X to delete a range is clicked.

OnRangeSplit is fired when a user selects to split a range into two ranges.

Points of Interest

To help template this control, we created an abstract datatype "RangeObject"which business layer objects must inherit from. I have not yet wired this up to an EntityFramework application, but am curious to see how easy it will be to connect the Classes to the RangeObject layer... I assume it may be necessary to create an IRangeObject interface instead so that we don't run into multiple inheritance issues.

I would be very interested to hear how other people have gone about administering ranges. Have other people made similar controls? Maybe there are some professional controls that do the same thing?

I'd be excited to hear if anybody attempts to implement a similar control.(whether good or bad)

Good Luck!

History

TBD.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jkrebsbach
Software Developer (Senior) Superior Consulting Services
United States United States
Jeff Krebsbach has been a Consultant with Superior Consulting Services (SCS) since 2006. SCS is based in Burnsville, Minnesota and focuses on developing solutions for Microsoft technologies, with a strong set of experience with MS SQL Server, SSRS, SSIS, and SSAS.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 27 Jul 2011
Article Copyright 2011 by jkrebsbach
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid