SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI(AD)

CalendarGridとMultiRowを組み合せてカレンダーの表示を拡張する

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI 第5回

  • このエントリーをはてなブックマークに追加

MultiRowと連携した表示形式の切り分け(1)

切り分けの概要

 カレンダー形式でデータを表示するアプリケーションで、データの編集内容によってはカレンダー形式より、グリッドで表示した方が良い場合もあります。例えば、1か月の予定を確認する場合はカレンダー形式で表示して、予定を担当者毎に分けて見たい場合は、グリッド形式で表示するなどです。

1か月の予定を見たい場合はカレンダー形式で
1か月の予定を見たい場合はカレンダー形式で
担当者毎に表示したい場合はグリッド形式で
担当者毎に表示したい場合はグリッド形式で

データ表示用のクラス

CalendarData

 CalendarGridにデータを表示するためのクラスCalendarDataを用意します。

CalendarGrid用クラス
/// <summary>
/// カレンダーの一日のデータを表すクラス
/// カレンダー表示用にゲッターを用意
/// </summary>
public class CalendarData
{
    /// <summary>
    /// 日付
    /// </summary>
    public DateTime date { set; get; }

    /// <summary>
    /// その日の打ち合わせ担当者リスト
    /// </summary>
    public List<Person> personList { get; set; }

    /// <summary>
    /// 担当者の名前を返す
    /// </summary>
    public string name1 { get { if (personList.Count > 0) { return personList[0].name; } else return ""; } }
    public string name2 { get { if (personList.Count > 1) { return personList[1].name; } else return ""; } }
    public string name3 { get { if (personList.Count > 2) { return personList[2].name; } else return ""; } }
}

 日付に対して複数の担当者が紐づきます。

 最後のname1、name2、name3はCalendarGridのセルに紐づけるためのフィールドです。

MultiRowData

 MultiRowにデータを表示するためのクラスMultiRowDataクラスは以下です。

MultiRow用クラス
/// <summary>
/// グリッド表示用のデータ
/// </summary>
public class MultiRowData
{
    /// <summary>
    /// 名前
    /// Personクラスのnameプロパティを返す
    /// </summary>
    public string name { get { return person.name} }

    public Person person { get;  set; }

    public List<DateTime> dateTimeList { get; set; }

    /// <summary>
    /// 日付を整形して返す
    /// </summary>
    public string date1 { get { if (dateTimeList.Count > 0) { return dateTimeList[0].ToString("yyyy/MM/dd"); } else return ""; } }
    public string date2 { get { if (dateTimeList.Count > 1) { return dateTimeList[1].ToString("yyyy/MM/dd"); } else return ""; } }
    public string date3 { get { if (dateTimeList.Count > 2) { return dateTimeList[2].ToString("yyyy/MM/dd"); } else return ""; } }
}

Person

 担当者を表すPersonクラスです。フィールドをnameしか持たないクラスですが、実際はそれ以外にもフィールドを持っているという想定です。

Personクラス
/// <summary>
/// 担当者を表すクラス
/// </summary>
public class Person
{
    /// <summary>
    /// 名前
    /// </summary>
    public string name { get; set; }
}

カレンダーに表示する

CalendarData形式のデータを用意

 まずはCalendarGridに表示するためのCalendarData形式のデータを用意します。

CalendarData形式のデータ
// データを用意
List<CalendarData> dataList = new List<CalendarData>();

CalendarData data = new CalendarData() { date = new DateTime(2017, 1, 5)};
data.personList = new List<Person>();
data.personList.Add(new Person() { name = "山田" });
data.personList.Add(new Person() { name = "佐藤" });

dataList.Add(data);

CalendarData data2 = new CalendarData() { date = new DateTime(2017, 1, 6)};
data2.personList = new List<Person>();
data2.personList.Add(new Person() { name = "田中" });
data2.personList.Add(new Person() { name = "西村" });
data2.personList.Add(new Person() { name = "佐藤" });

dataList.Add(data2);

CalendarData data3 = new CalendarData() { date = new DateTime(2017, 1, 7) };
data3.personList = new List<Person>();
data3.personList.Add(new Person() { name = "山田" });
data3.personList.Add(new Person() { name = "川上" });
data3.personList.Add(new Person() { name = "田中" });

dataList.Add(data3);
// データを用意ここまで

CalendarGridに紐づける

 gcCalendarGrid1というName属性を持つCalendarGridコンポーネントが画面に配置されている場合に、上記のデータを表示するコードは以下です。

CalendarGridに紐づける
gcCalendarGrid1.DataSource = dataList;

// dateプロパティをカレンダーの日付に紐づける
gcCalendarGrid1.DateField = "date";

// テンプレートにリストの項目を紐づける
var template = gcCalendarGrid1.Template;

template.Content[1, 0].DataField = "name1";
template.Content[2, 0].DataField = "name2";
template.Content[3, 0].DataField = "name3";

gcCalendarGrid1.Template = template;

gcCalendarGrid1.FirstDateInView = new DateTime(2017, 1, 1);

// 編集の終了を通知
gcCalendarGrid1.EndEdit();

 CalendarGridのDataSourceにデータのリストを代入します。

 カレンダーに表示する日付のフィールドをCalendarGridのDataFiledに指定し、表示する担当者名をCalendarGridのTemplateのDataFieldに指定します。

 最後にEndEditで編集の終了を通知することを忘れないでください。

次のページ
MultiRowと連携した表示形式の切り分け(2)

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
顧客と開発者の生産性を格段に向上させる、業務システムの画面UI連載記事一覧

もっと読む

この記事の著者

西村 誠(ニシムラ マコト)

 Microsoft MVP Windows Platform Development。 Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。 ブログ:眠るシーラカンスと水底のプログラマー 著書:基礎から学ぶ Windowsストアアプリ開発

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9939 2017/02/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング