Kendosplitter with multiple ajaxrequest form post problem

[Anamika]

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

 

[Dimitar]

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