Integration of TreeGrid

Answered
0
0

Hi,

I try to integrate this control http://www.treegrid.com/Doc/DataCommunication.htm into a widget class but I’m a bit lost on how to do that. I read the blogs about integration but the whole integration is still a bit of a mystery to me.

I have copy/pasted the following code together. When I place the widget in a page it comes up with the message ‘object does not support property or method ‘TreeGrid’:

public class GanttWidget : Widget
{
/// <summary>
/// Overridden to return our list of script resources.
/// </summary>
[Browsable(false)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
public override List<Package> Packages
{
get
{
if (base.Packages.Count == 0)
{
// initialize the loader with the required libraries.

base.Packages.AddRange(new Package[] {
new Package() {
Name = “jquery.min.js”,
Source = “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”},
new Package() {
Name = “GridE.js”,
Source = “Scripts/Timeline/GridE.js”}
});
}
return base.Packages;
}
}

/// <summary>
/// Overridden to create our initialization script.
/// </summary>
[Browsable(false)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
public override string InitScript
{
get { return BuildInitScript(); }
set { }
}

private string BuildInitScript()
{
dynamic options = new DynamicObject();

var script = $@”this.init = function(options) {{
var me = this;
$(this.container).TreeGrid(“”<treegrid Layout_Url=’TimelineConfig.txt’ Data_Url=’TimelineData.txt’></treegrid>””,””id_3_container””);
}};
“;

script = script.Replace(“$options”, options.ToString());
return script;
}

//private string BuildInitScript()
//{
//    dynamic options = new DynamicObject();

//    var script = $@”this.init = function(options) {{
//  var me = this;
//   $(this.container).TreeGrid({{
//        Layout: “”{{Url:\””TimelineConfig.txt\””}}””,
//        Data: “”{{Url:\””TimelineData.txt\””}}””,
//        “”Main””}});
//        }};
//    “;

//    script = script.Replace(“$options”, options.ToString());
//    return script;
//}
}

Thanks for your help.

Regards
Rudy

  • You must to post comments
Best Answer
0
0

Hi Rudy,

it´s a bit beyond the scope of Wisej but here´s a possible solution anyways:

initscript2

For simplification I turned the creation method of the TreeGrid into synchronously.  (could also be solved with a callback)
Then you can acquire the grid handle and use it for the reload method.

Hope that helps.

Best regards
Frank

  • Rudy
    • Rudy
    • Mar 22, 2018 - 11:15 pm
    Hi Frank, I really appreciate your excellent support as I just started learning java scripts for this project. Best regards – Rudy
  • You must to post comments
0
0

Hi Frank,

thanks so much, I got the initial load working.

Just one other thing:

I added a reloadGantt() function that I trigger via a button in the page. The script seems to run correctly but it cannot find the ‘Reload’ function from the GridE.js package: http://www.treegrid.com/Doc/Create.htm#Reload . It comes up with an application error ‘Reload is not defined’.

Anything I have to declare additionally for the reload?

(project attached)

Best Regards
Rudy

  • You must to post comments
0
0

Hi Rudy,

you´ve been pretty close. We have just applied a few modifications to your code to make it work:

treegrid

  • Renamed folder resources to Scripts
  • Changed GridE.js to EmbeddedResource
  • Changed to work with GanttSimpleData and GanttSimpleDef (maybe there is an issue with your other xml but that´s beyond this scope)

For GantWidget.cs we did the following:

initscript

  • In design mode we only want to show a static text
  • We simply call TreeGrid() and provide the container in the last parameter
  • We needed to supply the BasePath (beware of the ending /) which was required by the library to locate styles etc.
  • dataUrl and layoutUrl are now provided by the server, i.e. your Wisej app:

Here you can handle the WebRequest and provide whatever data you want (we took your sample data):

webrequest

That´s it. Simple and straightforward integration with Wisej.

Best regards
Frank

  • You must to post comments
0
0

Hi Frank,

the treeGrid contains a Gantt Control that I need to use in my project. I declared [assembly: WisejResources] in the AssemblyInfo.cs and put all required files & folders into the Resources folder. It still comes up with the same message.

What I try to achieve is a widget that I can drop into a form and then get the layout and data from a database to populate the gantt in e.g. the load event of the form or if the user changes the selection criteria.

I have attached two projects:

  • WebPageGridETest.zip is a VS2017 solution that I try to get working
  • HtmlGridETest.zip is a brackets project that I used to verify if the control works

Best Regards
Rudy

  • You must to post comments
0
0

Hi Rudy,

did you include GridE.js as embedded resource and also enabled the WisejResources attribute ?
See: https://wisej.com/docs/html/EmbeddedResources.htm

Please note that the build in DataGridView of Wisej also supports hierarchical rows.

Hope that helps.

Best regards
Frank

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.