Is there DIAGRAM in kendo angular?

6 posts, 0 answers
  1. pankaj
    pankaj avatar
    9 posts
    Member since:
    Aug 2020

    Posted 15 Sep Link to this post

    Do we have Kendo Diagram in Kendo UI for Angular like there is in Kendo UI for Jquery?

    https://demos.telerik.com/kendo-ui/diagram/index?

    I need to migrate an existing implementation of Diagram in Angular..

  2. Martin
    Admin
    Martin avatar
    252 posts

    Posted 17 Sep Link to this post

    Hello Pankaj,

    Until a dedicated Kendo UI for Angular Diagram component becomes available, you can use the Kendo UI for jQuery Diagram in the Angular application, as described in the following section of our documentation:

    https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

    A dedicated Kendo UI for Angular Diagram component is not currently available, and I am afraid that providing one is not a part of our immediate plans. If you have the time, please support the following feature request in our Feedback portal to help us estimate the customer demand, and to prioritize accordingly when updating our roadmap:

    https://feedback.telerik.com/kendo-angular-ui/1360581-diagram-component

    Thank you in advance.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. pankaj
    pankaj avatar
    9 posts
    Member since:
    Aug 2020

    Posted 06 Oct in reply to Martin Link to this post

    I am facing major challenge in writing 

    https://demos.telerik.com/kendo-ui/diagram/editing

    in angular as explained in your article - Kendo UI for jQuery Integration.

    Can you provide a sample implementation of same?

  4. Martin
    Admin
    Martin avatar
    252 posts

    Posted 07 Oct Link to this post

    Hi Pankaj,

    There are examples of the most integrated jQuery components in our public GitHub repo.

    Here is the sample that demonstrates the Diagram integration:

    https://github.com/telerik/kendo-angular/blob/master/examples/projects/integration-jquery/src/app/test-diagram.component.ts

    Regards,
    Martin
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  5. pankaj
    pankaj avatar
    9 posts
    Member since:
    Aug 2020

    Posted 07 Oct in reply to Martin Link to this post

    My Kendo diagram has a tool button which opens a kendo dialog which contains a kendo grid - all using kendo ui for jquery.

    Some how i managed to make kendo diagram jquery work in angular.

    I am unable make kendo dialog and kendo grid in jquery work in angular.

    Can you help me run the below code in angular?

     

                $("#EditDialog").kendoDialog({
                    title: "Kendo Dialog Component",
                    content: "<div id='MemberGrid'></div>",
                    actions: [{
                        text: "Close",
                        action: function (e) {
                            createDiagram();
                            $("#MemberGrid").data("kendoGrid").destroy();
                            //$("#MemberGrid").data("kendoGrid").refresh();
                        },
                        primary: true
                    }],
                    title: "Modify Member",
                    closable: false,
                    modal: true,
                    visible: false
                });

     

    below is the kendo grid

     $("#MemberGrid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: false,
                        height: 150,
                        toolbar: ["create"],
                        columns: [
                            { field: "Name", title: "Name" },
                            { field: "Title", title: "Title" },
                            { field: "Contact", title: "Contact" },
                            { command: ["edit", "destroy"], title: "&nbsp;" }],
                        editable: "inline",
                        width: "350px"
                    });

  6. Martin
    Admin
    Martin avatar
    252 posts

    Posted 09 Oct Link to this post

    Hello Pankaj,

    We will need more information about your current Kendo UI subscription. I have therefore generated a sales lead, and you can expect our licensing specialists to contact you.

    Regarding the questions, please check the following article from our documentation that explains in details how to integrate a jQuery widget in Angular application:

    https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

    Due to the increased complexity and the need to install and import jQuery and the Kendo UI for jQuery packages in the application, we typically suggest this option only as a measure of last resort - e.g. for widgets that do not have their Kendo UI for Angular counterpart yet (like Spreadsheet, Diagram, etc.). Thus using Kendo Angular Grid, Kendo Angular Dialog components are recommended in this case.

    Once your account is associated with an active subscription, you can benefit from our full support service.

    Regards,
    Martin
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top