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

Kendosplitter with multiple ajaxrequest form post problem

1 Answer 33 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 20 Sep 2017, 08:50 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 22 Sep 2017, 08:49 AM
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.
Tags
Splitter
Asked by
Anamika
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or