Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event - ASP.NET Discussion Boards

Assign a javascript or jQuery method to a button onClick event

indian14314-Nov-16 6:24

14-Nov-16 6:24

Hi All,

I have a following jQuery function, I want this function to be added to a button that is being added along with the Divs, one after the other. I have the Div adding function also, I want to assign "onRemoveClick" function to each input button that is added along with the Divs

var onRemoveClick=function () {
                alert($(this).parent().attr('id'));
                $(this).parent().remove();
            };

Here is my Divs adding function:

var addNewDate = function ($wrapper) {
    count++;
    var tmpHTML = '<div class="parameterFieldResize parameterField" style="width: fit-content;" id="' + paramName + '_1_Div' + count + '">' +
       '<input class="parameterDateRangePicker clearable start" style="width:70px" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
       '<input class="parameterDateRangePicker clearable end" style="width:70px" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
       '<button type="button" style="height:5px; width:5px" id="' + paramName + '_1_Remove' + count + '" class="remove-field">x</button>' +
     '</div>';

    var $newField = $(tmpHTML).appendTo($wrapper);

    $newField.find('.parameterDateRangePicker.clearable.start').datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: onStartDateSelect
    });

    $newField.find('.parameterDateRangePicker.clearable.end').datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: onEndDateSelect
    });

    $newField.find('.remove-field').on({
        onClick: onRemoveClick
    });
};

I am trying as in the following way, but its not working, can you please suggest me something

$newField.find('.remove-field').on({
                    onClick: onRemoveClick
                });

any sort of help a code snippet, a link or even suggestion would be very helpful, thanks in advance.

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

Re: Assign a javascript or jQuery method to a button onClick event - Resolved

indian14314-Nov-16 6:27

indian143

14-Nov-16 6:27

Hi,

I am putting this here maybe somebody can use my code,

Here is how I resolved it:

$newField.find('.remove-field').on({
                   click: onRemoveClick
               });

Happy coding guys Smile | :)

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

how to bind two dropdownlists using jquery,C# from backend

Member 1284531611-Nov-16 1:49

Member 12845316

11-Nov-16 1:49

I have two dropdownlists how to bind those from mysql using jquery,C#

[REPOST] how to bind two dropdownlists using jquery,C# from backend

Richard Deeming11-Nov-16 2:04

Richard Deeming

11-Nov-16 2:04

You have already posted this in QA, and received an answer:
How to bind two dropdownlists at a time using jquery from mysql[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

indian1439-Nov-16 13:19

indian143

9-Nov-16 13:19

Hi All,

I have .js file in which I am adding some new items to the page by using the jQuery code, the Logic is once the dates are selected then it adds up an another set of the Start and End Dates. When the first set of the Input elements are firing properly and opening the Date Picker calendar the remaining added elements that are added by jQuery code at runtime not adding the Date Picker input elements.

Please anybody help me in this regards. Here is my code.

First time added like here:

template =
  '<div id="Param_' + Id + '">' +
      '<div class="parameterHeader ui-widget-header ui-corner-top">' + paramDisplayName + '</div>' +
      '<div class="parameterItem ui-widget-content ui-corner-bottom" >' +
          '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
              '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
              '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
              '<button type="button" id="' + paramName + '_1_Remove' +count + '" class="remove-field">X</button>' +
          '</div>' +
      '</div>' +<br />
  '</div>';

//Insert HTML
this.JQElem = $(template);
initialParent.append(this.JQElem);

var fullDateString = '';

$('.parameterDateRangePicker.clearable.start').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
        $(this).trigger("input");
        if (typeof me.values[this.id.split('')[1]] === 'undefined')
            me.values[this.id.split('')[1]] = {};
        me.values[this.id.split('_')[1]]['Start'] = dateText;

        fullDateString = $(this).val() + "-" + $(this).next().val

        if (fullDateString.length == 21) {
            var str = fullDateString.replace(/[_\W]+/g, "");

            count++;
            var $wrapper = $(this).parent().parent();

            var tmpHTML = '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
               '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
               '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
               '<button type="button" id="' + paramName + '_1_Remove' + count + '" class="remove-field">X</button>' +
             '</div>';

            $wrapper.append(tmpHTML);
        };<br />
    }
});

