Kendosplitter with multiple ajaxrequest form post problem

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 20 Sep 2017 Link to this post

    Hello,

     

    In my view there is a kendotreeview and  kendo tab inside which i have Kendo splitter with 2 panes each. Pane 1 and pane4 load partial view when a node in Kendo treeview selected depending on what is selected on node. On main view i have 2 save button. Button1 Contents of form inside pane1(formid: frmObjdetails) in splitterchild and other button to save Content from pane 4 form inside splitterchild1(formid:frmDoc). If i have only pane 1 form loaded then clicking Button1 submits the data perfectly. But when i have both forms loaded then clicking on Button 1 post pane 4 form data and not pane 1 form data. though both forms have specific id

     

    Here are my codes

      @helper ObjectDetailContentTemplate()
    {
             @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .SelectedIndex(0)
              .Animation(animation =>
                  animation.Open(effect =>
                      effect.Fade(FadeDirection.In)))
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("ObjektDetail")
                      .Selected(true)
                      .Content(@<text>
             @ObjectDetailContentSplitterTemplate()
              </text>);
                  tabstrip.Add().Text("Objekt-Aktivitat")
                      .Content(@<text>
                   @ObjectActivityContentSplitterTemplate()
                      </text>);
              })
                )
        }   
     @helper ObjectDetailContentSplitterTemplate()
    {
        @(Html.Kendo().Splitter()
          .Name("splitterchild")
          .HtmlAttributes(new { style = "height: 800px;" })
          .Orientation(SplitterOrientation.Vertical)
          .Panes(panes =>
          {
              panes.Add()
                  .Scrollable(false)
                   .Size("290px")
                  .HtmlAttributes(new { id = "pane1" })
                  .Collapsible(false)
                   .LoadContentFrom("Index", "ObjectDetail", new { id = ViewBag.SelectedObjectID });
              panes.Add()
                  .Scrollable(false)
                  .HtmlAttributes(new { id = "pane2" })
                  .Content(@<text>
                            @ObjectAddressGrid()
                            </text>);
          }))
       
    }
      @helper ObjectActivityContentSplitterTemplate()
    {
        @(Html.Kendo().Splitter()
          .Name("splitterchild1")
          .HtmlAttributes(new { style = "height: 100%;" })
          .Orientation(SplitterOrientation.Vertical)
          .Panes(panes =>
          {
              panes.Add()
                   .Size("400px")
                  .HtmlAttributes(new { id = "pane3" })
                  .Collapsible(false)
                    .Content(@<text>
                           @DocumentGrid()
                            </text>);
              panes.Add()
                  .Size("200px")
                  .HtmlAttributes(new { id = "pane4" })
                  .Collapsible(false);
          }))
       
    }

    When treeview node is selected i call ajaxrequest for loading the partialviews with forms

     function onSelect(e) {             
            var nodeid = $("#treeview").getKendoTreeView().dataItem(e.node).id;
           
            var splitter = $("#splitterchild").data("kendoSplitter");
            var splitterch = $("#splitterchild1").data("kendoSplitter");
           
            splitter.ajaxRequest("#pane1",rootDir + "ObjectDetail/Index", { id: nodeid });
            splitterch.ajaxRequest("#pane4", rootDir + "Document/Index", { id: nodeid, DocumentID: nodeid });
    }

    here is partial view Content for pane1

    @using (Html.BeginForm("SubmitObjectCollection", "ObjectDetail", FormMethod.Post, new { @name = "frmObjdetails", Id = "frmObjdetails" }))
    {

    }

    here is partial view Content for pane4

    @using (Html.BeginForm("SubmitFormCollection", "Document", FormMethod.Post, new { data_ajax = "false", @name = "frmDoc", id = "frmDoc" }))
    {

    }

     

    In main view on button 1 click i do

    var dataPost = $('#frmObjdetails').serialize();
    $.ajax({
    cache: false,
    async: false,
    url: "@Url.Action("SubmitObjectCollection", "ObjectDetail")",
    type: 'POST',
    data: dataPost,
    success: function (data) {
    if (data.result == "Error") {
    alert(data.message);
    } else {

    }
    }
    });

    and button2 click

    var dataPost = $('#frmDoc').serialize();
    $.ajax({
    cache: false,
    async: false,
    url: "@Url.Action("SubmitFormCollection", "Document")",
    type: 'POST',
    data: dataPost,
    success: function (data) {
    if (data.result == "Error") {
    alert(data.message);
    } else {
    // alert(data);
    }
    }
    });

     

    But when both panes are loaded clicking button 1 submit frmDoc .

     

    What is causing this Problem. How can i post correct form on respective button click

     

    Thanks

     

    Anamika

     

  2. Dimitar
    Admin
    Dimitar avatar
    362 posts

    Posted 22 Sep 2017 Link to this post

    Hello Anamika,

    I am afraid that I am not able to determine the cause of the error based on the snippets provided. It would be helpful if you provide a runnable isolated sample of the respective setup, which could be used for issue reproduction and debugging on our side. As the forum system does not support attaching archives, you may open a support thread for this scenario.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top