How to generate dynamic repeating controls and providing unique ids using HTML and JQuery?

Hi Folks,

It has been a long time, Hope everyone is doing great.

In this post I am writing about how to generate dynamic repeating controls and providing unique ids using HTML and JQuery. You will come to know how to create a multiple list of controls, that will be created when you click on add button, and then providing unique ids to them. I am assuming you have referenced JQuery libraries in your page already.Let us jump to the steps.

  • Inside the html body tag part, declare a div and give its id as “divDynamic”.

<span id=”btnAddNew”>Add New</span>

<div id=”divDynamic”></div>

  • Create another div that is set to display none and its id is going to be “divTemplateContainer”. This is going to have all the controls that are going to be repeated.

<div style=”display:none” id=”divTemplateContainer”>

<input type=”text” id=”textbox”/>

<input type=”text” id=”textbox1″/>

</div>

  • Now, we need to regenerate the controls on click of “Add New”. So, inside the script tag, write a Jquery click event for the btnAddNew, where fetch the inner html of the template and append it to the divDynamic. Once after appending pass the container id and index and replace the ids as given in the “GetElementInsideContainer” method.

<script>

var Index = 0;

$(“#btnAddNew”).click(function () {

var template= $(“#divTemplateContainer”)[0].innerHTML;
var domText = ‘<div id=”template’ + Index + ‘”></div>’;
if (template!= “”) {
$(“#divDynamic”).append(domText);
$(“#template” + Index ).append(template);
GetElementInsideContainer(“template” + Index , Index ); /*Call the action by passig the div id and the index*/
Index ++;
}

});

/*Change the ids within the template on the fly*/
function GetElementInsideContainer(containerID, index) {
var elm = {};
var elms = document.getElementById(containerID).getElementsByTagName(“*”);
for (var i = 0; i < elms.length; i++) {
if (elms[i].id) {
$(“#” + elms[i].id).attr(“id”, elms[i].id + index);
}
}
}

</script>

Hope the above steps saves your time. Happy coding!

பிரிவு !!!

கணவுகள் சொன்ன கதைகள் எல்லாம் ,
கண்களில் தென்பட்ட நாட்கள் எங்கே! – தெரியாமல்,
கடுஞ்சொல் அம்புகள் ஏவியதால்,
கண்ணீர் மட்டும் மிஞ்சியது இங்கே!

சொல்ல வந்த வார்த்தைகள் எல்லாம்,
சொல்லாமல் புரிந்த நாட்கள் எங்கே! – புரியாமல் ,
சொல்லி முடித்த வார்த்தைகளால்,
சோகம் மட்டும் நீள்கிறது இங்கே!

இதழ்கள் பேசிய சொற்கள் எல்லாம் ,
இதயம் சேமித்த நாட்கள் எங்கே! – அறியாமல்,
இளைத்து விட்ட தவறுகளால்,
இடிந்து போன இதயம் இங்கே!

உரசிப் போன நொடிகள் எல்லாம்,
உறைந்து நின்ற நாட்கள் எங்கே! – வேகத்தால்,
உடைந்து விட்ட உறவதனால்,
உருக்குகின்ற வலி தான் இங்கே!

Using Charts In SSRS Reports

Hello Buddies!

In the previous tutorial, we saw how to generate a simple SSRS report. In this tutorial, let us see how can we use charts in SSRS reports.

The steps are

  • Create a data source that is pointing to the database used by your query. In this case, I am using AdventureWorks database.
  • Once you create the data source by providing the connection string, then create a new report, by providing the Query for which you want to generate the report. Follow the screenshots given below for more information.
  • Once you have created the data set by running the report generation wizard following the steps shown in the screenshots, double click on the chart control in the tool box, that will display you the choice of graphs to choose from. Select the bar chart and click ok.
  • Now double click on the chart to get the chart data area, where provide the Value by adding the one that has to come in Y axes, and below which add the category by choosing from the data set (It appears as X axes).
  • After renaming the chart, axes and grid displaying data, click on Preview to view the chart along with its data statistics.

The images below would guide you how to create a report with charts.

This slideshow requires JavaScript.

Hope you find it useful. Thanks for reading!!!

Getting Started with SSRS

Let us now take a look, how to generate a report using SSRS.

1) Open your Visual Studio

2) Click on File >> New >> Project

3) A Dialog Box will open from which select the Report Server option under the Business Intelligence Projects, as Shown below.

Add New Report Server Project

Add a New Report Server Project

