Blazor Datagrid를 사용하여 채널 마케팅 예산 템플릿을 생성하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-12-30 14:41 조회 2,704회 댓글 0건

본문

관련링크

ComponentOne Blazor Edition은 그리드, 차트, 입력과 기타 컨트롤을 포함한 고성능 컨트롤 집합을 제공합니다. FlexGrid는 언제나 인기 있는 그리드 컨트롤이었고 ComponentOne Blazor Edition에 컨트롤로 통합된 후에도 계속 칭찬을 받고 있습니다.

테이블 데이터 편집, 정렬, 필터링 및 FlexGrid 그룹화 등의 기본 기능과 더불어 주문형 로드, 사용자 정의 셀, 내장 편집기 컨트롤, 전체 텍스트 검색 및 필터, 응답 열 레이아웃, 선택 및 내보내기를 포함한 기타 고급 기능도 제공합니다. 이처럼 기능이 풍부한 컨트롤을 Blazor와 결합하면 한 단계 높은 수준의 웹 응용 프로그램을 만들 수 있습니다.

Blazor Edition에 대한 자세한 내용은 데모와 문서를 참조하세요.

이 블로그에서는 기능이 풍부한 FlexGrid 컨트롤을 사용하여 채널 마케팅 예산 템플릿과 같이 흥미로운 사용 사례 시나리오를 구현합니다. 조직은 채널 마케팅 예산 템플릿을 사용하여 마케팅 기능에 할당할 예산 금액과 예산을 지출하는 방식을 결정할 수 있습니다.

마케팅 예산의 다양한 측면을 계산하는 채널 마케팅 예산 템플릿에는 여러 가지가 있습니다. 이 블로그는 이러한 채널 마케팅 예산 템플릿 중 하나를 선택하고 Blazor와 ComponentOne Blazor FlexGrid 컨트롤을 사용하여 이 템플릿을 구현하는 방법을 설명합니다.

사용 사례

이 블로그에서 생성한 채널 마케팅 예산 템플릿은 텔레마케팅, 인터넷 마케팅, 인적 자원, 소매업체, 유통업체 등 다양한 리소스가 할당된 자금을 어떻게 소비하는지 설명하는 채널 마케팅 예산을 계산합니다.

이 누적 측정법은 총액을 월 지출과 연중 각 리소스에 배정된 금액으로 분할하여 총예산을 계산합니다. 다음은 이후 섹션에서 디자인하는 방법을 배울 예산 템플릿에 대한 간략한 보기입니다.

사용 사례

아래 단계는 Blazor를 사용하여 이 채널 마케팅 예산 템플릿을 생성하는 방법을 이해하는 데 도움이 될 것입니다.

FlexGrid를 사용하여 Blazor 응용 프로그램 설정

Blazor 서버 앱 템플릿을 사용하여 Blazor 응용 프로그램을 만드는 것으로 시작합니다.

Blazor 앱

응용 프로그램이 생성되면 Nuget 패키지 관리자를 사용하여 C1.Blazor.FlexGrid 패키지를 설치하고 FlexGrid 컨트롤 작업을 시작하는 데 필요한 클라이언트 측 참조를 추가해야 합니다. FlexGrid quickstart는 FlexGrid 컨트롤을 Blazor 응용 프로그램에 추가하는 자세한 단계를 제공합니다.

FlexGrid는 바인딩 모드와 바인딩 해제 모드에서 모두 잘 작동합니다. 이 응용 프로그램의 경우 FlexGrid의 다른 셀을 채우기 위해 수행할 계산을 기반으로 몇 가지 값을 입력해야 하므로 FlexGrid 바인딩 해제 모드로 작업합니다. FlexGrid의 바인딩 해제 모드를 설명하는 데모와 문서를 참조하세요.

아래 코드는 프로젝트가 FlexGrid 빠른 시작에 따라 구성되었고 Razor 컴포넌트가 이미 프로젝트에 추가되었다고 가정합니다. 이제 다음 코드를 Razor 페이지에 추가하여 필요한 수의 행과 열을 명시적으로 추가하여 바인딩 해제 모드에 대한 FlexGrid 컨트롤을 추가하고 구성합니다.

@page "/"
@using C1.Blazor.Core
@using C1.Blazor.Grid

<FlexGrid @ref="grid"
        CellFactory="@cellFactory"
        MergeManager="@custommergemanager"
        HeadersVisibility="GridHeadersVisibility.None"
        SelectionMode="GridSelectionMode.Cell"
        GridLinesVisibility="GridLinesVisibility.None"
        CellEditEnded="OnCellEditEnded" BeginningEdit="OnBeginningEdit" SelectionChanging="OnSelectionChanging"
        Style="@("max-height:100vh; position: absolute; top:0;")">
  <FlexGridColumns>
      @for (int i = 0; i < 16; i++)
      {
          if (i == 0)
          {
            <GridColumn Width="420" IsReadOnly="true" />
          }
          else if (i == 1)
          {
            <GridColumn Width="60" HorizontalAlignment="C1HorizontalAlignment.Center" />
          }
          else if (i < 14)
          {
            <GridColumn Width="100" HorizontalAlignment="C1HorizontalAlignment.Right" />
          }
          else if (i == 14)
          {
            <GridColumn Width="5" IsReadOnly="true" />
          }
          else
          {
            <GridColumn Width="120" IsReadOnly="true" HorizontalAlignment="C1HorizontalAlignment.Right" />
          }
      }
  </FlexGridColumns>
  <FlexGridRows>
      @for (int i = 0; i < 59; i++)
      {
          if (i == 0)
          {
            <GridRow Height="50" IsReadOnly="true" />
          }
          else if (i == 1)
          {
            <GridRow Height="25" IsReadOnly="true" />
          }
          else
          {
            <GridRow Height="30" />
          }
      }
  </FlexGridRows>
