Editable Fields in Grid Details

10 posts, 0 answers
  1. Starr
    Starr avatar
    1 posts
    Member since:
    May 2013

    Posted 09 Jun 2013 Link to this post

    Here is the situation. I have a table which contains columns of the following form: ItemTypeId, StringValue1, StringValue2, StringValue3, DecimalValue1, DecimalValue2, DecimalValue3, DateValue1, DateValue2, DateValue3, etc..etc...

    Then I have a metadata table which maps certain fields to certain Item Types:
    ItemTypeId: 1
    FieldName: Description
    FieldType: text
    TargetField: StringValue1

    What I want is for the declared fields to appear in the Detail Template for the Grid rows. I've tried to emulate the markup for the popup editor, and generated the following attempt at a proof of concept:

    $(document).ready(function () {
        $("#mainGrid").kendoGrid({
            dataSource: itemSource,
            toolbar: ["save"],
            columns: [
                { field: "Id", title: "Id" },
                { field: "Description", title: "Description" }
            ],
            detailTemplate: kendo.template($("#details").html()),
            detailInit: detailInit,
            editable: true
        });
    });

    function detailInit(e) {
        var detailRow = e.detailRow;
        var container = e.detailRow.find(".k-edit-form-container");
        fieldSource.fetch(function () {
            fieldSource.filter({ field: "ItemTypeId", operator: "eq", value: e.data.Id });
            var data = this.view();
            for (var i = 0; i < data.length; i++) {
                var field = data[i];
                // Create Label
                $("<div class='k-edit-label'><label for='" + field.TargetField + "'>" + field.FieldName + "</label>").appendTo(container);
                // Create Data Entry Field
                var div = $("<div />");
                div.attr("data-container-for", field.TargetField);
                div.attr("class", "k-edit-field");
                div.appendTo(container);
                if (field.FieldType == "text") {
                    var input = $("<input />");
                    input.attr("name", field.TargetField);
                    input.attr("type", "text");
                    input.attr("class", "k-input k-textbox");
                    input.attr("data-bind", "value:" + field.TargetField);
                    input.appendTo(div);
                }
                if (field.FieldType == "decimal") {
                    var input = $("<input />");
                    input.attr("name", field.TargetField);
                    input.attr("data-bind", "value:" + field.TargetField);
                    input.appendTo(div);
                    input.kendoNumericTextBox();
                }
            }
        });
    }

    However the details section does not seem to end up bound to the relevant fields. It correctly lists the controls that should contain the data for each item, but it neither shows the initial value in those fields, nor does it register edited values and save them when Save Changes is clicked.

    What am I doing wrong here? Is what I am attempting to do feasible with the Kendo framework?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2013 Link to this post

    Hello Starr,

    If I understood correctly you would like to edit data in the details template of the Grid.
    I believe that the main issue with your code is that the template is not bound to the DataSource's view (kendo.bind is never called).

    A similar scenario, to the one that you are trying to configure, is demonstrated in this jsFiddle demo: http://jsfiddle.net/FYQ7E/
    Please check the sample and let me know if you have any further questions.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 02 Oct 2013 Link to this post

    Hi Alexander,
    I've updated your sample http://jsfiddle.net/FYQ7E/2/ so as the user doesn't need to click the save button in the detail template  to update the originalModel.
    I've changed editableModel variable to be directly originalModel.
    I've also used a kendoDropdownList for country field.
    The problem is when I select a country, all the detail templates of the grid collapse surprisingly.
    How can I prevent this behavior?

    Kind regards.
    Oscar.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Oct 2013 Link to this post

    Hello Oscar,

    The behaviour occurs because the detail template is bound directly to the edited model.
    As a result, as soon as the user changes the DropDownList value, the Grid's dataSource changes which causes the Grid to rebind.

    The solution is not to bind the editors directly to the Grid's model. Actually the correct code persists in the page but is commented out.

    editableModel = new Model(originalModel.toJSON());

    For your convenience I updated the jsFiddle sample: http://jsfiddle.net/FYQ7E/3/

    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. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 04 Oct 2013 Link to this post

    Hello Alexander,
    Thanks for responding so soon.
    The requirement is the user doesn't have to click the save button in every detail template to save his changes. The user already has a Save Changes button at the top of the page to update all the data changed in the grid.
    Furthermore, in your example, if you expand three details templates (Nancy, Andrew and Janet) because you want to compare their countries and you click the save button in only one of them (Nancy), as you say, the grid rebinds and collapses all the detail templates (why?), making the user has to expand again the detail templates he has not collapsed (Andrew and Janet).

    I want the detail templates collapse only when the user wants to (clicking the minus icon in the row) and save all the changes by clicking the Save Changes button at the top of the page.
    How can I achive this? Any help will be appreciated.

    Kind regards,
    Oscar.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Oct 2013 Link to this post

    Hello Oscar,

    I am afraid that what you would like to achieve is not supported by Kendo Grid. The details rows are collapsed as soon as the user performs edit, because the Grid refreshes itself after dataSource change.

    Pressing the save button in any of the detail forms updates the corresponding data item which again forces the grid to refresh.

    The main idea is that in order to update the data you should make a change in the DataSource and as soon as you make this change, Grid will refresh and all expanded rows will collapse. The behavior cannot be prevented. My recommendation is to consider using one of the build-in edit modes.

    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. s_guryev
    s_guryev avatar
    5 posts
    Member since:
    Oct 2012

    Posted 21 Nov 2015 in reply to Alexander Valchev Link to this post

    Hello, guys. Thank you for this thread.

    Alexander, I have updated your jsfiddle: http://jsfiddle.net/313t2crx/

    I have added "editable: true" and "batch:true" to the dataSource.

    You said "Pressing the save button in any of the detail forms updates the corresponding data item which again forces the grid to refresh." but changing the value INSIDE THE COLUMN cause the dataItem update as well (because we see the new value in the detail row as well) but doesn't close the detail row. So my questions are:

    1. What difference between input with data-bind in CELL and input with data-bind in DETAIL?

    2. How to make the input in the DETAIL works the same way as the CELL one (doesn't close the detail row)

    Thank you!

  9. s_guryev
    s_guryev avatar
    5 posts
    Member since:
    Oct 2012

    Posted 21 Nov 2015 in reply to s_guryev Link to this post

    Also here is the new version of the jsfiddle with the 2015.3.930 Kendo version: http://jsfiddle.net/313t2crx/2/

    It doesn't remain the cell in the edit mode on lost focus.

     

  10. s_guryev
    s_guryev avatar
    5 posts
    Member since:
    Oct 2012

    Posted 21 Nov 2015 in reply to s_guryev Link to this post

    I see that editing via CELLs doesn't fire the DataBinding event (editor in the DETAIL does). But updates the underlying dataItem
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Nov 2015 Link to this post

    Hi Sergey,

    Thank you for the question.

    The Kendo Grid incell editing mode prevents data rebinding. This is part of the incell editing logic - the changes are saved and the grid is rebound only after the changes are saved manually by the user.

    You cannot get this functionality out of the box in the detail template. Please use the workaround provided in my previous reply.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready