Post Treelist even if there is no modification

[UBALDI SI]

Hello,

I have a view with a treelist in batch / cell editing. When I use the update method to post my treelist I also send additional datas.

But if I have no modifications on my treelist, I can't post modifications on additional datas.

Is there a way to enable the update post even if there is no modifications on treelist ? 

This is my view:

@Html.HiddenFor(x => x.Id)
  @(Html.HiddenFor(m => m.UserCreation, new { Value = User.Identity.Name.Split('\\')[1] }))
  <div class="synchroDiv">
      <div>
          @Html.LabelFor(m => m.Nom)
          @(Html.Kendo().TextBoxFor(m => m.Nom))
      </div>
      @Html.ValidationMessageFor(x => x.Nom)
  </div>

  <div class="synchroDiv">
      <div>
          @Html.LabelFor(m => m.PctMargeDefaut)
          @(Html.Kendo().NumericTextBoxFor(m => m.PctMargeDefaut)
                .Culture("fr-FR")
                .Min(0)
                .Max(15)
                .Step(0.5))
      </div>
      @Html.ValidationMessageFor(x => x.PctMargeDefaut)
  </div>

  <div class="synchroDiv">
      <div>
          <input checked="@Model.EnableCategories" style="width: 0;" type="checkbox" class="switch switch-lg" id="chkCategories" onchange="changeCategoriesVisibility();">
          <label for="chkCategories">Personnaliser les marges des catégories Web</label>
      </div>
  </div>

  <div id="categories">
      @(Html.Kendo().TreeList(Model.Categories)
            .Name("profilMargeTreelist")
            .Toolbar(toolbar =>
            {
                toolbar.Save().Text("Enregistrer");
                toolbar.Cancel().Text("Annuler");
            })
            .HtmlAttributes(new { style = "height:100%" })
            .Columns(columns =>
            {
                columns.Add().Field(e => e.Libelle);
                columns.Add().Field(e => e.Code);
                columns.Add().Field(e => e.PctMarge).Template("# if ( PctMarge === null ) {# #=''# #} else {# #= PctMarge # %#} #");
            })
            .Editable(e => e.Mode(TreeListEditMode.InCell).Move(false))
            .DataSource(dataSource => dataSource
                .Batch(true)
                .Update(update => update.Action("UpdateMargeProfil", "ProfilMarge").Data("addData"))
                .Model(m =>
                {
                    m.Id(f => f.Code);
                    m.ParentId(f => f.CodeParent).Editable(false);
                    m.Field(f => f.Code).Editable(false);
                    m.Field(f => f.Libelle).Editable(false);
                    m.Field(f => f.PctMarge);
                    m.Expanded(false);
                })
            ).Height(800))
  </div>

 

Thank you in advance, I hope everything is clear.

Julien

[Viktor Tachev]

Hello Julien,

By default when clicking the SaveChanges button only the modified items will be sent to the server. In case you would like to send all items from the TreeList you can add a custom button that will trigger a $.ajax request. In the click handler of the button you can get reference of the TreeList and access the items in it like shown in the code snippet below:

var treeList = $("#profilMargeTreelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var items = dataSource.data();

// additional code

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[UBALDI SI]

Hello Viktor,

Thank you for your answer.I did exactly the same thing while I was waiting for your answer.

function onSubmit(e) {
    val = $("#MargeRevendeur").kendoValidator().data("kendoValidator");
    const valide = val.validate();

    if (valide === false) {
        e.preventDefault();
    } else {
        $("#divLoader").show();
        const treelist = $("#profilMargeTreelist").data("kendoTreeList").dataSource.data();
        $("#Marges").val(JSON.stringify(treelist));
        $("#MargeRevendeur").submit();
    }
};

 

Now, I'm wondering if there is a quick way to identify only the modified noded ? Or I just have to loop on every child and check for modifications ?

Julien,

[Viktor Tachev]

Hello Julien,

In order to detect if there are any pending changes made by the user I would suggest calling the hasChanges() method for the DataSource. When there are changes you can iterate through the DataSource items and check the dirty flag for each one. Based on this you can detect which items have been modified. 


Regards,
Viktor Tachev
Progress Telerik