Create and display Datatable in c# with dynamic rows and columns count

• Asp.net Code

        <div>
              <asp:GridView ID="gv" runat="server"></asp:GridView>
            <br />
            COL:
            <asp:Label ID="lblCol" runat="server"></asp:Label><br />
            ROW:
            <asp:Label ID="lblRow" runat="server"></asp:Label><br />
            <asp:GridView ID="gv1" runat="server"></asp:GridView>
            <br />
            <div id="divTitle" runat="server"></div>
        </div>

• C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Text;

namespace DynamicTable

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            DataTable table = new DataTable();

            table.Columns.Add("Job", typeof(string));

            table.Columns.Add("Col", typeof(int));

            table.Columns.Add("Row", typeof(int));

            table.Rows.Add("Data 1", 1, 1);

            table.Rows.Add("Data 2", 2, 1);

            table.Rows.Add("Data 3", 3, 1);

            table.Rows.Add("Data 4", 4, 1);

            table.Rows.Add("Data 5", 5, 1);

            table.Rows.Add("Data 6", 6, 1);

            table.Rows.Add("Data 7", 7, 1);

            table.Rows.Add("Data 8", 8, 1);

            table.Rows.Add("Data 9", 1, 2);

            table.Rows.Add("Data 10", 2, 2);

            table.Rows.Add("Data 11", 3, 2);

            table.Rows.Add("Data 12", 4, 2);

            table.Rows.Add("Data 13", 5, 2);

            table.Rows.Add("Data 14", 6, 2);

            table.Rows.Add("Data 15", 7, 2);

            table.Rows.Add("Data 16", 8, 2);

            table.Rows.Add("Data 17", 1, 3);

            table.Rows.Add("Data 18", 1, 4);

            table.Rows.Add("Data 19", 8, 3);

            table.Rows.Add("Data 20", 8, 4);

            table.Rows.Add("Data 21", 8, 5);

            table.Rows.Add("Data 22", 8, 6);

            table.Rows.Add("Data 23", 8, 7);

            table.Rows.Add("Data 24", 8, 8);

            table.Rows.Add("Data 25", 8, 9);

            gv.DataSource = table;

            gv.DataBind();

            int col = Convert.ToInt32(table.AsEnumerable().Max(row1 => row1["Col"]));

            int row = Convert.ToInt32(table.AsEnumerable().Max(row1 => row1["Row"]));

            lblCol.Text = col.ToString();

            lblRow.Text = row.ToString();

            DataTable dt = new DataTable();

            for (int i = 1; i <= col; i++)

            {

                dt.Columns.Add(i.ToString(), typeof(string));

            }

            for (int i = 1; i <= row; i++)

            {

                DataRow workRow;

                workRow = dt.NewRow();

                for (int j = 0; j < col; j++)

                {

                    DataRow drow = table.AsEnumerable().Where(p => p.Field<Int32>("Col") == j + 1 && p.Field<Int32>("Row") == i).FirstOrDefault();

                    if (drow == null)

                    {

                        // workRow[j] = "(" + i.ToString() + "," + (j + 1).ToString() + ")";

                        workRow[j] = "No_Data";

                    }

                    else

                    {

                        workRow[j] = drow["Job"].ToString();

                    }

                }

                dt.Rows.Add(workRow);

            }

            gv1.DataSource = dt;

            gv1.DataBind();

            divTitle.InnerHtml = ExportDatatableToHtml(dt);

        }

        protected string ExportDatatableToHtml(DataTable dt)

        {

            StringBuilder strHTMLBuilder = new StringBuilder();

            strHTMLBuilder.Append("<table>");

            strHTMLBuilder.Append("<tr >");

            foreach (DataColumn myColumn in dt.Columns)

            {

                strHTMLBuilder.Append("<td><div style='background-color:red;'>");

                strHTMLBuilder.Append(myColumn.ColumnName);

                strHTMLBuilder.Append("</div></td>");

            }

            strHTMLBuilder.Append("</tr>");

            foreach (DataRow myRow in dt.Rows)

            {

                strHTMLBuilder.Append("<tr >");

                foreach (DataColumn myColumn in dt.Columns)

                {

                    strHTMLBuilder.Append("<td >");

                    if (myRow[myColumn.ColumnName].ToString() != "No_Data")

                    {

                        strHTMLBuilder.Append("<div style='background-color:green;'>");

                        strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());

                        strHTMLBuilder.Append("</div>");

                    }

                    strHTMLBuilder.Append("</td>");

                }

                strHTMLBuilder.Append("</tr>");

            }

            //Close tags.  

            strHTMLBuilder.Append("</table>");

            string Htmltext = strHTMLBuilder.ToString();

            return Htmltext;

        }

    }

}

Output:

Media Queries inline styles using radium

• Create Components folder under src folder
• Add MediaQueriesInlineStylesUsingRadium.js file and add below Code

import React from 'react';

import Radium, { StyleRoot } from 'radium';

const MediaQueriesInlineStylesUsingRadium = (  ) => {

    const style = {

        '@media (max-width: 900px)': {

            color:'red'

        },

        '@media (max-width: 500px)': {

            color:'blue'

        }

    };

    return (

        <StyleRoot>

        <div  style={style}>

             <h1>Media Queries Inline Styles Using Radium</h1>

        </div>

        </StyleRoot>

    );

};

export default Radium(MediaQueriesInlineStylesUsingRadium);

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import MediaQueriesInlineStylesUsingRadium from './Components/MediaQueriesInlineStylesUsingRadium'

import Radium, { StyleRoot } from 'radium';

function App() {

  return (

    <div className="App">

      <StyleRoot>

     <MediaQueriesInlineStylesUsingRadium/>

     </StyleRoot>

    </div>

  );

}

export default App;

Output:

Mouse hover inline styles using radium

• Create Components folder under src folder
• Add MouseHoverInlineStylesUsingRadium.js file and add below Code

import React, { Component } from 'react';

import Radium, { StyleRoot } from 'radium';

class MouseHoverInlineStylesUsingRadium extends Component {

  state = {

    showDiv: false

  }

  toggleDivHandler = () => {

    const doesShow = this.state.showDiv;

    this.setState( { showDiv: !doesShow } );

  }

  render () {

    const style = {

      backgroundColor: 'green',

      color: 'white',

      font: 'inherit',

      border: '1px solid blue',

      padding: '8px',

      cursor: 'pointer',

      ':hover': {

        backgroundColor: 'lightgreen',

        color: 'black'

      }

    };

    let divData = null;

    if ( this.state.showDiv ) {

      divData = (

        <div>

         My Data

        </div>

      );

      style.backgroundColor = 'red';

      style[':hover'] = {

        backgroundColor: 'salmon',

        color: 'black'

      };

    }

    return (

        <div className="App">

          <h1>Mouse Hover Inline Styles Using Radium</h1>

          <button

            style={style}

            onClick={this.toggleDivHandler}>Toggle Div</button>

          {divData}

        </div>

    );

  }

}

export default Radium(MouseHoverInlineStylesUsingRadium);

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import MouseHoverInlineStylesUsingRadium from './Components/MouseHoverInlineStylesUsingRadium'

function App() {

  return (

    <div className="App">

     <MouseHoverInlineStylesUsingRadium/>

    </div>

  );

}

export default App;

Output:

Before mouse hover:

After mouse hover:

Radium in React JS

Radium:
Radium is a set of tools to manage inline styles on React elements, giving you powerful styling capabilities without CSS

How to install in React Project: You can install using below command

•  npm install --save radium

More Info: https://formidable.com/open-source/radium/

Setting CSS Class Names Dynamically in React

• Create Components folder under src folder
• Add SettingClassNamesDynamically.js file and add below Code

import React, { Component } from 'react';

import './SettingClassNamesDynamically.css';

class SettingClassNamesDynamically extends Component {

    state={

        myCount:3

      }

  render () {

    

const classes=[];

if(this.state.myCount===1)

{

    classes.push('red');

}

else

if(this.state.myCount===2)

{

    classes.push('red');

    classes.push('bold');

}

else

if(this.state.myCount===3)

{

    classes.push('red');

    classes.push('bold');

    classes.push('backColor');

}

    return (

        <div>

          <h1>Setting Class Names Dynamically</h1>

         <p className={classes.join(' ')}>Here is my test data, Based on count style will change</p>

        </div>

    );

  }

}

export default SettingClassNamesDynamically;

• Add SettingClassNamesDynamically.css file and add below Code

.red {

    color:red;

  }

.bold {

    font-weight:bold;

 }

 .backColor{

    background-color:green;

 }

• Open App.js file and update code as below\

import React from 'react';

import './App.css';

import SettingClassNamesDynamically from './Components/SettingClassNamesDynamically'

function App() {

  return (

    <div className="App">

     <SettingClassNamesDynamically/>

    </div>

  );

}

export default App;

Output:

If myCount=1

If myCount=2

If myCount=3

Styles Dynamically Example in React

• Create Components folder under src folder
• Add StylesDynamically.js file and add below Code

import React, { Component } from 'react';

class StylesDynamically extends Component {

  state = {

    showDiv: false

  }

  toggleDivHandler = () => {

    const doesShow = this.state.showDiv;

    this.setState( { showDiv: !doesShow } );

  }

