Post Treelist even if there is no modification

4 posts, 0 answers
  1. UBALDI SI
    UBALDI SI avatar
    9 posts
    Member since:
    Jul 2013

    Posted 26 Sep 2018 Link to this post

    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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2302 posts

    Posted 28 Sep 2018 Link to this post

    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.
  3. UBALDI SI
    UBALDI SI avatar
    9 posts
    Member since:
    Jul 2013

    Posted 28 Sep 2018 Link to this post

    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,

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2302 posts

    Posted 01 Oct 2018 Link to this post

    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.
Back to Top