jQWidgets Forums

jQuery UI Widgets › Forums › Plugins › AngularJS › How to add a textbox value in grid when i click button

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    How to add a textbox value in grid when i click button Posts
  • November 18, 2014 at 2:12 pm How to add a textbox value in grid when i click button #62970

    karthick singh
    Participant

    Hi,

    I want to add one row in jqxGrid from textbox when I click a button.

    
<div ng-app="gridFieldApp" ng-controller="gridFieldController">
<div>
     <jqx-grid id="sampleGrid"></jqx-grid>
</div>
<input type="text" ng-model="newItem.Trading" name="textbox"></input>
<jqx-button ng-click="addItems()">Add</jqx-button>

</div>
    var app=angular.module("gridFieldApp",["jqwidgets"]);
app.controller("gridFieldController",function($scope){

	var uid = 1;
	
	$scope.data1 = [{ id:0 ,'Trading':'All',checked:'w'}];

	$scope.addItems = function(){
		if($scope.id == null){
			 $scope.newItem.id = uid++;
		        $scope.data1.push($scope.newItem);
		        console.log($scope.newItem);
		} else {
	        for(i in $scope.data) {
	            if($scope.data1[i].id == $scope.newItem.id) {
	            	$scope.data1[i] = $scope.newItem;
	            }
	        }               
	    }
	$scope.newItem = {};
	return $scope.data1;
	}
	
	$scope.gridSource = {
		localdata : $scope.data1,
		datafields: [
	        { name: 'Trading', type: 'string' },
	        { name: 'checked', type: 'string' }
	    ],
		datatype : "JSON"
	};
	
	$scope.gridDataAdapter = new $.jqx.dataAdapter($scope.gridSource, {
		loadComplete : function(data) {
		},
		loadError : function(xhr, status, error) {
		}
	});
	
	$('#sampleGrid').jqxGrid({
		source : $scope.gridDataAdapter,
		columns : [ {
			text : 'Trading',
			datafield : 'Trading',
			width : 100
		},
		{
			text : 'checked',
			datafield : 'checked',
			width : 100
		}
		]
	});
	
});
    November 19, 2014 at 7:22 am How to add a textbox value in grid when i click button #63000

    Peter Stoev
    Keymaster

    Hi karthick singh,

    Please, take a look at the example below which illustrates how to add a new row to jqxGrid:

    <!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script>
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            // Grid data.
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];

            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data[i] = row;
            }

            $scope.people = data;

            $scope.bindingCompleted = "";
            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                ready: function () {
                    $scope.settings.apply('selectrow', 1);
                },
                sortable: true,
                source: $scope.people,
                columns: [
                    { text: 'First Name', datafield: 'firstname', width: 150 },
                    { text: 'Last Name', datafield: 'lastname', width: 150 },
                    { text: 'Title', datafield: 'title', width: 150 },
                    { text: 'City', datafield: 'city', width: 150 },
                    { text: 'Country', datafield: 'country' }
                ]
            }
            $scope.addRow = function () {
                var row = {};
                row["firstname"] = "My Name 1";
                row["lastname"] = "My Last Name 1";
                row["title"] = "My Title";
                row["city"] = "My City";
                row["country"] = "My Country"; 
                $scope.people.push(row);
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-settings="settings"></jqx-grid>
        <button ng-click="addRow()">Add Row</button>
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.