New to Kendo UI for jQuery? Download free 30-day trial

Add Records from External Form


Product Grid for Progress® Kendo UI®


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


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

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

      <script src=""></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: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }

        //apply the activate event, which is thrown only after the animation is played out"activate", function() {

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

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


In this article
Not finding the help you need? Improve this article