</FlexGrid>

@code
{
  FlexGrid grid;
  GridCellFactory cellFactory = new CustomCellFactory();
  CustomMergeManager custommergemanager = new CustomMergeManager();
}

*참고: 몇 가지 오류가 발생하지만 나머지 단계를 계속하고 적절한 코드를 추가하면 해결됩니다.

채널 마케팅 예산 템플릿 레이아웃 디자인

이제 채널 마케팅 예산과 비슷하게 FlexGrid 모양을 사용자 정의해 보겠습니다.

열 너비와 행 높이를 조정하고 셀을 고정하며 셀을 병합하고 셀 형식을 지정하면서 예산 필드 레이블을 FlexGrid의 적절한 셀로 채워 동일한 작업을 수행합니다. 아래 섹션에서는 모든 필수 사용자 정의를 적용하는 방법에 대해 자세히 설명합니다.

셀 병합

FlexGrid는 인접한 셀에 동일한 내용이 있는 경우 행이나 열에서 셀을 병합할 수 있는 기본 제공 기능이 있습니다. GridMergeManager 클래스를 상속하여 FlexGrid의 기본 병합 동작을 사용자 정의하여 행과 열에서 셀을 병합하기 위한 사용자 정의 로직을 정의할 수 있습니다.

이 구현을 위해 FlexGrid에서 미리 정의된 셀 목록을 병합하여 채널 마케팅 예산 템플릿에 적절한 셀 표시를 렌더링하는 사용자 정의 MergeManager를 정의해야 합니다. 아래 코드는 FlexGrid에서 필요한 셀을 병합합니다.

//Define custom MergeManager class to merge cell ranges based on custom logic
public class CustomMergeManager : GridMergeManager
{
  public override GridCellRange GetMergedRange(GridCellType cellType, GridCellRange range)
  {
    //Merge cells containing Budget template itle
    if (cellType == GridCellType.Cell && (range.Row == 0 && range.Column >= 0 && range.Column <= 15))
    {
        GridCellRange range1 = new GridCellRange(0, 0, 0, 15);
        return range1;
    }
    return base.GetMergedRange(cellType, range);
  }
}

필드 레이블 추가

아래 코드에서 채널 마케팅 예산 템플릿 필드 레이블을 바인딩 해제 FlexGrid의 적절한 셀에 채웁니다.

//Populate budget fields labels
private void PopulateLabels()
{
  //Template Title
  grid[0, 0] = "CHANNEL MARKETING BUDGET";

  //Populate Budget template field labels

  //Budget Rate and Timeline
  for (int c = 1; c < 16; c++)
  {
    if (c == 1)
        grid[1, c] = "Rate";
    else if (c == 15)
        grid[1, c] = "Total";
    else if (c <= 13)
        grid[1, c] = "Month " + (c - 1).ToString();
  }

  //Budget Fields
  grid[2, 0] = "ANTICIPATED SALES TOTAL $(000)";
  grid[3, 0] = "PERSONNEL (% OF TOTAL SALES)";
  grid[4, 0] = "Human Resources - Headcount";
  grid[5, 0] = "Human Resources - Cost";
  grid[6, 0] = "Commission";
  grid[7, 0] = "Personnel Total $(000)";
  grid[8, 0] = "DIRECT MARKETING (% OF TOTAL SALES)";
  grid[9, 0] = "Telemarketing (% of Direct Sales)";
  grid[10, 0] = "     Human Resources - Headcount";
  grid[11, 0] = "     Infrastructure Support";
  grid[12, 0] = "     Commission";
  grid[13, 0] = "     Training";
  grid[14, 0] = "Telemarketing Total $(000)";
  grid[15, 0] = "Internet Marketing (% of Direct Sales)";
  grid[16, 0] = "     Human Resources - Headcount";
  grid[17, 0] = "     Website Development (one-time cost)";
  grid[18, 0] = "     Hosting";
  grid[19, 0] = "     Support & Maintenance";
  grid[20, 0] = "Internet Marketing Total $(000)";
  grid[21, 0] = "Direct email (% of direct sales)";
  grid[22, 0] = "     Human Resources - Cost";
  grid[23, 0] = "     Material";
  grid[24, 0] = "     Postage";
  grid[25, 0] = "Direct email total $ (000)";
  grid[26, 0] = "Direct Marketing Total $(000)";
  grid[27, 0] = "AGENT/BROKER (% OF TOTAL SALES)";
  grid[28, 0] = "Communication";
  grid[29, 0] = "Training";
  grid[30, 0] = "Promotions";
  grid[31, 0] = "Discounts";
  grid[32, 0] = "Commission (% of Agent's Sales)";
  grid[33, 0] = "Agent/Broker Total $(000)";
  grid[34, 0] = "DISTRIBUTORS (% OF TOTAL SALES)";
  grid[35, 0] = "Communication";
  grid[36, 0] = "Training";
  grid[37, 0] = "Promotions";
  grid[38, 0] = "Commission/Discounts (% of Distributors' Sales)";
  grid[39, 0] = "Distributor Total $(000)";
  grid[40, 0] = "RETAILER (% OF TOTAL SALES)";
  grid[41, 0] = "Communication";
  grid[42, 0] = "Training";
  grid[43, 0] = "Promotions";
  grid[44, 0] = "Commission/Discounts (% of Retail Sales)";
  grid[45, 0] = "Retailer Total $(000)";
  grid[46, 0] = "CUSTOMER ACQUISITION & RETENTION (CAR)";
  grid[47, 0] = "Human Resources";
  grid[48, 0] = "Communications";
  grid[49, 0] = "Promotions/Coupons";
  grid[50, 0] = "CAR Total $(000)";
  grid[51, 0] = "OTHER EXPENSES";
  grid[52, 0] = "Travel";
  grid[53, 0] = "Infrastructure (computer, telephone, etc.)";
  grid[54, 0] = "Channel Support";
  grid[55, 0] = "Other Expenses Total $(000)";
  grid[57, 0] = "TOTAL MARKETING BUDGET:";
}