  render () {

    const style = {

      backgroundColor: 'green',

      color: 'white',

      font: 'inherit',

      border: '1px solid blue',

      padding: '8px',

      cursor: 'pointer',

      ':hover': {

        backgroundColor: 'lightgreen',

        color: 'black'

      }

    };

    let divData = null;

    if ( this.state.showDiv ) {

      divData = (

        <div>

         My Data

        </div>

      );

      style.backgroundColor = 'red';

      style[':hover'] = {

        backgroundColor: 'salmon',

        color: 'black'

      };

    }

    return (

        <div className="App">

          <h1>Styles Dynamically</h1>

          <button

            style={style}

            onClick={this.toggleDivHandler}>Toggle Div</button>

          {divData}

        </div>

    );

  }

}

export default StylesDynamically;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import StylesDynamically from './Components/StylesDynamically'

function App() {

  return (

    <div className="App">

     <StylesDynamically/>

    </div>

  );

}

export default App;

Output:

Toggle example in React

• Create Components folder under src folder
• Add ToggleExp1.js file and add below Code

import React, { Component } from 'react';

class ToggleExp1 extends Component {

  state = {

    showDiv: false

  }

  toggleDivHandler = () => {

    const doesShow = this.state.showDiv;

    this.setState( { showDiv: !doesShow } );

  }

  render () {

    let divData = null;

    if ( this.state.showDiv ) {

      divData = (

        <div>

         My Data

        </div>

      );

    }

    return (

        <div className="App">

          <h1>Toggle Example</h1>

          <button

            onClick={this.toggleDivHandler}>Toggle Div</button>

          {divData}

        </div>

    );

  }

}

export default ToggleExp1;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import ToggleExp1 from './Components/ToggleExp1'

function App() {

  return (

    <div className="App">

     <ToggleExp1/>

    </div>

  );

}

export default App;

Output:

Two way data binding in react

In this Example we can see Two way data binding (Parent to Child and Child to parent) 

• Create Components folder under src folder
• Add TwoWayBindingParent.js file and add below Code

import React,{Component} from 'react';

import TwoWayBindingChild from './TwoWayBindingChild';

class  TwoWayBindingParent extends Component {

  state={

    Person:[

      {name:'adi',age:29}

    ]

  }

nameChangedEvent=(event)=>{

    this.setState({Person:[

        {name:event.target.value ,age:30}

      ]})

    }

  render(){

  return (

    <div>

        <p>Two Way Binding </p>

      <TwoWayBindingChild 

      name={this.state.Person[0].name} 

      age={this.state.Person[0].age}

      changed={this.nameChangedEvent}/>

    </div>

  );

  }

}

export default TwoWayBindingParent;

• Add TwoWayBindingChild.js file and add below Code

import React from 'react';

const TwoWayBindingChild =(props)=>{

    return(

        <div>

        <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>

       <input type="text" onChange={props.changed}></input>

        </div>

    );

}

export default TwoWayBindingChild;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import TwoWayBindingParent from './Components/TwoWayBindingParent'

function App() {

  return (

    <div className="App">

     <TwoWayBindingParent/>

    </div>

  );

}

export default App;

Output:

Passing Method References Between Components Example in React

• Create Components folder under src folder
• Add PassingMethodReferencesBetweenComponent.js file and add below Code

import React,{Component} from 'react';

import Person from './Person';

class  PassingMethodReferencesBetweenComponent extends Component {

  state={

    Person:[

      {name:'adi',age:29},

      {name:'balu',age:30},

      {name:'krishna',age:28}

    ],

    otherState:'some other value'

  }

switchNameHandler=()=>{

this.setState({Person:[

    {name:'jc adi',age:29},

    {name:'balu',age:30},

    {name:'krishna',age:28}

  ]})

}

  render(){

  return (

    <div>

        <p>Passing Method References Between Components Example</p>

      <Person 

      name={this.state.Person[0].name} 

      age={this.state.Person[0].age}/>

      <Person 

      name={this.state.Person[1].name} 

      age={this.state.Person[1].age}

      click={this.switchNameHandler}/>

      <Person 

      name={this.state.Person[2].name} 

      age={this.state.Person[2].age}/>

    </div>

  );

  }

}

export default PassingMethodReferencesBetweenComponent;

• Add Person.js file and add below Code

import React from 'react';

const person =(props)=>{

    return(

        <div>

        <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>

        <p>{props.children}</p>

        </div>

    );

}

export default person;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import PassingMethodReferencesBetweenComponent from './Components/PassingMethodReferencesBetweenComponent'

function App() {

  return (

    <div className="App">

     <PassingMethodReferencesBetweenComponent/>

    </div>

  );

}

export default App;

Output: