This is a migrated thread and some comments may be shown as answers.
Hierac
2 Answers 11 Views
This is a migrated thread and some comments may be shown as answers.
marksist
Top achievements
Rank 1
marksist asked on 13 Aug 2020, 02:14 PM

Hi,

I use kendo diagram. There is a problem about HierarchicalDataSource that does not make a request to API to update of itself.

There is an example of the code on the below;


$transport = new \Kendo\Data\DataSourceTransport();
 
$create = new \Kendo\Data\DataSourceTransportCreate();
 
$create->url('/Api/Json/Security/Create?_token='.csrf_token())
    ->contentType('application/json')
    ->dataType("JSONP")
    ->type('POST');
 
$read = new \Kendo\Data\DataSourceTransportRead();
 
$read->url('/Api/Json/Security/Read?_token='.csrf_token())
    ->contentType('application/json')
    ->dataType("JSONP")
    ->type('POST');
 
$update = new \Kendo\Data\DataSourceTransportUpdate();
 
$update->url('/Api/Json/Security/Update?_token='.csrf_token())
    ->contentType('application/json')
    ->dataType("JSONP")
    ->type('POST');
 
$destroy = new \Kendo\Data\DataSourceTransportDestroy();
 
$destroy->url('/Api/Json/Security/Delete?_token='.csrf_token())
    ->contentType('application/json')
    ->dataType("JSONP")
    ->type('POST');
 
$transport->create($create)
    ->read($read)
    ->update($update)
    ->destroy($destroy)
    ->parameterMap('function(data) {
      return kendo.stringify(data);
  }');
 
$model = new \Kendo\Data\HierarchicalDataSourceSchemaModel();
$model->id("Id")
    ->addField("Title")
    ->addField("Type")
    ->addField("ParentId")
    ->children("items");
 
$schema = new \Kendo\Data\HierarchicalDataSourceSchema();
$schema->model($model);
 
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->transport($transport)
    ->requestEnd('reDesign')
    ->batch(true)
    ->schema($schema);
 
$layout = new \Kendo\Dataviz\UI\DiagramLayout();
$layout->type('tree')
    ->subtype('down')
    ->horizontalSeparation(100)
    ->verticalSeparation(50);
 
 
$shapeContent = new \Kendo\Dataviz\UI\DiagramShapeDefaultsContent();
 
 
$shape_defaults = new \Kendo\Dataviz\UI\DiagramShapeDefaults();
$shape_defaults->visual(new \Kendo\JavaScriptFunction('visualTemplate'))
    ->content($shapeContent);
 
$stroke = new \Kendo\Dataviz\UI\DiagramConnectionDefaultsStroke();
$stroke->color('#586477')
    ->width(2);
 
$connection_defaults = new \Kendo\Dataviz\UI\DiagramConnectionDefaults();
$connection_defaults->stroke($stroke)
    ->selectable(false);
 
$diagram = new \Kendo\Dataviz\UI\Diagram('diagram');
$diagram->dataSource($dataSource)
    //->connectionsDataSource()
    ->layout($layout)
    ->editable(array("drag" => false, "resize" => false,
        "tools" => (array) array(
            array("name" => "createShape"),
            array("name" => "edit"),
            array("name" => "delete"),
            array("type" => "button", "text" => "Resim", "click" => new \Kendo\JavaScriptFunction('function(e) { exportImg() }')),
            array("type" => "button", "text" => "PDF", "click" => new \Kendo\JavaScriptFunction('function(e) { exportPdf() }')),
            array("type" => "button", "text" => "SVG", "click" => new \Kendo\JavaScriptFunction('function(e) { exportSvg() }')),
        ),
        "shapeTemplate" => new \Kendo\JavaScriptFunction('kendo.template(
                "<div class=\"k-edit-label\"><label>Başlık</label></div>" +
                "<div class=\"k-edit-field\"><input class=\"k-textbox\" type=\"text\" name = \"Title\" id=\"Title\"/></div>" +
                "<div class=\"k-edit-label\"><label>İş Grubu</label></div>" +
                "<div class=\"k-edit-field\"><input type=\"checkbox\" class=\"k-checkbox\" name = \"Type\" id=\"Type\"/></div>" +
                "<div class=\"k-edit-label\"><label>Bağlı Departman</label></div>" +
                "<div class=\"k-edit-field\"><input id=\"ParentId\" name = \"ParentId\"/></div>")')
    ))
    ->dataBound('onDataBound')
    ->shapeDefaults($shape_defaults)
    ->addEvent('dp')
    ->edit('dp')
    ->select('function(e) {
        $.each(e.selected, function($k, $v){
            if(typeof($v.type) == "function"){
                console.log($v);
            }
        });
         
    }')
    ->connectionDefaults($connection_defaults);
 
 
 
$render = $diagram->render();
 $results = array("Render" => $render);
 
return response()->JSON($results);

2 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 17 Aug 2020, 02:20 PM

Hi,

In general, the respective server-side handler should be called right after any update of the connection/shape of the diagram. The most common cause for not performing the request is a JavaScript error. Can you open the console of the browser and ensure that there are no exceptions thrown?

Also, in the devtools of the browser, navigate to the Network tab, and ensure that a request is being sent.

Let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

0
marksist
Top achievements
Rank 1
answered on 17 Aug 2020, 06:48 PM
Thanks I found another solution,
No error returns on console
Asked by
marksist
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
marksist
Top achievements
Rank 1
Share this question
or