DropDownTree in KendoGrid Batch Edit

[NoobMaster]

i have a KendoGrid with Batch editing ( in cell ) and one of the columns is KendoDropDownTree, when an item in the dropdowntree is selected that has childs then while saving the grid change all the childs of the selected item in the dropdowntree are posted to the action and that is wrong.

please i need help

thanks

 

regards

[Tsvetomir]

Hello,

Generally, when the value from the Kendo UI DropDownTree is assigned to the model's field of the grid, this value contains all of the information. Namely, the Id, the Text, the items which are the subitems etc. However, if the DataValueField and DataTextField of the DropDownTree are configured accordingly, then only those two values would be applied to the field.

Is it possible for you to send me a sample application in which the faulty behavior could be observed? This way, I would have the chance to investigate and debug the case locally and get back to you with accurate suggestions.

Looking forward to your reply.


Kind regards,
Tsvetomir
Progress Telerik

[NoobMaster]

i dont have a sample app but i will post needed codes from our project:

1.     public long? Id { get; set; }
2.      public long? ScoreLockId { get; set; }
3.
4.      [UIHint(TelerikEditors.DropDownTreeEditor)]
5.      [Required(ErrorMessage = "Organization is required")]
6.      [DataSource(Action = "GetOrganizations", Controller = "ScoreLock", DataValueField = "id",DataTextField ="text",DataHasChildField = "hasChildren", AutoBind = false)]
7.      public DataItem Organization { get; set; }

[NoobMaster]

and the DataItem class is 

      public string text { get; set; } = "";
        public string value { get; set; } = "";
        public bool hasChildren { get; set; } = false;

[NoobMaster]

and here is the grid view code 

    columns.Bound(a => a.Organization).ClientTemplate("#= data.Organization ? data.Organization.text : '' #");

and the grid is rendered and the desired DropDownTree is rendered also and getting the data from the given DataSource Attribute

[NoobMaster]

finally  when saving changes if the selected item has no child then its good and has no problem, but when has child and the child are more than 4000 records then it will try to post all of those records to server but it will fails to send the data to server and says the length of the request too long .

How do i know all 4000 records are posting to the server ?

A: I debugged kendo.all.min.js from chrome dev console and i saw the FormData and it was contain all of the selected item's childs (4000 ) in array form

[Tsvetomir]

Hi,

Generally, the Kendo UI TreeView is not a data-bound widget. It is not intented to be bound to a certain field reflect the changes. Furthermore, it has not been designed to be used as an editor for any of the grid's columns.

In the current case, what I can recommend is to manually handle the selected item and then apply it to the specific field. In the Save event handler of the grid, access the currently selected item:

var item =$("#treeview").getKendoTreeView().select()

Obtain its dataItem, and more specifically, only the relevant fields:

var dataItem = $("#treeview").getKendoTreeView().dataItem(item).toJSON()

And now, take the relevant fields, construct a new object and pass it in the set() method:

dataItem.set("FieldName", customObject)

It is important to point out that the fields from the custom object should correspond to the ones from the initial grid's field.


Kind regards,
Tsvetomir
Progress Telerik

[NoobMaster]

Hi

 

thanks for your response

but my control is Kendo UI DropDownTree not Kendo UI TreeView as you set in your last post  :)

[Tsvetomir]

Hi Ahmad,

I apologize for the misinformation. Almost the same approach should be applicable to the current case because the Kendo UI DropDownTree internally uses the Kendo UI TreeView. So, check out the update handler below:

1. Subscribe to the OnCellClose event:

.Events(ev=>ev.CellClose("onCellClose"))

2. And the handler:

<script>
    function onCellClose(e) {
        var headerIndex = $("#grid th[data-field='Organization']").index(); // get the index of the header cell

        if (e.container.index() == headerIndex) { // execute the logic if the edited cell is in the Organization column
            var treeView = e.container.find("[data-role='dropdowntree']").getKendoDropDownTree().treeview; // get a reference to the internal TreeView widget
            var selectedRow = treeView.select(); // get the selected item
            var dataItem = treeView.dataItem(selectedRow); // get the selected data item
            var customObject = { id: dataItem.value, text: dataItem.text, hasChildren: dataItem.hasChildren }; // compose the custom object

            var gridRow = e.container.closest("tr"); // get a reference to the current row
            var gridDataItem = $("#grid").getKendoGrid().dataItem(gridRow); // get a reference to the data item of the row
            gridDataItem.set("Organization", customObject) // set the field to be the custom object
        }
    }
</script>

 
I had to make a slight change so that I can correctly bind the DropDownTree to the field. And it was by changing the value property to "id". However, on your side, you might have a different approach of binding it. 

I am attaching a sample project in which the functionality of interest could be examined. Give it a try and let me know in case the child items are still sent to the server-side.


Kind regards,
Tsvetomir
Progress Telerik

[NoobMaster]

Hi

sorry for late response.and thanks for your response.

i will try your solution :)

Regards

Ahmed