Amir Hoshang Kioumars

Tuesday, 2 April 2019

JQuery Datatable with Update Panel in ASP.NET

</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
...
</form>

<script>

$(document).ready(function () {
// bind data table on first page load
bindDataTable();

// bind data table on every UpdatePanel refresh
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable);
});

function bindDataTable() {
// Apply DataTable library
jQuery('.datatable-sortable').hide().each((index, element) => {
jQuery(element)
.prepend(jQuery("<thead></thead>")
.append(jQuery(element).find("tbody tr:first")))
.dataTable(
{
"oLanguage": {
"sLengthMenu": "Show _MENU_",
},
"order": [],
"iDisplayLength": 20,
"aLengthMenu": [[-1, 10, 20, 30, 50, 100, 200], ["All", 10, 20, 30, 50, 100, 200]],
"fnInitComplete": function () {
jQuery(element)
.show()
.addClass("hover")
.addClass("compact")
.addClass("nowrap");
}
});
});
}
</script>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

</body>

Sunday, 31 March 2019

Create Private Route in React

Sunday, 17 March 2019

Sample React Context: Provider/Consumer

index.js

import React from "react";

import ReactDOM from "react-dom";

import Provider, {Context} from '../context'

function App() {

return (

<h1>This is the heading</h1>

<Context.Consumer>

{ctx => ctx.number}

</Context.Consumer>

<Context.Consumer>

{ctx => <button onClick={ctx.inc}>inc</button>}

</Context.Consumer>

</div>

</Provider>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

context.js (or store.js)

import React from "react";

import ReactDOM from "react-dom";

export const Context = React.createContext();

class Provider extends React.Component {

state = {

number: 0,

inc: () => this.setState({ number: this.state.number + 1 })

};

render() {

return (

<Context.Provider value={this.state}>

{this.props.children}

</Context.Provider>

);

}

export default Provider;

Saturday, 9 March 2019

React, Apollo Boost, GraphQL, Flux, Mangoos Required Packages for a new Project

Package.json

{
"name": "react-recipes",
"version": "1.0.0",
"description": "A starter for React-Apollo-GraphQL projects",
"main": "server.js",
"scripts": {
"server": "nodemon server.js",
"client": "cd client && npm start",
"dev": "concurrently --names \"server,client\" \"npm run server --silent\" \"npm run client --silent\""
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^1.3.6",
"bcrypt": "^2.0.1",
"body-parser": "^1.18.3",
"concurrently": "^3.5.1",
"cors": "^2.8.4",
"dotenv": "^5.0.1",
"express": "^4.16.3",
"graphql": "^0.13.2",
"graphql-tools": "^3.0.2",
"jsonwebtoken": "^8.2.1",
"mongoose": "^5.1.3"
},
"devDependencies": {
"nodemon": "^1.17.5"
}
}

PS > npm install

Thursday, 7 March 2019

Node port blocked - Listen EADDRINUSE: address already in use :::4000

Windows: taskkill /F /IM node.exe
Linux: killall node

Tuesday, 5 March 2019

Prisma Deploy Docker error “Could not connect to server”

Make sure Docket Quick Start Terminal is running and IP address is set to a known IP (e.g. 192.168.x.x), then change the endpoint in prisma.yml to http:192.168.x.x:4466

Docker Error Getting IP Address

Docker Error getting IP address: ssh command error

Resolution

$ docker-machine rm default
$ docker-machine create --driver virtualbox default