[INFO REQ] How to add empty summary

[Highnoon]

Hi,

i'm looking for a way to add an empty summary to scheduler. I need it to draw my own things in it.
This works:

            summary: {
                renderer: function (e) {
                    return "";
                }
            }
        }, //features

But this is slow because renderer function is called a few hundred times.

            summary: true

and

            summary: {
                disabled: true /*false*/
            }        

Will result in a runtime error. Is there an easy way to do this?

Thanks

[mats]

Not sure exactly what you want. Maybe you can just add a simple Footer or 'bbar' and put your content there?

[Highnoon]

I take 'b-grid-footer b-sch-timeaxiscolumn' and add elements for each day.

download/file.php?mode=view&id=11280

[fabio.mazza]

Hi Hignoon,

Please take a look: https://www.bryntum.com/docs/scheduler/#Grid/view/Footer and https://www.bryntum.com/docs/scheduler/#Core/widget/Panel#config-bbar

[Highnoon]

Hi,

thank you. But I need a component which is connected to your grid. So I did a copy of your summary and append it to scheduler.

var footer = document.getElementsByClassName("b-grid-footer-container");

var newDiv = document.createElement("div");
newDiv.setAttribute("class", "b-grid-footer-scroller b-grid-footer-scroller-locked b-widget b-bar b-footer");
newDiv.id = "b-footer-9";
newDiv.style.width = "130px";

footer[0].appendChild(newDiv);

var newDiv2 = document.createElement("div");
newDiv2.setAttribute("class", "b-grid-footers b-grid-footers-locked b-widget-scroller b-hide-scroll");
//newDiv2.style.msOverFlowX = "auto";
newDiv2.setAttribute("style", "-ms-overflow-x: auto;")
newDiv2.setAttribute("data-region", "locked");
newDiv2.setAttribute("data-owner-cmp", "b-footer-9");

newDiv.appendChild(newDiv2);

var newDiv3 = document.createElement("div");
newDiv3.setAttribute("class", "b-grid-footer ");
newDiv3.style.minWidth = "60px";
newDiv3.style.flexBasis = "calc(10em - 12px)";
newDiv3.setAttribute("data-column-id", "magrname1");
newDiv3.setAttribute("data-column", "magrname");
newDiv3.setAttribute("data-all-index", "0");

newDiv2.appendChild(newDiv3);

var newDiv4 = document.createElement("div");
newDiv4.setAttribute("class", "b-grid-footer-scroller b-grid-footer-scroller-normal b-widget b-bar b-footer b-overflowing");
newDiv4.id = "b-footer-10";
newDiv4.style.flex = "1 1 0px";

footer[0].appendChild(newDiv4);

var newDiv5 = document.createElement("div");
newDiv5.setAttribute("class", "b-grid-footers b-grid-footers-normal b-widget-scroller b-hide-scroll");
//newDiv5.style.msOverFlowX = "auto";
newDiv5.setAttribute("style", "-ms-overflow-x: auto;")
newDiv5.setAttribute("data-region", "normal");
newDiv5.setAttribute("data-owner-cmp", "b-footer-10");

newDiv4.appendChild(newDiv5);

var newDiv6 = document.createElement("div");
newDiv6.setAttribute("class", "b-grid-footer b-sch-timeaxiscolumn");
newDiv6.style.minWidth = "60px";
newDiv6.style.flexBasis = "calc(1776px - 0px)";
newDiv6.setAttribute("data-column-id", "col2");
newDiv6.setAttribute("data-column", "_timeAxis2");
newDiv6.setAttribute("data-all-index", "1");

newDiv5.appendChild(newDiv6);

HTML is absolutely similar to adding the summary with a config. Now it is much faster because renderers are not called. Everything looks nice but how to get connection to horizontal scrolling and the splitter for resizing resource column?
I expected that this is done with css styles?

[pmiklashevich]

Hello,

I see no Bryntum code involved in your question. You're developing a new feature and we cannot help you with your code in scope of the forums support. Please consider our paid services: https://www.bryntum.com/services/

Note, we highly recommend to avoid using bryntum css classes ("b-" like) in your custom solutions.

If you try to explain what problem you're solving, what data you're trying to render per tick, maybe we could help you to build a small example. Could you please prepare a small runnable testcase with all required data and describe with screenshots how you'd like to display it? The best option is to apply minimal changes to one of our demos.

Based on the screenshot you applied above, maybe Histogram summary demo shows what you need: https://www.bryntum.com/examples/scheduler/histogramsummary/

Renderer has all the required information to extract any data:

• start/end of the tick
• event/resource stores
• events that intersect with the start/end dates
• element which represents the bar for the tick
  renderer : ({startDate, endDate, eventStore, resourceStore, events, element})
  

  https://www.bryntum.com/docs/scheduler/#Scheduler/feature/Summary#config-renderer

Best,
Pavel

[Highnoon]

Hi Pavel,

yes histogram summary could do the job but it is much to slow because the renderer is called for every cell or even more. I want to display a histogram for one resource for the whole time range. I found a good way to do this. A click on resource row delivers the data and renders it in a separate grid. This second grid is a copy of your summary bar. It works and the one thing missing is the connection to scroller and the splitter for resource column size. Is there no way? It should be possible. Or maybe you have a different idea?

Thanks

[pmiklashevich]

We have a concept of partnered timelines. You can see how it works here: https://www.bryntum.com/examples/scheduler/partners/
Please see the config: https://www.bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-partner

yes histogram summary could do the job but it is much to slow because the renderer is called for every cell or even more.

We will try to improve Summary feature performance in the future releases. Here is the ticket: https://github.com/bryntum/support/issues/1590

Thanks for your feedback!