Unique counter in ng-repeat - javascript

I have this table with 15 row.
Plunkr
Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="item in myObj">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = [ {
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}]
});
</script>
</body>
</html>
and here's the output:
Let's say I delete an object in the array, total row will be 14 and when I add an object into array, it will return to 15. That was expected.
Now what I want to do is, WITHOUT using controller and everything is done in the VIEW; after I remove an object and add it back, I want the row will shown as 16 and not 15. I mean $index should be increasing and not decreasing.
I have done it with controller but is it possible to do it with only in the view?
Thanks for your time and any help in advance.


You could "soft-delete" the row. Instead of actually removing it from the array, you can simply mark it as deleted. Then the count will continue to increase as you add items:
function softDelete(item) {
item.deleted = true;
}
I don't know why you wouldn't want to use the controller, but this could also be done in the view:
<tr ng-repeat="item in myObj" ng-click="item.deleted = true" ng-hide="item.deleted">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
Here is a plunker demonstrating:
https://plnkr.co/edit/yuAIXn5Pe9YbwxXW2qih?p=preview

Related

Comparing 2 arrays of nested objects while ignoring some properties in Javascript

I'm looking to check an API response for against a set of values but the API response contains some additional info that I'm not interested in checking against
Data to check:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
}
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "45 Headrow",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 287
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.87"
}
}
]
API response:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
So I'm not interested in what values are returned for dbIdentifier, designAndCondition and developmentCompletionDate as they are not in my data to check against but I would like to compare the values for the rest of the properties. In practice these arrays will have more than 2 items
I was initially thinking I would remove the unwanted properties from the objects using the function below
const newArray = responseBody.map(({ dbIdentifierIdentifier, detail: { designAndCondition, developmentCompletionDate }, ...rest }) => rest)
Then ordering by address.uniqueIdentifier, converting to JSON strings and comparing the strings but the function above doesn't work with the nested properties as newArray doesn't contain the detail object at all
newArray:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
IS it possible to do it the above way by passing a destructured nested object a map function?

One way to remove the unwanted properties from the API response would be to first copy the response into a new array (to preserve the original response), then delete the properties:
const apiResponse = [{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
let apiResponseCopy = JSON.parse(JSON.stringify(apiResponse))
var newArray = apiResponseCopy.map(i => {
delete i.dbIdentifier
delete i.detail.designAndCondition
delete i.detail.developmentCompletionDate
return i
})
console.log(newArray)
Then, you should be able to compare the newArray against your data.

How to sort an object of objects in JavaScript?

I have an object of objects named teams:
{
"1": {
"number": "134C",
"robotName": "chazzen",
"name": "Team Discovery - Charlie",
"organization": "Pembroke Academy",
"city": "Pembroke",
"region": "New Hampshire",
"country": "United States"
},
"2": {
"number": "134G",
"robotName": "Ghammer Time",
"name": "Team discovery -Golf",
"organization": "Pembroke Academy",
"city": "Pembroke",
"region": "New Hampshire",
"country": "United States"
},
"3": {
"number": "134K",
"robotName": "Team Discovery kilo",
"name": "Team Discovery -Kilo",
"organization": "Pembroke Academy",
"city": "Pembroke",
"region": "New Hampshire",
"country": "United States"
},
"4": {
"number": "134E",
"robotName": "Team Discovery -Echo",
"name": "Team Discovery - Echo",
"organization": "Pembroke Academy",
"city": "Pembroke",
"region": "New Hampshire",
"country": "United States"
}
}
How do I sort these "sub-objects" alphabetically and numerically based on values such as "number" or "name" in a function?

how to get data from a json file in real time

I try to make this for a long time and i wrote some test script .I use setInterval to update the content once at 500s but i can't acces the inputs for exemple if i have a form there i don't know how i can write in input without the write been deleted.I use setInterval because i want to see every input from the database .
The index script
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}<input type="text" />
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
setInterval(function(){$http.get("customers.json").then(function (response) {
$scope.myData = response.data.records;
});},500);
});
</script>
</body>
</html>
And the json file
{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}