$('.parameterDateRangePicker.clearable.end').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {<br />
        $(this).trigger("input");
        if (typeof me.values[this.id.split('')[1]] === 'undefined')
            me.values[this.id.split('')[1]] = {};
        me.values[this.id.split('_')[1]]['End'] = dateText;

        fullDateString = $(this).prev().val() + "-" + $(this).val();

        if (fullDateString.length == 21) {
            var $wrapper = $(this).parent().parent(); //$('.parameterFieldResize.parameterField');

            count++;

            var tmpHTML = '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
              '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
              '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
              '<button type="button" id="' + paramName + '_1_Remove' +count + '" class="remove-field">X</button>' +
            '</div>';

            $wrapper.append(tmpHTML);
    };
    }
});

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

Richard Deeming10-Nov-16 2:13

Richard Deeming

10-Nov-16 2:13

When you call $('.parameterDateRangePicker.clearable.start').datepicker({..., that sets up the date picker for any matching elements which are already on the page.

It doesn't magically apply to elements that you add to the page at some later point. For that, you will need to call the datepicker function manually after you've added the new element.

JavaScript

this.JQElem = $(template).appendTo(initialParent);
this.JQElem.find('.parameterDateRangePicker.clearable.start').datepicker({...});
this.JQElem.find('.parameterDateRangePicker.clearable.end').datepicker({...});

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

indian14310-Nov-16 5:53

indian143

10-Nov-16 5:53

But in my code I am adding the datepicker code within inside the datepicker because I am adding the elements after date has been picked, I am not understanding how to add another datepicker code there? Can you please suggest me something or if you can just give me some hint here how I can add - it would be helpful buddy.

Yes unfortunately I am not that good at jQuery, can you please guide me a little bit?

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

Richard Deeming10-Nov-16 5:58

Richard Deeming

10-Nov-16 5:58

As I said in my previous response, if you add new elements to the page after you've applied the datepicker to the existing elements, then you need to manually apply the datepicker to the new elements.

I even gave you an example of the code to do that - you just need to replace the ... with the relevant options for the datepicker function.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

indian14310-Nov-16 6:30

indian143

10-Nov-16 6:30

Wow its going to be fancy big function Smile | :)

, that's what my worry was worried about- welcome to the world of client scripting Smile | :)

. Personally I like to do Application to Application Integration. But unfortunately I have to do this every once in a while to fill my and my family's belly.

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

Richard Deeming10-Nov-16 6:48

Richard Deeming

10-Nov-16 6:48

If you're adding the new dates from within the onselect event, you'll probably want to extract that to a separate function:

JavaScript

var onStartDateSelect = function(dateText){
    ...
    
    var $wrapper = $(this).parent().parent();
    addNewDate($wrapper);
};

var onEndDateSelect = function(dateText){
    ...
    
    var $wrapper = $(this).parent().parent();
    addNewDate($wrapper);
};

var addNewDate = function($wrapper){
    count++;
    var tmpHTML = '...';
    var $newField = $(tmpHTML).appendTo($wrapper);
    
    $newField.find('.parameterDateRangePicker.clearable.start').datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: onStartDateSelect
    });
    
    $newField.find('.parameterDateRangePicker.clearable.end').datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: onEndDateSelect
    });
};

$('.parameterDateRangePicker.clearable.start').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: onStartDateSelect
});

$('.parameterDateRangePicker.clearable.end').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: onEndDateSelect
});

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event

indian14310-Nov-16 6:51

indian143

10-Nov-16 6:51

Sure my friend

Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

div controls outside of a repeater should be made invisible

Scott529-Nov-16 5:17

Scott52

9-Nov-16 5:17

Hello,

I am modifying an existing website. There is a nice feature where on one of the pages, if multiple images are returned by a datasource associated with a repeater control, the images can be swapped out by the user by clicking on either a left or right arrow which appears on the image. I wish to make the left and right arrows invisible if the repeater only has one image, as there is no ability to swap images when there is just a single image. Unfortunately, I can't figure out how to work this.

A simplified example of the ASP.NET code resembles this:

[ div outsidecontrols]
[ div class="arrow-left">< / div ]
[ div class="arrow-right">< / div ]
[ /div]
[asp:Repeater ID="Images" runat="server">
[div class="slide-image">
[img src="<%#Container.DataItem("Image_Name")%"/>

(In the interest of conveying where the div tags are for the left and right arrows, I have had to change some of the tags to use square brackets, as apparently if it looks like real code this forum tries to really put div tags in the comments.)

There is more to the code, but this is essentially what I am looking at. If I could get a record count of the repeater control, then I could conceivably hide the arrow controls if there was only one image. Something like this:

<asp:repeater id="Images" runat="server">
If #Container.DataItem.System.Data.DataRowView.Table.Rows.Count = 1 then
div.arrow-right.visible = false
div.arrow-left.visible = false
end if

Unfortunately, so far I can't get the record count of the data source feeding the repeater control with images. I also can't figure out how to make the left and right arrow div controls invisible after the repeater statement is encountered.

Does anyone have any suggestions about how to conditionally hide outer div controls based on the record count for a data source that is used by a repeater control to populate images? Does anyone know how to find the record count for a data source used by a repeater control?

Thanks,

Re: div controls outside of a repeater should be made invisible

Richard Deeming9-Nov-16 5:42

Richard Deeming

9-Nov-16 5:42

Something like this should work:

ASP.NET

<asp:Placeholder id="imageControls" runat="server" visible="false">
    <div outsidecontrols>
        <div class="arrow-left"></div>
        <div class="arrow-right"></div>
    </div>
</asp:Placeholder>

<asp:Repeater id="Images" runat="server" OnDataBound="Images_DataBound">
<ItemTemplate>
    ...
</ItemTemplate>
</asp:Repeater>

protected void Images_DataBound(object sender, EventArgs e)
{
    imageControls.Visible = Images.Items.Count > 1;
}

NB: To format your code, you need to wrap it in <pre>...</pre> tags, and HTML-encode any special characters. [< ⇒ < | > ⇒ > | & ⇒ &]
The "code" button on the toolbar should do this for you, or you could use the list of "Paste as" options that pops up when you paste your code.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: div controls outside of a repeater should be made invisible

Scott529-Nov-16 7:59

Scott52

9-Nov-16 7:59

Richard, I think your idea of using a Placeholder control to wrap around the div tags, and setting the visibility of this control based on the record count of the repeater control is really nice. Unfortunately, I haven't got it to work yet.

First, I got an error trying to set an "OnDataBound" method for the repeater control. After some investigation, I tried using "OnItemDataBound."

Later, I get this compilation error: "Images_DataBound' is not a member of 'ASP.folder_page_aspx'. (The web page is under this directory structure: folder\page.aspx ). I have experimented with using your C# Images_Databound procedure, as well as using what I believe is an ASP.NET equivalent. I don't understand the error message "is not a member of 'ASP.folder_page.aspx'. I have looked through the project and don't see a web page with that name. I think the compilation error is using the folder I am under ("folder") adding an underscore and reporting there is a problem with ASP.folder_page.aspx.

I still like the placeholder control and setting the visible tag for the div tags beneath it to false. I also like trying to set those visible tags to true with a procedure that follows the closing repeater tag. I plan to keep on tinkering with this. Thanks again for your ideas. Smile | :)

Re: div controls outside of a repeater should be made invisible

Scott529-Nov-16 9:57

Scott52

9-Nov-16 9:57

Richard, after tinkering further I finally got it to work! Thanks so much for your idea about using a placeholder to encapsulate the outer div tags.

First, the method is OnItemDataBound:

ASP.NET

<asp: Repeater ... OnItemDataBind="Images_LeftRightControls">

If anyone is wondering how I get the record count of the Repeater control, in the code behind file (i.e., myFile.aspx.vb):

ASP.NET

Sub Images_LeftRightControls(sender As Object, e As EventArgs)
    Dim myCount As Integer
    Dim myDataSource As System.Data.DataSet
    Dim myTables As System.Data.DataTableCollection
    Dim myList As System.Collections.ArrayList
    myDataSource = sender.DataSource
    myTables = myDataSource.Tables
    myCount = myTables(0).Rows.Count
    imageControls.Visible = myCount > [One--why can't I put a 1 here?]
End Sub

Thanks again, Richard! Smile | :)

Re: div controls outside of a repeater should be made invisible

Richard Deeming9-Nov-16 10:38

Richard Deeming

9-Nov-16 10:38

Sorry, I thought the repeater fired an event when it had finished binding to the data, but it looks like it doesn't.

The ItemDataBound event will fire for every item in the source data, which might cause problems.

You might want to consider using the ListView[^] instead. It's a lot more powerful than the Repeater, and it does have a DataBound event. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Message Closed

9-Nov-16 2:00

Pk Fun Zone

9-Nov-16 2:00

Message Closed

Re: Design my Site??

Richard MacCutchan9-Nov-16 2:24

Richard MacCutchan

9-Nov-16 2:24

Yes.

Re: Design my Site??

Peter Leow9-Nov-16 2:35

Peter Leow

9-Nov-16 2:35

Of course, that's what ASP.NET for. Start here Introduction to ASP.NET Core — ASP.NET documentation[^]

Peter Leow
https://www.amazon.com/author/peterleow

Need help with showing tab info when first landing on page.

Bootzilla336-Nov-16 11:28

Bootzilla33

6-Nov-16 11:28

I have two tabs:Customer and Contract. When I land on the page I want to show the Customer tab info but with my current code I'm unable to get it to work.

aspx

ASP.NET

<nav id="spy">
                <ul class="sidebar-nav nav">
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Customer')">Customer</a></li>
                    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Contract')">Contract</a></li>
                 
                </ul>
            </nav>

<div class="col-sm-8" style="margin-left: 0px; width: 711px;">
                <div class="row">
                    <div class="col-md-12 well tabcontent" id="Customer" style="width:546px">
                        <legend >Customer Selection</legend>
                        <div class="row">
                          <div class="col-md-5 spacing">Customer Source Code:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCustSourceCode" runat="server" Text="Label" name="lblCustSourceCode"></asp:Label></div>--%>
                          <div class="col-md-4"">832 - NASA</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Customer Code:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCustCode" runat="server" Text="Label" name="lblCustCode"></div>--%>
                          <div class="col-md-4">555</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Name:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblName" runat="server" Text="Label" name=""lblName"></div>--%>
                          <div class="col-md-4">Aeronautics Lab</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">City:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblCity" runat="server" Text="Label" name="lblCity"></div>--%>
                          <div class="col-md-4">Houston</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">State:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblState" runat="server" Text="Label" name="lblState"></div>--%>
                          <div class="col-md-4">Texas</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Zip:</div>
                          <%--<div class="col-md-4""><asp:Label ID="lblZip" runat="server" Text="Label" name="lblZip"></div>--%>
                          <div class="col-md-4">10001</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 well hi tabcontent" style="width:546px;" id="Contract">
                        <legend >Contract Information</legend>
                       <div class="row">
                          <div class="col-md-5 spacing">Nasa Control Number:</div>
                          <div class="col-md-4">4416367</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Prime Contact Number<span style="color:red">*</span>:</div>
                          <div class="col-md-4">4416367</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Contract Start Date:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Face Value of Contact<span style="color:red">*</span>:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">
                          <div class="col-md-5 spacing">Contract End Item or Service:</div>
                          <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Authorize Redelegation<span style="color:red">*</span>:</div>
                          <div class="col-md-4">YES</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Estimated LOD Completion Date<span style="color:red">*</span>:</div>
                          <div class="col-md-4">10/30/2016</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Is your LOD ONLY for one specific Purchase Order or Delivery Order:</div>
                          <div class="col-md-4">No</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Contracting Officer:</div>
                          <div class="col-md-4">John G. Doe</div>
                        </div>
                        <div class="row">  
                          <div class="col-md-5 spacing">Date LOD Signed by Customer/Contracting Officer<span style="color:red">*</span>:</div>
                          <div class="col-md-4">08/11/2016</div>
                        </div>
                    </div>
                </div>

JavaScript

$(document).ready(function(){

    /*Page Initialization*/
    $(".custinfo").toggleClass("active");
    $("#custinfo").show();
    $("#continfo").hide();
    $("#prime").hide();
    var setHeight = $("#custinfo").outerHeight();
    $("#spy").css('height', setHeight);        
    $(".sidebar-nav").css('height', setHeight);

    /*sidebar height*/
     

    $('#popover-button').popover({
    	html: true,
    	trigger: "hover",
        content: function(){
        	return $('#popover-content').html();
        }
    });

    $('#popover-button').click(function () {
        $('.modal').modal('show');  
        $('#popover-content').popover('hide'); //EDIT: added this line to hide popover on button click.
    });


    /*Menu-toggle*/
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");

    });

    /*sidebar link*/
    $(".custinfo").click(function(e) {
        e.preventDefault();
        $("#custinfo").show();
        $("#continfo").hide();
        $("#prime").hide();
        var setHeight = $("#custinfo").outerHeight();
        $("#spy").css('height', setHeight);
        $(".sidebar-nav").css('height', setHeight);

    });    

    $(".continfo").click(function(e) {
        e.preventDefault();
        $("#custinfo").hide();
        $(".custinfo").removeClass("active");
        $("#continfo").show();
        $("#prime").hide();
        var setHeight = $("#continfo").outerHeight();
        $("#spy").css('height', setHeight);
        $(".sidebar-nav").css('height', setHeight);

    }); 
 /*Scroll Spy*/
    $('body').scrollspy({ target: '#spy', offset:80});

    /*Smooth link animation*/
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });

});


