After implement Drag and Drop feature, Inline edit text box got not editable

6 posts, 0 answers
  1. attuneIT
    attuneIT avatar
    13 posts
    Member since:
    Mar 2014

    Posted 29 Apr 2014 Link to this post

    I have inline edit feature in my kendo grid, i newly introduce Drag and Drop feature for this grid..But after introduced that feature, My inline edit textbox seems like not editable... It might be due to some style changes... Please help me to find the issue....i attach my jquery code to implement the feature of drag and drop

        $.fn.reverse = [].reverse;
        $(document).ready(function () {
            var mainGrid = $("#grid_Task").data("kendoGrid");
            var mainDataSource = $("#grid_Task").data("kendoGrid").dataSource;

            var selectedClass = 'k-state-selected';
            $(document).on('click', '#grid_Task tbody tr', function (e) {
                if (e.ctrlKey || e.metaKey) {
                    $(this).toggleClass(selectedClass);
                } else {
                    $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
                }
            });

            mainGrid.table.kendoDraggable({
                filter: "tbody tr",
                group: "gridGroup",
                axis: "y",
                hint: function (item) {
                    var helper = $('<div class="k-grid k-widget drag-helper"/>');
                    if (!item.hasClass(selectedClass)) {
                        item.addClass(selectedClass).siblings().removeClass(selectedClass);
                    }
                    var elements = item.parent().children('.' + selectedClass).clone();
                    item.data('multidrag', elements).siblings('.' + selectedClass).remove();
                    return helper.append(elements);
                }
            });

            mainGrid.table.kendoDropTarget({
                group: "gridGroup",
                drop: function (e) {

                    var draggedRows = e.draggable.hint.find("tr");
                    var target = mainDataSource.getByUid($(e.draggable.currentTarget).data("uid"));
                    e.draggable.hint.hide();
                    var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
                        dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"));
                    
                    if (dropLocation.is("th")) {
                        return;
                    }

                    var beginningRangePosition = mainDataSource.indexOf(dropGridRecord),//beginning of the range of dropped row(s)
                        rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));//start of the range of where the rows were dragged from

                    //if dragging up, get the end of the range instead of the start
                    if (rangeLimit > beginningRangePosition) {
                        draggedRows.reverse();//reverse the records so that as they are being placed, they come out in the correct order
                    }

                    //assign new spot in the main grid to each dragged row
                    draggedRows.each(function () {
                        var thisUid = $(this).attr("data-uid"),
                            itemToMove = mainDataSource.getByUid(thisUid);
                        mainDataSource.remove(itemToMove);
                        mainDataSource.insert(beginningRangePosition, itemToMove);
                    });


                    //set the main grid moved rows to be dirty
                    draggedRows.each(function () {
                        var thisUid = $(this).attr("data-uid");
                        mainDataSource.getByUid(thisUid).set("dirty", true);
                    });

                    //remark things as visibly dirty
                    var dirtyItems = $.grep(mainDataSource.view(), function (e) { return e.dirty === true; });
                    for (var a = 0; a < dirtyItems.length; a++) {
                        var thisItem = dirtyItems[a];
                        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
                        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
                    };
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 01 May 2014 Link to this post

    Hello,

    I couldn't reproduce this problem in our sortable grid demo. Here is my test: http://trykendoui.telerik.com/@korchev/UloR. Does it work at your side? If not - what are the steps required to reproduce the problem? If it works - how is that demo different from your real case?

    Regards,
    Atanas Korchev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Jon
    Jon avatar
    43 posts
    Member since:
    Jan 2009

    Posted 14 Jan 2020 in reply to Atanas Korchev Link to this post

    I think I have the same problem, I tweeked a dojo to demonstrate

    http://dojo.telerik.com/amAnIKal

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 16 Jan 2020 Link to this post

    Hello, Jon,

    Thank you for the provided Dojo.

    The Sortable widget listens for the mousedown event and this is why you are not able to click on the inputs but you are able to tab and edit.

    To enable the clicks into the inputs of an editable grid while using a Sortable, just exclude the editable row from the filter:

    https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/integration/grid#reordering-in-editable-grids

    filter: ">tbody >tr:not(.k-grid-edit-row)",

    Here is the updated Dojo for your reference:

    http://dojo.telerik.com/amAnIKal/6

    Kind Regards,

    Alex Hajigeorgieva

    Telerik

     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Jon
    Jon avatar
    43 posts
    Member since:
    Jan 2009

    Posted 16 Jan 2020 in reply to Alex Hajigeorgieva Link to this post

    That appears to do the trick.  Thanks.

    Perhaps adding some documentation / examples at https://demos.telerik.com/kendo-ui/sortable/integration-grid.

    Integration - Grid w/ Inline edit or some such.

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 20 Jan 2020 Link to this post

    Hi, Jon,

    Thank you for the feedback.

    I have added it to the internal Support tasks so that it can be added to the demos descriptions in the future.

    Thank you for sharing where you have looked, we appreciate it.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top