4) Now, Go to the Solution Explorer >> right click on Shared Data Sources folder and Select “Add new DataSource” >> A dialog will open where you can provide the DataSource name and connection string details.

Add a new Data Source

Add a new Data Source

5) Now, right click on the reports folder >> Select  “add a new report” >> A Report wizard will appear

Report Wizard

Report Wizard

6) In the Report Wizard write your Query and View it from the Query Designer.

Design the Query

Design the Query

Query Designer

Query Designer

7) Select the View of the report and select the elements to be displayed and grouped and Click Finish. In the image below we are grouping the report based in PayFreequency column.

Grouping

Grouping the reports

8) Give a Name to your Report.

Name the Report

Name the Report

9) Now, your report will be generated with the extension .rdl that can be found in under the reports folder. In the design view, we will be able to align and format the reports where as we pan preview it using the Preview Tab.

Design View

Design View

Preview

Preview

குறைபிரசவம்!

குருதி சிந்தி பெற்ற சுதந்திரம் கொண்டு பிறர்
குருதியை உறிஞ்சும் கொடுமை ஏனோ?

பெண்ணை பேணிகாக்கும் எண்ணம்கொண்ட சுதந்திர நாட்டில்
அவள் பாதுகாப்புக்கு பாதகம் தான் ஏனோ?

ஒற்றுமையாய் இணைந்துவென்ற ஒற்றைலட்சியமம் சுதந்திரத்தை
கூறிட்டு  கொலைசெய்யும் கொடூரம்தான் ஏனோ?

முப்புறமும் கடற்கரையும் மறுபுறத்தில் இமயமும் சூழ்ந்தவளே
ஆழ்பவரும் செழித்து வாழ்பவரும் கறைபடுத்தும்  இமாலயஊழல்கள் ஏனோ ?

அன்பிற்கும் பண்பிற்கும் பிழையல்ல பண்பாட்டிற்கும் பெயர்போனவளே
உன்பிள்ளைகள் பங்காளித்தகராற்றில் நிலதிகும்-நீருக்கும் அடித்துகொள்ளும் அவலம் ஏனோ?

தவமிருந்து பெற்றபிள்ளை சுதந்திரம் அதை குறைமாதத்தில் பிரசவித்தாயோ?
தாயே,  இல்லைக் குறைகளுடன் பிரசவிதாயோ?

SSRS – an Introduction

SSRS stands for SQL Server Reporting Services, a widely used Microsoft Technology for developing dynamic reports.

The executables for SSRS are known as rdls, Report Definition Language which is a mark up language which resembles like a XML when you view it in code view.

(SSRS files will have the extention as .rdl that has to deployed in the Report servers for using the application)

In order to develop SSRS reports we need to have the SQL Server R2 installed in our machine, with the Visual Studio Report Development IDE supporting the SQL server version.

In order to make use of the deployed rdl files in the report servers, we have to make use of the ReportViewer control, through which the Report can communicate with the website.

The main advantage of SSRS is, we can use various data sources like SQL Server, Azure, Oracle to generate the reports.

The effeciency of the Reports depend on the Queries we design.

It is always an advantage for a SSRS beginer to handle the most of the functionality in the Queries instead depending on the development interface.

Also, databases will always have a edge over the development server. So when you dont have huge logical dependencies in the Report side, your report will render very soon.

புதிதாய் உதித்த சூரியன் வேண்டும்!
அதன் முதற் கதிர் என்னை தழுவிட வேண்டும்!!

தினம் தினம் இரவில் பௌர்ணமி வேண்டும்!
அதை தனியாய் நான்மட்டும் ரசித்திட வேண்டும்!!

சிறியதாய் அதிர்ந்திடும் நிலநடுக்கம் வேண்டும்!
அதுநான் துயில்கொள்ளும் தொட்டிலை ஆட்டிவிட வேண்டும்!!

சுற்றியும் ஆயிரம் பூச்செடி வேண்டும்!
அதில் பூக்கள் உடன்சேர்ந்து சிரித்திட வேண்டும்!!

தானே இசைக்கும் கருவிகள் வேண்டும்!
அவை எனக்காக மட்டுமே இசைத்திட வேண்டும்!!

மையிருட்டில் துணையாக விடிவெள்ளி வேண்டும்!
அது விரல்பிடித்து வழிகாட்டி நடந்திட வேண்டும்!!

முதற்பணி நனைத்த புல்வெளி வேண்டும்!
அதில்நான் உறங்கிட தனியாய் தாலாட்டு வேண்டும்!!