셀 스타일 적용

적절한 셀에 모든 필수 레이블을 추가했습니다. 이제 셀에 스타일을 적용하여 채널 마케팅 예산 템플릿의 모양과 느낌을 개선하고 보다 사실적으로 표현하도록 하겠습니다.

FlexGrid의 셀에 스타일을 적용하려면 GridCellFactory 클래스를 상속하여 각 셀에 개별적으로 스타일을 지정할 수 있는 사용자 정의 CellFactory 클래스를 만듭니다. 배경색, 전경색, 테두리, 글꼴 등을 적용하여 셀의 스타일을 지정할 수 있습니다.

아래 코드는 사용자 정의 CellFactory를 정의하고 FlexGrid의 모든 셀의 스타일을 지정합니다.

//Define custom CellFactory to apply style/formatting to cells
public class CustomCellFactory : GridCellFactory
{
  public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)
  {
      base.PrepareCellStyle(cellType, range, style, internalBorders);

      //Style Calculator border
      if (cellType == GridCellType.Cell)
      {
        //Title styling
        if (range.Column == 0 && range.Row == 0)
        {
            style.FontSize = 26;
            style.FontWeight = "Bold";
            style.Color = C1Color.FromARGB(255, 70, 160, 201);
            style.TextAlign = C1StyleTextAlign.Center;
        }

        if (range.Row == 1)
        {
            style.FontSize = 14;
            style.BackgroundColor = C1Color.FromARGB(255, 217, 236, 244);
            style.BorderTopStyle = C1StyleBorderStyle.Solid;
            style.BorderTopWidth = 3;
            style.BorderBottomStyle = C1StyleBorderStyle.Solid;
            style.BorderBottomWidth = 3;
            style.BorderColor = C1Color.FromARGB(255, 143, 197, 222);
            style.TextAlign = C1StyleTextAlign.Center;
        }

        if (range.Row == 2)
        {
            style.FontSize = 16;
            style.FontWeight = "Bold";
            style.Color = C1Color.FromARGB(255, 70, 160, 201);
            style.BorderBottomStyle = C1StyleBorderStyle.Solid;
            style.BorderBottomWidth = 3;
            style.BorderColor = C1Color.FromARGB(255, 143, 197, 222);
            style.TextAlign = C1StyleTextAlign.Center;                  
        }

        if (range.Column == 0 && range.Row > 0 && range.Row < 58)
        {
            style.BorderRightStyle = C1StyleBorderStyle.Solid;
            style.BorderRightWidth = 3;
            style.BorderColor = C1Color.FromARGB(255, 143, 197, 222);
        }

        if (range.Row > 2)
        {
            style.BorderBottomStyle = C1StyleBorderStyle.Dotted;
            style.BorderBottomWidth = 1;
            style.BorderColor = C1Color.FromARGB(255, 143, 197, 222);
        }

        if (range.Row == 3 || range.Row == 8 || range.Row == 27 || range.Row == 34 || range.Row == 40 || range.Row == 46 || range.Row == 51)
        {
            style.FontSize = 16;
            style.FontWeight = "Bold";
        }

        if ((range.Row >= 4 && range.Row <= 6) || (range.Row >= 9 && range.Row <= 13) || (range.Row >= 15 && range.Row <= 20)
              || (range.Row >= 21 && range.Row <= 24) || (range.Row >= 28 && range.Row <= 32)
              || (range.Row >= 35 && range.Row <= 38) || (range.Row >= 41 && range.Row <= 44)
              || (range.Row >= 47 && range.Row <= 49) || (range.Row >= 52 && range.Row <= 54))
        {
            style.FontSize = 14;
            style.WhiteSpace = C1StyleWhiteSpace.Pre;
        }

        if (range.Row == 7 || range.Row == 26 || range.Row == 33 || range.Row == 39 || range.Row == 45 || range.Row == 50 || range.Row == 55)
        {
            style.FontSize = 16;
            style.FontWeight = "Bold";
            style.BackgroundColor = C1Color.FromARGB(255, 143, 197, 222);
            style.Color = C1Color.White;
        }

        if (range.Row == 14 || range.Row == 20 || range.Row == 25)
        {
            style.FontSize = 16;
            style.FontWeight = "Bold";
            style.Color = C1Color.FromARGB(255, 70, 160, 201);
            style.BackgroundColor = C1Color.FromARGB(255, 217, 236, 244);
        }

        //Total Row Styling
        if (range.Row == 57)
        {
            style.FontSize = 16;
            style.FontWeight = "Bold";
            style.Color = C1Color.White;
            style.BackgroundColor = C1Color.FromARGB(255, 70, 160, 201);
        }

        //Rate Column styling
        if (range.Column == 1)
        {
            if (range.Row != 0 && range.Row != 1 && range.Row != 4 && range.Row != 6 && range.Row != 7 &&
                  range.Row != 10 && range.Row != 12 && range.Row != 14 && range.Row != 16 &&
                  range.Row != 20 && range.Row != 25 && range.Row != 26 && range.Row != 31 &&
                  range.Row != 32 && range.Row != 33 && range.Row != 38 && range.Row != 39 &&
                  range.Row != 44 && range.Row != 45 && range.Row != 50 && range.Row != 55 &&
                  range.Row != 56 && range.Row != 57 && range.Row != 58)
            {
              style.BackgroundColor = C1Color.FromARGB(255, 242, 242, 242);
            }
        }

        if (range.Column == 14)
        {
            style.BackgroundColor = C1Color.White;
        }

        //Total Column Styling
        if (range.Column == 15)
        {
            if (range.Row != 58)
                style.BackgroundColor = C1Color.FromARGB(255, 217, 236, 244);

            if (range.Row != 2)
            {
                if (range.Row != 57)
                    style.Color = C1Color.Black;
                else
                    style.Color = C1Color.FromARGB(255, 46, 122, 158);
            }

            if (range.Row == 1 || range.Row == 7 || range.Row == 14 || range.Row == 20 || range.Row == 25 || range.Row == 26
                || range.Row == 33 || range.Row == 39 || range.Row == 45 || range.Row == 50 || range.Row == 5 || range.Row == 57)
                  style.FontWeight = "Bold";
        }

        //Calculated values styling
        if (range.Column >= 2 && range.Column <= 13)
        {
            if ((range.Row >= 3 && range.Row <= 6) || range.Row == 10 || range.Row == 12
                || range.Row == 16 || range.Row == 31 || range.Row == 32 || range.Row == 38
                || range.Row == 44 || range.Row == 46 || range.Row == 51)
            {
                style.BackgroundColor = C1Color.FromARGB(255, 242, 242, 242);
            }
          }
      }
  }
}

샘플 데이터 채우기

다음은 총액을 계산하려면 어떤 값을 입력해야 하는지 파악하기 위해 마케팅 예산 템플릿에 샘플 데이터를 채우는 코드로, 예상 자금 할당을 결정하는 데 도움이 됩니다. 이 값을 런타임에 동적으로 변경하면서 다양한 결과를 계산할 수 있습니다.

//Populate sample budget data
private void PopulateSampleData()
{
  //Rate Column
  //Row 5: Human Resources - Headcount
  rid[4, 1] = 5;
  //Row 7: Commission
  grid[6, 1] = string.Format("{0:0.00}", 0.1) + "%";
  //Row 11: Human Resources - Headcount
  grid[10, 1] = 3;
  //Row 13: Commission
  grid[12, 1] = string.Format("{0:0.00}", 0.1) + "%";
  //Row 17: Human Resources - Headcount
  grid[16, 1] = 1;
  //Row 32: Commissions
  //Row 33: Commission (% of Agent's Sales)
  grid[31, 1] = grid[32, 1] = string.Format("{0:0.00}", 10) + "%";
  //Row 39: Commission/Discounts (% of Distributors' Sales)
  grid[38, 1] = string.Format("{0:0.00}", 15) + "%";
  //Row 45: Commission/Discounts (% of Retail Sales)
  grid[44, 1] = string.Format("{0:0.00}", 10) + "%";

  //Row 3: Anticipated Sales
  grid[2, 2] = 750;
  grid[2, 3] = 200;
  grid[2, 4] = 500;
  grid[2, 5] = 1500;
  grid[2, 6] = 1200;
  grid[2, 7] = 1500;
  grid[2, 8] = 1500;
  grid[2, 9] = 1800;
  grid[2, 10] = 2000;
  grid[2, 11] = 2000;
  grid[2, 12] = 2000;
  grid[2, 13] = 2000;

  //Row 9: DIRECT MARKETING (% OF TOTAL SALES)
  grid[8, 2] = Convert.ToString(100) + "%";
  grid[8, 3] = Convert.ToString(100) + "%";
  grid[8, 4] = Convert.ToString(75) + "%";
  grid[8, 5] = Convert.ToString(40) + "%";
  grid[8, 6] = Convert.ToString(33) + "%";
  grid[8, 7] = Convert.ToString(25) + "%";
  grid[8, 8] = Convert.ToString(20) + "%";
  grid[8, 9] = Convert.ToString(10) + "%";
  grid[8, 10] = Convert.ToString(5) + "%";
  grid[8, 11] = Convert.ToString(5) + "%";
  grid[8, 12] = Convert.ToString(5) + "%";
  grid[8, 13] = Convert.ToString(5) + "%";

  //Row 10: Telemarketing (% of Direct Sales)
  for (int c = 2; c <= 13; c++)
  {
      if (c == 2)
          grid[9, c] = Convert.ToString(100) + "%";
      else
          grid[9, c] = Convert.ToString(50) + "%";
  }

  //Row 12: Infrastructure Support
  //Row 14: Training
  for (int c = 2; c <= 13; c++)
  {
      if (c % 2 == 0)
        grid[11, c] = grid[13, c] = 25;
      else
        grid[11, c] = grid[13, c] = 10;
  }

  //Row 16: Internet Marketing (% of Direct Sales)
  //Row 19: Hosting
  //Row 24: Material
  //Row 25: Postage
  //Row 28: AGENT/BROKER (% OF TOTAL SALES)
  //Row 29: Communication
  //Row 30: Training
  //Row 31: Promotions
  //Row 36: Communication
  //Row 37: Training
  //Row 38: Promotions
  //Row 42: Communication
  //Row 43: Training
  //Row 44: Promotions
  //Row 48: Human Resources
  //Row 49: Communications
  //Row 50: Promotions/Coupons
  //Row 53: Travel
  //Row 54: Infrastructure (computer, telephone, etc.)
  //Row 55: Channel Support
  for (int c = 2; c <= 13; c++)
  {
      grid[15, c] = Convert.ToString(25) + "%";
      grid[18, c] = 10;
      grid[23, c] = 1000;
      grid[24, c] = 250;
      grid[27, c] = Convert.ToString(10) + "%";
      grid[28, c] = grid[35, c] = grid[41, c] = grid[47, c] = grid[52, c] = 50;
      grid[29, c] = grid[36, c] = grid[42, c] = grid[48, c] = grid[53, c] = string.Format("{0:0.00}", 250);
      grid[30, c] = grid[37, c] = grid[43, c] = string.Format("{0:0.00}", 600);
      grid[49, c] = grid[54, c] = 600;
  }

  //Row 18: Website Development (one-time cost)
  grid[17, 2] = 500;

  //Row 20: Support & Maintenance
  grid[19, 2] = 25;
  grid[19, 12] = 25;

  //Row 35: DISTRIBUTORS (% OF TOTAL SALES)
  for (int c = 2; c <= 13; c++)
  {
      if (c <= 6)
        grid[34, c] = Convert.ToString(0) + "%";
      else if (c == 7)
        grid[34, c] = Convert.ToString(15) + "%";
      else if (c == 8)
        grid[34, c] = Convert.ToString(20) + "%";
      else
        grid[34, c] = Convert.ToString(40) + "%";
    }

    //Row 41: RETAILER (% OF TOTAL SALES)
    grid[40, 2] = Convert.ToString(0) + "%";
    grid[40, 3] = Convert.ToString(0) + "%";
    grid[40, 4] = Convert.ToString(25) + "%";
    grid[40, 5] = Convert.ToString(60) + "%";
    grid[40, 6] = Convert.ToString(67) + "%";
    grid[40, 7] = Convert.ToString(60) + "%";
    grid[40, 8] = Convert.ToString(60) + "%";
    grid[40, 9] = Convert.ToString(50) + "%";
    grid[40, 10] = Convert.ToString(30) + "%";
    grid[40, 11] = Convert.ToString(30) + "%";
    grid[40, 12] = Convert.ToString(30) + "%";
    grid[40, 13] = Convert.ToString(30) + "%";
}

다음에서는 위에 언급한 모든 단계를 수행한 후 채널 마케팅 예산 템플릿으로 디자인된 FlexGrid 컨트롤을 간단히 살펴보겠습니다.

마케팅 예산 템플릿 계산 실행

위에서 디자인한 채널 마케팅 예산 템플릿은 첫 번째 열과 처음 두 행을 고정함으로써 스크롤 가능한 영역과 불가능한 영역으로 나뉩니다. 여기에는 항상 표시되어야 하고 절대 편집해서는 안 될 고정 레이블 필드가 포함됩니다.

나아가 월로 나뉜 연도의 실제 비용 값이 포함된 스크롤 가능한 영역에는 세 가지 컬러 톤이 있습니다. 흰색 셀은 사용자가 계산을 위해 필수 값을 입력하는 입력 셀이고, 회색과 파란색 셀은 예산 할당을 평가하기 위해 이 템플릿에서 수행되는 모든 계산의 결과인 계산된 값을 나타내는 셀을 상징합니다.

이 섹션에서는 예산을 위한 자금 할당액을 계산하기 위해 모든 계산을 수행하는 방법을 정의합니다. 아래 방법은 각 마케팅 리소스에 할당된 금액, 월 지출 총액 그리고 1년 동안 각 리소스의 총비용을 계산합니다. 모든 계산에서는 기본 연산자를 사용하여 더하기, 빼기, 곱하기, 나누기를 수행했습니다.

C#에서 다양한 계산이 어떻게 구현되어 템플릿이 작동하도록 하고 셀을 적절한 값으로 채우는지 이해하려면 아래 코드를 참조하세요.

