Hierac

[marksist]

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);

[Tsvetomir]

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

[marksist]

Thanks I found another solution,
No error returns on console