Friday, 23 November 2012

Add new row in GridView using JavaScript/JQuery

While creating Visual web part, I have a task to add a new row in the gridview that contains one Textbox inbuild\t with jquery datepicker,one dropdown and one single line text box.
Also my gridview contains footer to add some buttons and pagination.

After googling, I found a solution from here :
<script type="text/javascript">

function AddNewRecord()
        {
            var grd = document.getElementById('GridView1');
            var tbod=grd.rows[0].parentNode;
            var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
            tbod.appendChild(newRow);
            return false;

        }


</script>

But, Its cloning footer row and adding new row in footer.
Then I have done some modifications in the code as follows:

<script type="text/javascript">

function AddNewRecord()
        {
            var grd = document.getElementById('GridView1');
            var tbod=grd.rows[0].parentNode;
            var lastLI = tbod.lastChild
            var newRow=grd.rows[lastLI.rowIndex-1].cloneNode(true);
            tbod.insertBefore(newRow, lastLI);
            return false;

        }


</script>

Now its cloning 1st header row and adding as last header row.


Monday, 19 November 2012

jQuery selected tab on postback in SharePoint

I was creating Visual Webpart with tabs. On search button execution, my tab moved to 1st tab.
I have a requirement to put the tab on the selected tab either on postback. After googling, I found the solution. Posting the solution with some modification:

On Visual Webpart user control Add:
<asp:HiddenField ID="hidLastTab" runat="server" Value="0" />

Next to add jquery (with latest jquery file)

<script type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs();
            $('#tabs').bind('tabsselect', function(event, ui) {
                var selectedTab = ui.index;           
                $("#<%= hidLastTab.ClientID %>").val(selectedTab);
            });
        });
    </script>

in .cs file add the following in OnLoadFunction:

This.Page.ClientScript.RegisterStartupScript(this.GetType(), "selecttab", "$('#tabs').tabs({ selected: " + hidLastTab.Value + " });", true);

And done.