This project is read-only.

Table in HTML.Grid

Apr 4, 2014 at 2:22 PM
Is there any option to give the table an Id.

Requirement is to give Table inside Html.Grid an ID
like <table id="">

Thanks in Advance
Apr 5, 2014 at 8:58 AM
Why you need to specify id directly to the table tag? You can specify an id to container and use relative selector, like
<div id="my-grid">
    @Html.Grid(....)
</div>

<script>
    console.log($('#my-grid table'));
</script>
Apr 7, 2014 at 7:11 AM
Thanks Bukhrain

My requirement is to implement infinite scrolling into the grid, for that I was trying to add a new row while scrolling but was in vain
Do we have any direct method for this to be achieved.

My method is:
var pageIndex = 1;
    var pageCount = 0;


    $(document).ready(function () {
         debugger;
        $('#abcd').bind('scroll',
 function () {
     //alert('a');
     //debugger;
     if ($(this).scrollTop() >= this.scrollHeight - $(this).innerHeight()) {
         GetRecords();
     }
 });
    });


    function GetRecords() {

        pageIndex++;
        //debugger;
        var url = '@Url.Action("GetMethod", "Scroll")';
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: url,
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        //debugger;
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        //alert($('#abcd table'));
        var row = $("['#abcd table'] tr:last-child").clone(true);            
        $.each(customers, function () {
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("RequestID").text());
            $("td", row).eq(1).html($(this).find("AssociateID").text());
            $("td", row).eq(2).html($(this).find("ProductID").text());
            $("[class*=table table-striped grid-table]").append(row);
            alert($('#abcd table'));
            row = $("[id*=#abcd table] tr:last-child").clone(true);
        });

        $("#loader").hide();


    }

and cshtml is
<div id="abcd" style="height: 300px; width: 300px; border: solid 1px red; overflow-y: scroll; overflow-x: hidden;"> @Html.Grid(Model).Columns(columns => { columns.Add(c => c.RequestID).Titled("RequestID"); columns.Add(c => c.AssociateID).Titled("AssociateID"); columns.Add(c => c.ProductID).Titled("ProductID"); }). </div>