Announcement

Collapse
No announcement yet.

[CLOSED] Retyped for Kendo

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    [CLOSED] Retyped for Kendo

    Just started with Bridge.NET, LOVING IT!!

    We use the Kendo UI controls in our application. I'm working on a proof of concept using Bridge.NET. I have the following JavaScript straight from Telerik:

    function onChange(e) {
        var rows = e.sender.select();
    
        rows.each(function(e) {
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(this);
    
            console.log(dataItem); 
        });
    };
    In my C#, the call to e.sender.select() results in a kendo_ui.Jquery interface. I don't seem to be able to treat it like a selector though. Assuming that it really is one, I try wrapping that in a new jQuery2.jQuery(). I can iterate over it then of course, but the call to grid.dataItem(e) tells me my Html5Element is not compatible with any of the calling signatures -- Retyped.dom.Element.Interface, Retyped.kendo_ui.Jquery, or string.

    What am I doing wrong?
    Last edited by geoffrey.mcgill; 2017-10-22 @ 06:54 PM.

    #2
    Hi @kfinke,

    Welcome to Bridge!

    Can you post the C# you are trying to get working?

    Comment


      #3
      Here it is:

      public IEnumerable<T> SelectedItems
      {
          get
          {
              IList<T> items = new List<T>();
      
              kendo_ui.JQuery rows = _grid.@select();
              jQuery j = new jQuery(rows);
      
              j.Each((i, e) =>
              {
                  items.Add(_grid.dataItem(e));
              });
      
              return items;
          }
      }
      Last edited by geoffrey.mcgill; 2017-10-22 @ 06:52 PM.

      Comment


        #4
        Are you able to post a simplified sample demonstrating the whole scenario? The C# SelectedItems sample doesn't seem to match up with the onChange JavaScript sample.

        Is the onChange event being fired from an HTMLElement or Kendo component? Just something demonstrating the whole scenario would be nice, or a link to the JavaScript version of the scenario.

        Comment


          #5
          Hi kfinke,

          I think the problem is that kendo_ui.JQuery does not actually extend jquery.JQuery interface, whereas it should. Also there is no mapping between them provided out of the box. We created an issue related to augmentation problems, it'll be fixed soon:
          https://github.com/Retyped/Retyped/issues/22

          For now, you can either cast interfaces manually when it is required, or just use extension methods like it's shown below:

          private static void onChange(kendo_ui.kendo.ui.ListViewEvent e)
          {
              var rows = e.sender.select().Base();
              rows.each((i, el) =>
              {
                  var grid = jquery.jQuery.select("#grid").Kendo().data(kendo_ui.Literals.kendoGrid);
                  var dataItem = grid.dataItem(el);
          
                  dom.console.log(dataItem);
                  return true;
              });
          }
          
          [External]
          public static class KendoExtensions
          {
              [Template("{0}")]
              public static extern kendo_ui.JQuery Kendo(this jquery.JQuery.Interface arg);
          
              [Template("{0}")]
              public static extern jquery.JQuery.Interface Base(this kendo_ui.JQuery arg);
          }
          I'd recommend going with extensions, it'd be easier to track and get rid of this temporary solution after we updated Retyped.kendo-ui package with the fix for #22.

          Comment


            #6
            Thank you!! I agree, the extension methods are the way to go. I'll track that fix.

            But, your response leads me to another question. What's the difference between Retyped.jquery and Bridge.jQuery2.jQuery? I had been using the latter. Your extension methods use the former? I really seem to not be following the Retyped stuff lol!

            For example, more Kendo stuff. I have to create kendoContextMenu on a <UL>. In TypeScript, this was:

                        var menu = $(menuSelector);
                        menu
                            .kendoContextMenu({
                                // listen to right-clicks on the treelist container
                                target: this.gridSelector,
                                closeOnClick: false,
                                close(e) {
                                    if (this.menuCanClose) {
                                        return;
                                    }
                                    if (this.menuRow != this.lastMenuRow) {
                                        e.preventDefault();
                                    }
                                    return;
                                },
                                // show when a row is clicked
                                filter: ".commandButton",
                                showOn: "click",
                                //showOn: "mouseenter", //This makes the dropdown appear on hover
                                open(e) {
                                    if (that.openedElement == e.target.parentElement.parentElement) {
                                        e.preventDefault();
                                        that.openedElement = null;
                                        return;
                                    }
                                    that.openedElement = e.target.parentElement.parentElement;
            
                                    var row = e.target.parentElement.parentElement;
                                    var dataItem = that.grid.dataItem(row);
            
                                    //Keeps the menu buttons from going off the page
                                    var offSet = e.item.clientWidth;
                                    setTimeout(() => {
                                        var el = $(e.item);
                                        offSet = el.first().width();
            
                                        var clickedElement = $(e.target).offset();
                                        var clickedElementY = clickedElement.top;
                                        var clickedElementX = clickedElement.left;
                                        e.sender.element.parent().css('top', clickedElementY).css('left', clickedElementX - offSet);
                                    });
            
                                    //if (openMenu)
                                    //    openMenu(dataItem);
            
                                },
                                // handle item clicks
                                select(e) {
                                    console.log("menu item " + e.item.innerHTML + " selected");
                                    var button = $(e.item);
                                    var row = e.target.parentElement.parentElement;
                                    var dataItem = that.grid.dataItem(row);
            
                                    let invoker: ICommandInvoker = $(button).data("invoker");
                                    invoker.execute();
                                    //menuItemSelected(button, dataItem);
                                }
                            });

            In my C# world, I'm not even sure how to start.

                        var menu = jquery.jQuery.select($"#{_gridSelector.Prop<string>("id")}Menu").Kendo();
                        var contextMenu = menu.kendoContextMenu();
            That's fine, I've got a menu lol. But, it takes a kendo_ui.kendo.ui.ContextMenuOptions.Interface. I'm not really sure what to do with that!

            Comment


              #7
              What's the difference between Retyped.jquery and Bridge.jQuery2.jQuery?
              They are two different jQuery binding libraries. The Bridge.jQuery2 library was the original Bridge jQuery binding library.

              Recently we released Retyped and a new Retyped.jquery binding library was created. The new Retyped.jquery library is built directly from the jquery.d.ts file, instead of the "hand-crafted" API experience of Bridge.jQuery2.

              We recommend using Retyped.jquery as support for the old Bridge.jQuery2 libraries will be discontinued as of the Bridge 17.0 release.

              Comment


                #8
                The Retyped team had a big meeting today regarding our upcoming implementation of Extension methods. The exact time-frame for releasing is unknown, but we will implement as quickly as we can. With some luck we will be able to release an update to jQuery and Kendo UI packages next week.

                If everything goes well, the issues regarding the .Interface types will also disappear.

                Comment


                  #9
                  Awesome! Thanks for the replies!

                  Comment


                    #10
                    Looks like this thread was never updated when Retyped started supporting extensions methods. Retyped now supports Extension methods, so the Kendo extension should now work as expected in the latest Retyped packages.

                    Hope this helps.

                    Comment

                    Working...
                    X