//Method to calculate budget
private async Task<bool> CalculateBudget()
{
  for (int c = 2; c <= 13; c++)
  {
      //Row 4: PERSONNEL (% OF TOTAL SALES)
      string sval1 = (string)grid[8, c];
      int val1 = Convert.ToInt32(sval1.Replace('%', ' '));
      string sval2 = (string)grid[27, c];
      int val2 = Convert.ToInt32(sval2.Replace('%', ' '));
      string sval3 = (string)grid[34, c];
      int val3 = Convert.ToInt32(sval3.Replace('%', ' '));
      string sval4 = (string)grid[40, c];
      int val4 = Convert.ToInt32(sval4.Replace('%', ' '));
      int resVal = val1 + val2 + val3 + val4;
      grid[3, c] = Convert.ToString(resVal) + "%";

      //Row 5: Human Resources - Headcount
      grid[4, c] = grid[4, 1];

      //Row 6: Human Resources - Cost
      int val5 = Convert.ToInt32(grid[4, 1]);
      int val6 = Convert.ToInt32(grid[4, c]);
      grid[5, c] = string.Format("{0:0.00}", val5 * val6);

      //Row 7: Commission
      int val7 = Convert.ToInt32(grid[2, c]);
      string sval8 = (string)grid[6, 1];
      double val8 = Convert.ToDouble(sval8.Replace('%', ' '));
      grid[6, c] = string.Format("{0:0.00}", (val7 * val8) / 100);

      //Row 8: Personnel Total $(000)
      double val9 = Convert.ToDouble(grid[5, c]);
      double val10 = Convert.ToDouble(grid[6, c]);
      grid[7, c] = string.Format("{0:0.00}", val9 + val10);

      //Row 11: Human Resources - Headcount
      int val11 = Convert.ToInt32(grid[10, 1]);
      string sval12 = (string)grid[9, c];
      int val12 = Convert.ToInt32(sval12.Replace('%', ' '));
      grid[10, c] = Convert.ToDouble(val11 * val12) / 100;

      //Row 13: Commission
      string sval13 = (string)grid[12, 1];
      double val13 = Convert.ToDouble(sval13.Replace('%', ' '));
      int val14 = Convert.ToInt32(grid[2, c]);
      string sval15 = (string)grid[8, c];
      int val15 = Convert.ToInt32(sval15.Replace('%', ' '));
      string sval16 = (string)grid[9, c];
      int val16 = Convert.ToInt32(sval16.Replace('%', ' '));
      grid[12, c] = string.Format("{0:0.00}", (decimal)(val13 * val14 * val15 * val16) / (100 * 100 * 100));

      //Row 15: Telemarketing Total $(000)
      double val17 = Convert.ToDouble(grid[10, c]);
      double val18 = Convert.ToDouble(grid[11, c]);
      double val19 = Convert.ToDouble(grid[12, c]);
      double val20 = Convert.ToDouble(grid[13, c]);
      grid[14, c] = string.Format("{0:0.00}", val17 + val18 + val19 + val20);

      //Row 17: Human Resources - Headcount
      int val21 = Convert.ToInt32(grid[16, 1]);
      string sval22 = (string)grid[15, c];
      int val22 = Convert.ToInt32(sval22.Replace('%', ' '));
      grid[16, c] = Convert.ToDouble(val21 * val22) / 100;

      //Row 21: Internet Marketing Total $(000)
      double val23 = Convert.ToDouble(grid[16, c]);
      double val24 = Convert.ToDouble(grid[17, c]);
      double val25 = Convert.ToDouble(grid[18, c]);
      double val26 = Convert.ToDouble(grid[19, c]);
      grid[20, c] = string.Format("{0:0.00}", val23 + val24 + val25 + val26);

      //Row 26: Direct email total $ (000)
      double val27 = Convert.ToDouble(grid[22, c]);
      double val28 = Convert.ToDouble(grid[23, c]);
      double val29 = Convert.ToDouble(grid[24, c]);
      grid[25, c] = string.Format("{0:0.00}", val27 + val28 + val29);

      //Row 27: Direct Marketing Total $(000)
      double val30 = Convert.ToDouble(grid[14, c]);
      double val31 = Convert.ToDouble(grid[20, c]);
      double val32 = Convert.ToDouble(grid[25, c]);
      grid[26, c] = string.Format("{0:0.00}", val30 + val31 + val32);

      //Row 32: Discounts
      string sval33 = (string)grid[31, 1];
      double val33 = Convert.ToDouble(sval33.Replace('%', ' '));
      int val34 = Convert.ToInt32(grid[2, c]);
      string sval35 = (string)grid[27, c];
      int val35 = Convert.ToInt32(sval35.Replace('%', ' '));
      grid[31, c] = string.Format("{0:0.00}", (decimal)(val33 * val34 * val35) / (100 * 100));

      //Row 33: Commission (% of Agent's Sales)
      string sval36 = (string)grid[32, 1];
      double val36 = Convert.ToDouble(sval36.Replace('%', ' '));
      grid[32, c] = string.Format("{0:0.00}", (decimal)(val34 * val35 * val36) / (100 * 100));

      //Row 34: Agent/Broker Total $(000)
      double val37 = Convert.ToDouble(grid[28, c]);
      double val38 = Convert.ToDouble(grid[29, c]);
      double val39 = Convert.ToDouble(grid[30, c]);
      double val40 = Convert.ToDouble(grid[31, c]);
      double val41 = Convert.ToDouble(grid[32, c]);
      grid[33, c] = string.Format("{0:0.00}", val37 + val38 + val39 + val40 + val41);

      //Row 39: Commission/Discounts (% of Distributors' Sales)
      string sval42 = (string)grid[38, 1];
      double val42 = Convert.ToDouble(sval42.Replace('%', ' '));
      string sval43 = (string)grid[34, c];
      int val43 = Convert.ToInt32(sval43.Replace('%', ' '));
      grid[38, c] = (decimal)(val34 * val42 * val43) / (100 * 100);

      //Row 40: Distributor Total $(000)
      double val44 = Convert.ToDouble(grid[35, c]);
      double val45 = Convert.ToDouble(grid[36, c]);
      double val46 = Convert.ToDouble(grid[37, c]);
      double val47 = Convert.ToDouble(grid[38, c]);
      grid[39, c] = string.Format("{0:0.00}", val44 + val45 + val46 + val47);

      //Row 45: Commission/Discounts (% of Retail Sales)
      string sval48 = (string)grid[44, 1];
      double val48 = Convert.ToDouble(sval48.Replace('%', ' '));
      string sval49 = (string)grid[40, c];
      int val49 = Convert.ToInt32(sval49.Replace('%', ' '));
      grid[44, c] = (decimal)(val34 * val48 * val49) / (100 * 100);

      //Row 46: Retailer Total $(000)
      double val50 = Convert.ToDouble(grid[41, c]);
      double val51 = Convert.ToDouble(grid[42, c]);
      double val52 = Convert.ToDouble(grid[43, c]);
      double val53 = Convert.ToDouble(grid[44, c]);
      grid[45, c] = string.Format("{0:0.00}", val50 + val51 + val52 + val53);
.
      //Row 51: CAR Total $(000)
      double val54 = Convert.ToDouble(grid[47, c]);
      double val55 = Convert.ToDouble(grid[48, c]);
      double val56 = Convert.ToDouble(grid[49, c]);
      grid[50, c] = string.Format("{0:0.00}", val54 + val55 + val56);

      //Row 56: Other Expenses Total $(000)
      double val57 = Convert.ToDouble(grid[52, c]);
      double val58 = Convert.ToDouble(grid[53, c]);
      double val59 = Convert.ToDouble(grid[54, c]);
      grid[55, c] = string.Format("{0:0.00}", val57 + val58 + val59);

      //Row 58: TOTAL MARKETING BUDGET:
      double val60 = Convert.ToDouble(grid[7, c]);
      double val61 = Convert.ToDouble(grid[26, c]);
      double val62 = Convert.ToDouble(grid[33, c]);
      double val63 = Convert.ToDouble(grid[39, c]);
      double val64 = Convert.ToDouble(grid[45, c]);
      double val65 = Convert.ToDouble(grid[50, c]);
      double val66 = Convert.ToDouble(grid[55, c]);
      grid[57, c] = string.Format("{0:0,0.00}", val60 + val61 + val62 + val63 + val64 + val65 + val66);
  }

  //Total Column
  for (int r = 2; r < 58; r++)
  {
      if (r != 3 && r != 4 && r != 8 && r != 9 && r != 15 && r != 21 && r != 27 && r != 34 && r != 40
            && r != 46 && r != 51 && r != 56)
      {
          double rtotal = 0;
          for (int c = 2; c <= 13; c++)
          {
              rtotal = rtotal + Convert.ToDouble(grid[r, c]);
          }

          if (r != 2)
              grid[r, 15] = string.Format("{0:0,0.00}", rtotal);
          else
              grid[r, 15] = rtotal;
      }
  }

  return true;
}

