This is a migrated thread and some comments may be shown as answers.

Post Treelist even if there is no modification

3 Answers 83 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
UBALDI SI
Top achievements
Rank 1
UBALDI SI asked on 26 Sep 2018, 08:44 AM

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

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Sep 2018, 07:47 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
UBALDI SI
Top achievements
Rank 1
answered on 28 Sep 2018, 09:52 AM

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,

0
Viktor Tachev
Telerik team
answered on 01 Oct 2018, 12:30 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
UBALDI SI
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
UBALDI SI
Top achievements
Rank 1
Share this question
or