$(window).bind('resize', function(){
});

How do layout out the columns using stringbuilder?

samflex4-Nov-16 15:51

samflex

4-Nov-16 15:51

I am dynamically creating a PDf in memory and sending a PDF attachment via email.

This works fine.

What I am having problem with is presenting the data in the format management wants.

For instance, they would want the layout in following format:

SQL

John Doe                    12345
Employee Name                Employee ID

john doe
Signature

11/04/2016
Date

How do I fix the code below to accomplish this?

Thanks in advance

PHP

I have modified my request and narrowed the help I need to one specific issue.

I need to lay out the results to look similar to this sample below:


<pre><pre lang="PHP">

John Doe 12345

Employee Name Employee ID

john doe

Signature

11/04/2016

Date

So far, everything is wrapping to one column.

I am using stringbuilder.

How do I fix this?

SQL

Private Sub SendPDFEmail(dtb As DataTable)
    Using sw As New StringWriter()
        Using hw As New HtmlTextWriter(sw)
            Dim FullName As String = txtFullName.Text
            Dim user As String = txtUserName.Text
            Dim signedName As String = txtSignature.Text
            Dim lDate As String = txtDate.Text
            Dim sb As New StringBuilder()
            sb.Append("<table border = '0'>")
            sb.Append("<tr>")
            For Each column As DataColumn In dtb.Columns
                sb.Append("<th style = 'background-color: #ffffff;color:#000000'>")
                sb.Append(column.ColumnName)
                sb.Append("</th>")
            Next
            sb.Append("</tr>")
            For Each row As DataRow In dtb.Rows
                sb.Append("<tr>")
                For Each column As DataColumn In dtb.Columns
                    sb.Append("<td>")
                    sb.Append(row(column))
                    sb.Append("</td>")
                Next
                sb.Append("</tr>")
            Next
            sb.Append("</table>")
            sb.Append("<table width='100%' cellspacing='0' cellpadding='2'>")
            sb.Append("<tr><td align='center' style='background-color: #ffffff' colspan = '1'></td></tr>")
            sb.Append("<tr><td colspan = '3'>")
            sb.Append("" & FullName & "</td><td>" & user & "</td></tr>")
            sb.Append("<tr><td>Employee ID: </td><td>Employee Signature: ")
            sb.Append("</td></tr><tr><td colspan = '3'>")
            sb.Append("" & signedName & "")
            sb.Append("</td><td> </td></tr><tr><td>Employee Signature")
            sb.Append("</td><td> </td></tr>")
            sb.Append("<tr><td colspan = '2'>" & lDate & "</td><td> </td></tr>")
            sb.Append("<tr><td colspan = '2'>Date :</td><td> </td>")
            sb.Append("</tr>")
            sb.Append("</table>")
            sb.Append("<br />")

modified 5-Nov-16 8:25am.

Re: How do layout out the columns using stringbuilder?

Richard MacCutchan4-Nov-16 22:52

Richard MacCutchan

4-Nov-16 22:52

That looks like you are just creating one long string. Where is the code that generates a PDF file?

Re: How do layout out the columns using stringbuilder?

samflex5-Nov-16 2:33

samflex

5-Nov-16 2:33

UDPATE::

This issue has now been resolved.

modified 5-Nov-16 14:39pm.

Generate SQL query

Member 128253814-Nov-16 6:23

Member 12825381

4-Nov-16 6:23

how to dynamically generate a SQL server query based on the application server received input from the user

Re: Generate SQL query

Richard MacCutchan4-Nov-16 6:58

Richard MacCutchan

4-Nov-16 6:58

Probably by writing some code.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.