1. Ganttův graf - volba projektu

    Článek: AN0002480Aktualizováno:: 08.10.2023

    Ganttův graf zobrazuje data ze třídy obsahující činnosti, které probíhají v určitých časových úsecích a navazují na sebe. Každá činnost patří do určitého celku, projektu. V Ganttově grafu pak zobrazíme vždy činnosti týkající se určitého projektu. Projekt, jehož činnosti chceme zobrazit, můžeme určit několika způsoby.

    1. Definice přímo ve webpartu
    2. Určení projektu proměnnou v URL
    3. Určení projektu pomocí voliče projektu (combobox)

    Definice projektu ve webpartu

    Projekt je určen nastavením vlastnosti Id projektu. Tuto volbu použijte, pokud jste vytvořili stránku určenou přímo pro daný projekt a nepotřebujete tedy přepínat mezi projekty.

    Definice projektu proměnnou v URL

    V definici webpartu definujte název proměnné ve vlastnosti Název řídícího parametru v URL. Pokud v URL uvedete danou proměnnou s Id projektu, zobrazí Gantt činnosti týkající se tohoto projektu.

    Příklad:

    https://develop.objectgears.cz/WebContentPage.aspx?Id=64&gantt1=25

    URL obsahuje parametr gannt1 s hodnotou 25. Ve webpartu na dané stránce je třeba mít ve vlastnosti Název řídícího parametru v URL uvedeno gantt1. Ganttův graf pak zobrazí činnosti vztahující se k projektu Id 25.

    Toto nastavení můžete použít, pokud budete chtít volat danou stránku ze seznamu projektů, kdy tlačítko u každého projektu bude do URL vkládat Id daného projektu.

    Definice projektu pomocí voliče projektu (combobox)

    U obecné stránky, která se má použít pro více projektů, budete nejspíše chtít umožnit uživateli zvolit projekt, pro který se má Ganttův graf zobrazit, a dále mezi projekty pomocí voliče přepínat.

    Volič záznamů můžete definovat na stránce nebo ve webpartu skript.

    Definice voliče projektu na stránce

    Na záložce Skripty v detailu stránky definujeme ovládací prvek combobox a záznamy, které obsahuje.

    function OnLoad()
    {
      var projectsV = OGControls['projects'];
      projectsV.ClientIDMode = System.Web.UI.ClientIDMode.Static;

      projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("", "-"));
      projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("Projekt 26", "26"));
      projectsV.Items.Add(new System.Web.UI.WebControls.ListItem("Projekt 25", "25"));
    }

    Do stránky dále vložíme webpart Skript, který bude reagovat na výběr hodnoty v comboboxu. Skript ze záložky JavaScript nastaví projekt v Ganntově grafu s Názvem řídícího elementu gannt1.

    <div id=""gg{WebPart.Id}"" class=""og-gantt"" wpid=""{WebPart.Id}"" projectId=""{projectId}""></div>
    <script type=""text/javascript"">
      $(function()
      {{ 
          $('#projects').change(function() {
              var value = $( "#projects" ).val();
             var ggElement = $('li.gantt1 div.og-gantt');
             ggElement.attr('projectId', value);
             ggElement.ganttGraph();
          });
      }});
    </script>";

    Definice voliče projektu ve webpartu Skript

    Volič záznamů můžete definovat také webpartem Skript. Skript ze záložky Skript načte do comboboxu záznamy ze třídy project modelu it.

    function OnLoad()
    {
      var cl = OG.Model.GetByCode('it').ClassDefs['project'];
      var f = OG.DataRow.GetDataRowFilter(cl.Id);
      f.Filter_OnlyActive = true;

      var drl = OG.DataRow.GetDataByFilter(f);
      
      var html = '';   for (var i = 0; i < drl.Count; ++i)   {     var dr = drl[i];     html += '' + dr.Id + ' - ' + dr.ShortDescriptionOrFullId + '';   }   html += '';
     

      var l = OGForm.CreateOGLabel('l1', html);
      OGForm.AddControl(l);
    }

    Reakce na volbu v comboboxu zajistí opět Skript na záložce JavaScript, který nastaví webpart s Ganttem s Názvem řídícího elementu gantt1.

    <div id=""gg{WebPart.Id}"" class=""og-gantt"" wpid=""{WebPart.Id}"" projectId=""{projectId}""></div>
    <script type=""text/javascript"">
      $(function()
      {{ 
          $('#projectsX').change(function() {
              var value = $( "#projectsX" ).val();
             var ggElement = $('li.gantt1 div.og-gantt');
             ggElement.attr('projectId', value);
             ggElement.ganttGraph();
          });
      }});
    </script>";

×