Add/Remove KendoSortable Dynamically

20 posts, 0 answers
  1. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 30 Sep 2015 Link to this post

    Hello

     I am working on Including KendoSortable in my Kendo UI Grid. I am able to add it on a radio button select event (as below). 

     http://demos.telerik.com/kendo-ui/sortable/integration-grid

     This is how I am able to add it:

     currentGrid.table.kendoSortable({
                    filter: filter,
                    cursor: "move",
                    ignore: ignore,
                    hint: $.noop,
                    //hint: function (element) { //customize the hint
                    //    return element.clone().addClass("hint");
                    //},
                    placeholder: function (element) {
                        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                    },...............

     How can I remove it and re-add it dynamically, say on addSortable and removeSortable radio button click events.

    Thanks.

  2. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 01 Oct 2015 Link to this post

    I would appreciate if I can get some pointers to my earlier question.

     Thanks.

  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 02 Oct 2015 Link to this post

    Hi,

    You may destroy the Sortable widget at the time when it has to be removed and re-initialize it again when it has to be added back.

    currentGrid.table.data("kendoSortable").destroy(); //remove
     
    currentGrid.table.kendoSortable({ ..... }); //add

    I hope the information will help.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 05 Oct 2015 in reply to Alexander Valchev Link to this post

    Hi 

    I tried this and it does not remove the dragDrop (kendoSortable widget) feature from the grid. I am making this change on GridDataBound Event. Am I doing something wrong - please see attached code.

     Thanks,

    VP

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 07 Oct 2015 Link to this post

    Hello,

    The else statement will never be executed because the if statement will be always true.
    That said the destroy method of the Sortable widget will never be called.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2015 Link to this post

    Sorry for the confusion. The code that I pasted was just a sample. The If statement has a condition to be met (based on the radio button clicked). So in the right scenarios it will be called (as of course its not if(true) in my actual code - I cannot paste my code here as per policy). So my question still stays - the destroy does not remove the kendoSortable widget.

     currentGrid.table.data("kendoSortable").destroy(); //remove ---- does not work.

    Can you please provide with a working sample with adding and removing kendoSortable from a grid based on a event (say 2 radiobuttons).

     

    Thanks.

     

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 09 Oct 2015 Link to this post

    Hello,

    Please check the following example: http://dojo.telerik.com/IqIBI

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 13 Oct 2015 Link to this post

    I tried in the way you suggested, but the only difference with my approach is I am using AngularJS. In your example, if I am not wrong, I see that the grid gets created every time the 'Toggle Sortable' button is clicked. In my case, I am not creating the grid every time on the radio button click events.

    My Grid is defined as below on my html:
    <div id="cmGrid"
     k-editable="vm.editableOptionsCM"
     kendo-grid="cmGrid"
     k-on-edit="vm.onCMEdit(kendoEvent)"
     k-on-cancel="vm.onCMCancel()"
     k-on-remove="vm.onCMDelete(kendoEvent)"
     k-on-save="vm.onCMSave(kendoEvent)"
     k-sortable="false"
     k-data-source="vm.gridDataSourceCM"
     k-scrollable="false"
     k-columns="vm.nmCMGridColumns"
     k-data-bound="vm.cmGridDataBound">
     </div>

    All the vm objects defined above have the corresponding definitions in my js file.
    I have 3 radio buttons: addKendoSortable, removeKendoSortable1, removeKendoSortable2. Initially on the load of the html page, I add the kendoSortable widget only if addKendoSortable is selected, else I add it on the select event of addKendoSortable radio button after the initial load and rebind the grid datasource. The issue here is I am not able to remove the kendoSortable on removeKendoSortable1, removeKendoSortable2 select events with the destroy() code you provided. Can you please provide with an example with AngularJS or do I have to go with the jQuery way to implement this functionality.

    When addKendoSortable radio button is selected, I call the function to add the kendoSortable on the GridDataBound event

    (see below code).

    vm.cmGridDataBound = function (e) {
                var currentGrid = e.sender;
       
                if (when addKendoSortable radio is selected) {
                    sortGrid(currentGrid, ">tbody >tr", "#cmGrid tbody", "");
                }
      }
     
     function sortGrid(currentGrid, filter, container, ignore) {
                currentGrid.table.kendoSortable({
                    filter: filter,
                    cursor: "move",
                    ignore: ignore,
                    hint: $.noop,
                   
                    placeholder: function (element) {
                        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                    },
                    container: container,
                    change: function (e) {
                        var grid = currentGrid,
                          oldIndex = e.oldIndex, //the old position
                          newIndex = e.newIndex, //the new position
                          view = grid.dataSource.view(),
                          dataItem = currentGrid.dataSource.getByUid(e.item.data("uid")); //retrieve the moved dataItem
                        dataItem.Order = newIndex; //update the order
                        dataItem.dirty = true;
                        //shift the order of the records
                        if (oldIndex < newIndex) {
                            for (var i = oldIndex + 1; i <= newIndex; i++) {
                                view[i].Order--;
                                view[i].dirty = true;
                            }
                        } else {
                            for (var j = oldIndex - 1; j >= newIndex; j--) {
                                view[j].Order++;
                                view[j].dirty = true;
                            }
                        }
                        currentGrid.dataSource.remove(dataItem);
                        currentGrid.dataSource.insert(newIndex, dataItem);
                     
                    }
                });
            }
     
     I am able to add the kendoSortable as shown above, but I cannot remove it when removeKendoSortable1 or removeKendoSortable2 radiobuttons are selected.
     
     

  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 15 Oct 2015 Link to this post

    Hi,

    This is the first time you mention that this is AngularJS application.
    For AngularJS application I will recommend to use the k-rebind feature to change the Sortable settings which will allow you to enable/disable the widget.

    I tested the scenario but encountered with a bug on our side which we will have to fix at first. I will mark this thread as 'requires additional answer" and will get back to you when the k-rebind issue is fixed.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 19 Oct 2015 Link to this post

    Hi Alexander

     Thanks for your response. Please post an example when the said issue is resolved.

     VP

  11. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 09 Nov 2015 Link to this post

    Please let me know if this issue has been resolved and a new build is available, if not, when would it be fixed?
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Nov 2015 Link to this post

    Hi,

    The issue is fixed and the fix will be available in the service pack release which should be available for download till the end of this week.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. VP
    VP avatar
    21 posts
    Member since:
    Oct 2014

    Posted 05 Jan 2016 in reply to Alexander Valchev Link to this post

    Hi,

    Can you please provide a working example with AngularJS after this fix, where we can add and remove kendosortable dynamically. Please let me know what version of kendo should I upgrade to for me to get this fix.

     Thank You.

     VP

  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 07 Jan 2016 Link to this post

    Hi,

    Here is an example: http://dojo.telerik.com/IwAwO
    It works with Q3 SP (2015.3.1111) and later versions.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. lorraine
    lorraine avatar
    14 posts
    Member since:
    Jun 2016

    Posted 05 May 2017 Link to this post

    Given the original example of http://demos.telerik.com/kendo-ui/sortable/sortable-panels,I have added a chart to one of the panels and i am unable to interact with the chart because the focus is on the panel and dragging on the chart drags the panel.

     

    I have tried adding a mousedown handler on the chart but have been unable to disable the dragging on the parent panel.  I have seen various posts about having to call destroy() on the kendoSortable() however using the above example I am unable to call destroy().

     

    Any assistance would be greatly appreciated,

    Thanks,

  16. lorraine
    lorraine avatar
    14 posts
    Member since:
    Jun 2016

    Posted 05 May 2017 in reply to lorraine Link to this post

    the method of calling destroy and recreating the kendoSortable works if the example is run full screen 
  17. Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 09 May 2017 Link to this post

    Hello Lorraine,

    Please have in mind that the Dojo is using an iframe when it is not in fullscreen mode, and due to the iframe specifics, some functionalities does not work as expected.

    We do recommend testing all of the examples in fullscreen mode to achieve a result similar to a real application.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  18. Vigneswar
    Vigneswar avatar
    6 posts
    Member since:
    May 2018

    Posted 31 May 2018 Link to this post

    Kendo UI grid sortable(or reordering or drag drop rows in grid) not disabled on using kendoSortable destroy jQuery in all scenarios.

    I've a scenario in which the grid reordering or drag-drop rows(can be achieved using kendoSortable in kendo UI) should be enabled or disabled. 
    For ex., if a particular set of columns are sorted or grouped the drag-drop function should be disabled and if one specific column is sorted it should be enabled. 
    The problem occurs when applying filter to some columns. During filtering if kendoSortable is applied to a column it stays the same even if ("kendoSortable").destroy() is executed i.e the drag-drop functionality should be disabled on executing destroy() only that it wasn't. All it did was return some kinda error while the page was inspected.
    Find attachment screen of error with this question or the text of error,

    Error in event handler for (unknown): TypeError: Cannot read property 'options' of undefined
        at y.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.js:16:421)

    Attaching the jQuery method(will be invoked from databound event of grid) that implements the function,

        KendoCustom.OnSortAndGroup = function (e) {
        var grid = e.sender;    
        if (grid.dataSource.group() && grid.dataSource.group().length > 0
            && grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
            grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'default');
                     });

            if ($("#RulesGrid").data("kendoSortable")) {
                $("#RulesGrid").data("kendoSortable").destroy();
            }
        }
        else if (grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
            var col = grid.dataSource.sort();
            if (col[0]["field"] == 'Rank' || col[0]["field"] == 'VisualRank') {
                grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'move');
                     });

                $("#RulesGrid").kendoSortable({
                    "change": onChangeDrag,
                    "filter": "table > tbody > tr",
                    "container": "#RulesGrid tbody",
                    "cursor": "move",
                    "hint": noHint,
                    "placeholder": placeholder
                });
            }
            else {
                grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'default');
                     });

                if ($("#RulesGrid").data("kendoSortable")) {
                    $("#RulesGrid").data("kendoSortable").destroy();
                }
            }
        }
    }
  19. Vigneswar
    Vigneswar avatar
    6 posts
    Member since:
    May 2018

    Posted 31 May 2018 Link to this post

    I've a scenario in which the grid reordering or drag-drop rows(can be achieved using kendoSortable in kendo UI) should be enabled or disabled. 
    For ex., if a particular set of columns are sorted or grouped the drag-drop function should be disabled and if one specific column is sorted it should be enabled. 
    The problem occurs when applying filter to some columns. During filtering if kendoSortable is applied to a column it stays the same even if ("kendoSortable").destroy() is executed i.e the drag-drop functionality should be disabled on executing destroy() only that it wasn't. All it did was return some kinda error while the page was inspected.

    The text of error,
    Error in event handler for (unknown): TypeError: Cannot read property 'options' of undefined
        at y.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.js:16:421)

    Attaching the jQuery method(will be invoked from databound event of grid) that implements the function,

        KendoCustom.OnSortAndGroup = function (e) {
        var grid = e.sender;    
        if (grid.dataSource.group() && grid.dataSource.group().length > 0
            && grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
            grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'default');
                     });

            if ($("#RulesGrid").data("kendoSortable")) {
                $("#RulesGrid").data("kendoSortable").destroy();
            }
        }
        else if (grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
            var col = grid.dataSource.sort();
            if (col[0]["field"] == 'Rank' || col[0]["field"] == 'VisualRank') {
                grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'move');
                     });

                $("#RulesGrid").kendoSortable({
                    "change": onChangeDrag,
                    "filter": "table > tbody > tr",
                    "container": "#RulesGrid tbody",
                    "cursor": "move",
                    "hint": noHint,
                    "placeholder": placeholder
                });
            }
            else {
                grid.tbody.find('>tr').each(
                     function () {
                         $(this).css('cursor', 'default');
                     });

                if ($("#RulesGrid").data("kendoSortable")) {
                    $("#RulesGrid").data("kendoSortable").destroy();
                }
            }
        }
    }

  20. Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 01 Jun 2018 Link to this post

    Hello, Vigneswar,

    I provided an answer to the same questions asked in the following forum post.

    https://www.telerik.com/forums/sorting-and-filtering-not-working-in-kendo-grid

    If possible, please continue the discussion in only one of the threads by your choice.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top