Grid not display if No Record Found

[Ammar]

i don't want to display grid if no record found here is my code i use the change function to check if data length exist  then grid display but it's no working and browser give me an error with the two options "Continue","Stop Script"..here is my code

var DataSource, UserName;

$(function () {

    UserName = $('#NameText').val();

    GetDataSource();
   
});


function GetDataSource() {

    DataSource = new kendo.data.DataSource({
        pageSize: 10,
        change: function () {
            if (this.data().length) {
              CreateGrid();
            }
        },
        transport: {
            read: {
                type: "POST",
                url: "/WebBasedBookExchangeSystem/books.svc/GetUserBooks",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            },
            update: {
                type: "POST",
                url: "/WebBasedBookExchangeSystem/books.svc/UpdateUserBook",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            },
            destroy: {
                type: "POST",
                url: "/WebBasedBookExchangeSystem/books.svc/DeleteUserBook",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            },
            parameterMap: function (data, operation) {

                if (operation == "update")
                    return kendo.stringify({ updateBook: data });
                else if (operation == "destroy")
                    return kendo.stringify({ deleteBook: data });
                else if (operation == "read")
                    return kendo.stringify({ user: UserName });

            }
        },

        schema: {

            parse: function (data) {
                return JSON.parse(data.d);

            },
            model: {
                id: "Book_Id",
                fields: {
                    "Book_Id": { type: "number" },
                    "Title": { type: "string" },
                    "ISBN": { type: "string" },
                    "Author": { type: "string" },
                    "Price": { type: "number" }
                }
            }
        }
    });

    DataSource.read();
}

function CreateGrid() {

    $('#grid').kendoGrid({

        filterable: true,
        sortable: true,
        pageable: true,
        scrollable: false,
        editable: "popup",
        columns: [
                    { field: "ISBN", filterable: false, width: 50, title: "ISBN NO" },
                    { field: "Title", title: "Book Title", width: 180 },
                    { field: "Author", filterable: false, width: 180, title: "Book Author" },
                    { field: "Price", filterable: false, width: 50, title: "Price (Rs)" },
                    { command: ["edit", "destroy"], title: "Action", width: 5 }
                 ],

        dataSource: DataSource

    });
}

[Ammar]

please somebody reply to this thread,waiting for the solution of my problem from the last 2 days.thanx

[Michael]

try this.... but I am far from expert.... works when I tested it...


set your grid div to be hidden by default..

<div id="accountHistoryGrid" style="display:none"></div>

then in your datasource create a "change" handler

var userTransactionsDS = new kendo.data.DataSource({
pageSize: 5,
serverPaging: true,

        change: function(e){
        var tRecords = userTransactionsDS.total();
        if(tRecords>0){
        $("#accountHistoryGrid").css("display","block");
        }
        }
});

Not sure if this is how you want it to work, but just came across your thread looking for something else, so figured I'd give it a shot.

[Michael]

damn.. now I forgot what I was looking for. lol

[Ammar]

Ahh..it's work fine,thank u so much:)

[Michael]

Awesome, glad I could help :)