If you want do real-time application, nodejs + socket.io (websocket) will best fit your needs. Here is an example of how to use socket.io(websocket lib):
https://socket.io/get-started/chat/
In addition, any ajax calls will takes time, can easily take more then one second. Therefore, real-time web application need to use websocket instead of transitional ajax call.

how to load json in dependable drop downs?

<b>Country:</b>
<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()">
<option value=''>Select Country</option>
</select>
<b>State:</b>
<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource"
ng-change="GetSelectedState()" >
<option value=''>Select State</option>
</select><br>
<b>City:</b>
<select id="city" ng-disabled="!citiessource || !statessource" ng-model="codessource" ng-options="city for (city,code) in citiessource" ng-change="GetSelectedCity()"><option value=''>SelectCity
</option>
</select><br>
<b>PostCode: </b>
<select id="code" ng-disabled="!citiessource || !statessource || !codessource" ng-model="code" ng-change="GetSelectedCode()">
<option value=''>SelectZipCode
<option ng-repeat="code in codessource" value='{{code}}'>{{code}}</option>
</select>
$scope.countries = {
'USA': {
'IL': {'CHICAGO':['60633','60646','60653','60656','60607','60632','60643','60652','60620','60612','60661','60624','60634','60601','60827','60644','60631','60630','60617','60610','60659','60621','60647','60609','60616','60637','60655','60649','60602','60622','60642','60603','60629','60641','60619','60615','60640','60707','60654','60605','60623','60606','60614','60608','60604','60651','60638','60618','60611','60657','60613','60636','60639','60628','60625','60660','60645','60626']},
'CA': { 'SAN FRANCISCO':['94127','94115','94124','94131','94104','94103','94121','94188','94129','94122','94109','94134','94141','94144','94123','94110','94116','94158','94133','94105','94102','94112','94108','94111','94130','94117']},
'LA': { 'BATON ROUGE':['70812','70808','70806','70807','70805','70816','70810','70802','70819','70811','70809','70815','70820','70814','70801']},
}
};
Here, I am passing values manually as you can see in "$scope.countries" in dependable drop downs. i want to load these values through json.
My json is like:
[{
"country": "USA",
"state": "CA",
"city": "SAN FRANCISCO",
"postcode": "94127"
}, {
"country": "USA",
"state": "CA",
"city": "SAN FRANCISCO",
"postcode": "94107"
}, {
"country": "USA",
"state": "NY",
"city": "NEW YORK",
"postcode": "10026"
}, {
"country": "USA",
"state": "NY",
"city": "NEW YORK",
"postcode": "10016"
}, {
"country": "USA",
"state": "CA",
"city": "SAN FRANCISCO",
"postcode": "94115"
}, {
"country": "USA",
"state": "NY",
"city": "NEW YORK",
"postcode": "10009"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60623"
}, {
"country": "USA",
"state": "CA",
"city": "SAN FRANCISCO",
"postcode": "94124"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60606"
}, {
"country": "USA",
"state": "CA",
"city": "SAN FRANCISCO",
"postcode": "94131"
}, {
"country": "USA",
"state": "LA",
"city": "BATON ROUGE",
"postcode": "70812"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60614"
}, {
"country": "USA",
"state": "NY",
"city": "BRONX",
"postcode": "10461"
}, {
"country": "USA",
"state": "NY",
"city": "BROOKLYN",
"postcode": "11221"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60608"
}, {
"country": "USA",
"state": "NY",
"city": "NEW YORK",
"postcode": "10003"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60604"
}, {
"country": "USA",
"state": "IL",
"city": "CHICAGO",
"postcode": "60651"
},
}]
Please suggest me how should i do this.