UI 상호 작용 사용자 정의

채널 마케팅 예산 템플릿은 FlexGrid를 사용하여 작성되었으므로, FlexGrid의 편집 및 선택과 관련된 기본 동작은 예산 템플릿의 동작에 맞게 처리되어야 합니다. 이 섹션에서는 사용자 상호 작용 동작을 변경하기 위해 처리해야 하는 전체 FlexGrid 이벤트에 대해 설명합니다.

먼저 사용자가 템플릿에 대한 입력 값(예: 요율 또는 기타 비용 유형)을 변경할 때마다 템플릿이 모든 값을 다시 계산하도록 FlexGrid의 CellEditEnded 이벤트를 처리해야 합니다.

아래 코드는 앞에서 언급한 동작을 구현합니다.

//Handle FlexGrid's CellEditEnded event to recalculate budget after a cell value is edited
public async void OnCellEditEnded(object sender, GridCellRangeEventArgs e)
{
  //Add percentage sign to Rate column
  if (e.CellRange.Column == 1)
  {
      if (e.CellRange.Row == 6 || e.CellRange.Row == 12 || e.CellRange.Row == 31
        || e.CellRange.Row == 32 || e.CellRange.Row == 38 || e.CellRange.Row == 44)
      {
        if ((string)grid[e.CellRange.Row, e.CellRange.Column] != "")
        {
            string cellVal = (string)grid[e.CellRange.Row, e.CellRange.Column];
            if (!(cellVal.Contains('%')))
                grid[e.CellRange.Row, e.CellRange.Column] = string.Format("{0:0.00}", Convert.ToDouble(cellVal)) + "%";
            else
                grid[e.CellRange.Row, e.CellRange.Column] = string.Format("{0:0.00}", cellVal);
          }
      }
  }

  //Format cell values with percentage sign
  if (e.CellRange.Column >= 2 && e.CellRange.Column <= 13)
  {
      if (e.CellRange.Row == 8 || e.CellRange.Row == 9 || e.CellRange.Row == 15 || e.CellRange.Row == 27 || e.CellRange.Row == 34 || e.CellRange.Row == 40)

          if ((string)grid[e.CellRange.Row, e.CellRange.Column] != "")
          {
              string cellVal = (string)grid[e.CellRange.Row, e.CellRange.Column];
              if (!(cellVal.Contains('%')))
                  grid[e.CellRange.Row, e.CellRange.Column] = cellVal + "%";
          }
          else
          {
              grid[e.CellRange.Row, e.CellRange.Column] = Convert.ToString(0) + "%";
          }
      }

      //Format cell values with two decimal places
      if (e.CellRange.Row == 29 || e.CellRange.Row == 30 || e.CellRange.Row == 36 || e.CellRange.Row == 37 || e.CellRange.Row == 42 || e.CellRange.Row == 48
          || e.CellRange.Row == 53)
      {
          if ((string)grid[e.CellRange.Row, e.CellRange.Column] != "")
          {
              string cellVal = (string)grid[e.CellRange.Row, e.CellRange.Column];              
              grid[e.CellRange.Row, e.CellRange.Column] = string.Format("{0:0.00}", Convert.ToDouble(cellVal));
          }
      }
  }

  //Invoke method to reclaculate budget based on new values.
  await CalculateBudget();
}

