Use HTTP POST for loading content via Kendo tabstrip

Question

Kendo tabstrip accepts content loading ContentUrl as ajax via HTTP GET, is there a way to load this content via POST?

A kendo tabstrip accepts a kendo.data.Datasource for loading content

See http://dojo.telerik.com/EmECoy

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataContentUrlField: "ContentUrl",
    dataSource: [
      { Name: "Tab1", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html" },
      { Name: "Tab2", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html" }
    ]
});

kendo.data.DataSource has an available READ type of "POST" but i cannot grasp if it is possible to plug this mechanism into the content loading of the tabstrip.. or am i stuck with an AJAX GET call to retrieve this ?

Answer 1

Here is my solution to bypass the built in tab mechanisms for loading content: http://dojo.telerik.com/omOre

Empty content urls in the tab definition:

jQuery(function(){jQuery("#tabstrip").kendoTabStrip({"select":onselect,"activate":onactivate,"contentLoad":onContentLoad,"animation":false,"contentUrls":["","","",""]});});

//Track our content
var tabcontent = [{"contentloaded":true},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html"},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html"},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent3.html"} ];

Implement the "select" event - Determine if we should load the tab via AJAX (post) - Track if tab already loaded

//When selected, if ajax and not not loaded - load the content
  function onselect(e) {
      console.log("select");            
        var index = $(e.item).index();
        var taburl =    tabcontent[index].url;
        var contentloaded = tabcontent[index].contentloaded;

          if(taburl !== "" && contentloaded !== true)
          {
              //get reference to the TabStrip widget
            var ts = $("#tabstrip").data("kendoTabStrip");

            //get the tab content
            var item = ts.contentElement(index);                 

            $.ajax({
              type: "get",//simple change! "post",
              url: taburl,
              success: function (response) {                         
                $(item).html(response);
                tabcontent[index].contentloaded = true;
                console.log("Tab Index: " + index + ", Url: " + taburl + " [[ajax success]]");
              }
            });
              }
          }