jqxGrid inside jqxSplitter automatically maximizes its pane

A jqxsplitter splits screen horizontally. In one of split panes there is a jqxgrid with width=100% and height=100% so that the grid is resized automatically and with scrollbar.
There is a problem where as soon as I click on the grid pane it maximizes to full height closing the other pane.
window.addEventListener('load', function(e){
$('#tab').jqxSplitter({height:'100%', width: '100%' ,showSplitBar:true,orientation: 'horizontal', panels: [{ size: '50%'},{ size: '50%'}] });
var aliases = {
datatype: 'array',
localdata: [{col:'a'},{col:'b'}],
datafields:[
{name:'col',value:'col',type: 'string'}
]}
var s = new $.jqx.dataAdapter(aliases);
var columns = [
{ text: 'Column', dataField: 'col', width: 150, editable:true}
]
$('#grid').jqxGrid({
selectionmode: 'singlerow',
width: '100%',
height:'100%',
source: s,
pageable: false,
sortable: false,
editable: true,
columns: columns,
autoheight:false})}
,true)
htm:
<div id='tab'>
<div style="position:relative;">
a div...
</div>
<div id="grid"></div>
</div>
How can maximizing of grid pane inside a splitter be prevented in jqWidgets?

The general problem here is that your grid's height is set to 100% and you have some additional content above it which makes the resulting height larger than 100%. A simple solution would be if your grid's height is 90% and your other content above/below the Grid is 10% or something else.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this sample is demonstrated how to integrate jqxGrid with jqxSplitter</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName', type: 'string' },
{ name: 'ContactName', type: 'string' },
{ name: 'ContactTitle', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Country', type: 'string' }
],
localdata: data,
updaterow: function (rowid, rowdata, commit) {
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '100%',
height: '90%',
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 250 },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'City', datafield: 'City', width: 120 },
{ text: 'Country', datafield: 'Country'}
]
});
$("#CompanyName").jqxInput({height: 23});
$("#ContactName").jqxInput({ height: 23});
$("#ContactTitle").jqxInput({ height: 23});
$("#City").jqxInput({ height: 23});
$("#Country").jqxInput({ height: 23});
$("#splitter").jqxSplitter({ width: 680, height: 400, panels: [{ min: 150, size: 330 }, {min: 250}] });
$('#jqxgrid').on('rowselect', function (event) {
// event arguments.
var args = event.args;
// selected row.
var row = event.args.row;
// update inputs.
$("#CompanyName").val(row.CompanyName);
$("#ContactName").val(row.ContactName);
$("#ContactTitle").val(row.ContactTitle);
$("#City").val(row.City);
$("#Country").val(row.Country);
});
$("#Save").jqxButton({ width: 70, height: 23 });
$("#Save").click(function () {
var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
var data = { CompanyName: $("#CompanyName").val(), ContactName: $("#ContactName").val(), ContactTitle: $("#ContactTitle").val(), City: $("#City").val(), Country: $("#Country").val() };
$("#jqxgrid").jqxGrid('updaterow', rowid, data);
});
});
</script>
</head>
<body class='default'>
<div id="splitter">
<div>
<div style="background: blue; height:10%;"></div>
<div style="border: none;" id='jqxgrid'>
</div>
</div>
<div id="ContentPanel">
<form id="Form">
<table style="margin-top: 20px; width: 100%;">
<tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="CompanyName" /></td></tr>
<tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="ContactName" /></td></tr>
<tr><td style="text-align:right;">Contact Title:</td><td style="text-align:left;"><input type="text" id="ContactTitle" /></td></tr>
<tr><td style="text-align:right;">City:</td><td style="text-align:left;"><input type="text" id="City" /></td></tr>
<tr><td style="text-align:right;">Country:</td><td style="text-align:left;"><input type="text" id="Country" /></td></tr>
<tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
</table>
</form>
</div>
</div>
</body>
</html>

Categories

Resources