다음으로 FlexGrid에서 편집을 제한하기 위해 FlexGrid의 BeginningEdit 이벤트를 처리합니다. 위에서 설명한 것처럼 FlexGrid의 모든 셀은 편집할 수 없어야 합니다. 사용자는 사용자의 입력 값이 필요한 셀만 편집할 수 있어야 합니다.

따라서 아래 코드는 언급한 동작을 구현하기 위해 BeginningEdit 이벤트를 처리합니다.

//Handle Flexgrid's BeginningEdit event to cancel editing for labels and calculated cells.
public void OnBeginningEdit(object sender, GridCellRangeEventArgs e)
{
  if (e.CellRange.Column >= 2 && e.CellRange.Column <= 13)
  {
    if ((e.CellRange.Row >= 3 && e.CellRange.Row <= 7) || e.CellRange.Row == 10 || e.CellRange.Row == 12 || e.CellRange.Row == 14
      || e.CellRange.Row == 16 || e.CellRange.Row == 20 || e.CellRange.Row == 25 || e.CellRange.Row == 26 || e.CellRange.Row == 16
      || (e.CellRange.Row >= 31 && e.CellRange.Row <= 33) || e.CellRange.Row == 38 || e.CellRange.Row == 39 || (e.CellRange.Row >= 44 && e.CellRange.Row <= 46)
      || e.CellRange.Row == 50 || e.CellRange.Row == 51 || e.CellRange.Row == 55 || (e.CellRange.Row >= 56 && e.CellRange.Row <= 58))

        e.Cancel = true;
  }

  if (e.CellRange.Column == 1)
  {
    if (e.CellRange.Row != 4 && e.CellRange.Row != 6 && e.CellRange.Row != 10 && e.CellRange.Row != 12 && e.CellRange.Row != 16 && e.CellRange.Row != 31
        && e.CellRange.Row != 32 && e.CellRange.Row != 38 && e.CellRange.Row != 44)
    {
          e.Cancel = true;
    }
  }
}

마지막으로 FlexGrid의 SelectionChanging 이벤트를 처리하여 사용자가 FlexGrid에서 편집 가능한 셀만 선택할 수 있도록 합니다.

//Handle Flexgrid's SelectionChanging event to disable selection of non editable cells.
public void OnSelectionChanging(object sender, GridCellRangeEventArgs e)
{
  if (e.CellRange.Column == 0 || e.CellRange.Column == 14 || e.CellRange.Column == 15 || e.CellRange.Row == 0 || e.CellRange.Row == 1)
  {
      e.Cancel = true;
  }

  if (e.CellRange.Column >= 2 && e.CellRange.Column <= 13)
  {
      if ((e.CellRange.Row >= 3 && e.CellRange.Row <= 7) || e.CellRange.Row == 10 || e.CellRange.Row == 12 || e.CellRange.Row == 14
          || e.CellRange.Row == 16 || e.CellRange.Row == 20 || e.CellRange.Row == 25 || e.CellRange.Row == 26 || e.CellRange.Row == 16
          || (e.CellRange.Row >= 31 && e.CellRange.Row <= 33) || e.CellRange.Row == 38 || e.CellRange.Row == 39 || (e.CellRange.Row >= 44 && e.CellRange.Row <= 46)
          || e.CellRange.Row == 50 || e.CellRange.Row == 51 || e.CellRange.Row == 55 || (e.CellRange.Row >= 56 && e.CellRange.Row <= 58))

      e.Cancel = true;
  }

  if (e.CellRange.Column == 1)
  {
      if (e.CellRange.Row != 4 && e.CellRange.Row != 6 && e.CellRange.Row != 10 && e.CellRange.Row != 12 && e.CellRange.Row != 16 && e.CellRange.Row != 31
          && e.CellRange.Row != 32 && e.CellRange.Row != 38 && e.CellRange.Row != 44)
      {
          e.Cancel = true;
      }
  }
}

위에 정의한 모든 메서드는 템플릿을 렌더링하고 계산을 수행하기 위한 AfterRender 메서드를 재정의하여 호출해야 합니다. 다음은 동일한 내용을 나타내는 샘플 코드입니다.

아래 코드는 레이블 필드를 고정하고 사용자가 스크롤 막대를 사용하여 예산 타임라인을 탐색하도록 하기 위해 처음 몇 개의 행과 열을 고정하는 것을 확인할 수 있습니다.

//Override AfterRender method to fill unbound grid with budget template fields, sample data and results
protected override void OnAfterRender(bool firstRender)
{
  if (firstRender)
  {
      //Fix first three rows at top
      grid.FrozenRows = 3;
      //Fix first column to left
      grid.FrozenColumns = 1;

      //Populate Labels
      PopulateLabels();

      //Populate Sample Data
      PopulateSampleData();

      //Invoke method to calculate budget
      CalculateBudget();
  }
}

투자 계산기가 작동하는 모습을 확인하세요.

계산기