Add Records from External Form

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

This sample demonstrates how you add a new record using an external input element.

Solution

      <button id="openBtn">Open</button>

      <div id="tabstrip">
        <ul>
          <li id="tab1">Grid</li>
          <li id="tab2">Add New</li>
        </ul>
        <div><div id="grid"></div></div>
        <div>Add new record<br/>
          <input id='newName'/>
          <button onclick='addNew();'>Submit</button>
        </div>
      </div>

      <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
      <script>
        var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

        var grid = $("#grid").kendoGrid({
          dataSource: {
            data: products,
            pageSize: 5
          },
          height: 200,
          editable: true,
          pageable: true,
          scrollable: true,
          columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
          ]
        }).data("kendoGrid");

        //apply the activate event, which is thrown only after the animation is played out
        tabstrip.one("activate", function() {
          grid.resize();
        });

        $("#openBtn").click(function(e) {
          tabstrip.activateTab($("#tab1"));
        });
        function addNew(){
          var dataSource = $("#grid").data().kendoGrid.dataSource;
          dataSource.add({ ProductName: $("#newName").val(), UnitPrice: 1,UnitsInStock: 3 });
          tabstrip.activateTab($("#tab1"));

          var items = dataSource.data().length;
          var pageSize = dataSource.pageSize();
          var pageNum = parseInt(items / pageSize) + 1;

          dataSource.page(pageNum);
        }
      </script>