Scribd Logo
Upload

Welcome to Scribd!

  • How To Work With Kendo Grid Using Jquery?

    Uploaded by

    loginworks
    21 views10 pages
    The Kendo User Interface Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of option about how to present and perform operations over the underlying data, such as paging , sorting , filtering , grouping , and editing , etc. To feed the grid with data, you can supply either local or remote data via the Kendo User interface DataSource component, used as a mediator. For more go to https://www.loginworks.com/blogs/work-kendo-grid-using-jquery/

    Original Title

    HOW TO WORK WITH KENDO GRID USING JQUERY?

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The Kendo User Interface Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of option about how to present and perform operations over the underlying data, such as paging , sorting , filtering , grouping , and editing , etc. To feed the grid with data, you can supply either local or remote data via the Kendo User interface DataSource component, used as a mediator. For more go to https://www.loginworks.com/blogs/work-kendo-grid-using-jquery/

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views10 pages

    How To Work With Kendo Grid Using Jquery?

    Uploaded by

    loginworks
    The Kendo User Interface Grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of option about how to present and perform operations over the underlying data, such as paging , sorting , filtering , grouping , and editing , etc. To feed the grid with data, you can supply either local or remote data via the Kendo User interface DataSource component, used as a mediator. For more go to https://www.loginworks.com/blogs/work-kendo-grid-using-jquery/

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    The Kendo User Interface Grid is a powerful widget which allows you to

    visualize and edit data via its table representation. It provides a


    variety of option about how to present and perform operations over
    the underlying data, such as paging , sorting , filtering , grouping , and
    editing , etc. To feed the grid with data, you can supply either local or
    remote data via the Kendo User interface DataSource component,
    used as a mediator.
    There are two possible way to instantiate a Kendo User Interface grid
    in your project :
    1.From an empty div element. In this case all the Grid setting are
    provided in the initialization script statements.
    2.From an existing HTML table element.
    In both cases the grid is registered as a jquery plugin, now i am using
    Kendo User interface Grid from an empty div element.
    In this demo you can see how you can easily configure the grid to
    display your data and perform sorting, paging filtering, and grouping
    etc. operations via its built-in functionality.
    HOSTING KENDO UI (USER
    INTERFACE) IN YOUR PROJECT
    To host Kendo User interface grid in your project, you need to follow
    these things:
    •Download the bundle from the official server.
    •Host the JavaScript and CSS plugin references in your project.

    DOWNLOAD THE BUNDLE


    After you Download Kendo User Interface bundles, you need to
    uncompressed the downloaded file. The folders listed below are
    hosted in your local downloaded repository.
    /APPTEMPLATES
    The apptemplates folder contains standalone starter templates.
    Although all HTML files are static, it is recommended that you can use
    a web server to open them or directly from the file system. The latter
    approach breaks all Ajax data request.
    /EXAMPLES
    The examples Folder accommodates the quick-start demo
    files.Although all HTML files are static, it is recommended that you can
    use a web server to open them or directly from the file system. The
    latter approach breaks all Ajax data request.
    /JS
    The js folder Contains the minified JavaScript files.
    /SRC
    The folder src used to hold the source code files, but they are now
    provided in a separate downloaded package. Access the source code
    package from the Downloads section of your account. Note that the
    source code is not available to trial users.
    /STYLES
    Consists of the minified CSS files and themes images. The folder also
    includes the fewer files, which can be passed to the compiler, located
    on the first-level folder inside styles / folder : styles/
    web / and styles / mobile / . Note that the Less files
    are not available in the trial versions.
    /WRAPPERS
    Include the server-side wrappers. As it is necessary for the User
    Interface for ASP.NET MVC (Model View Controller), User Interface for
    JSP (Java Server Pages) or User Interface for PHP (Personal Home Page)
    distribution only.

    CHANGELOG.HTML
    Provides the Kendo User Interface release notes.

    ADD CSS AND JAVASCRIPT


    REFERENCES
    To use Kendo User Interface in your project, include the required
    JavaScript and CSS files.
    Step 1 : Extract the js and styles directories from the bundle archive
    and copy them to your web application root directory according to
    your project architecture.
    Step 2 : Include the Kendo User Interface JavaScript and CSS files in
    the head tag of your HTML document. Verify that the common CSS
    files are registered before the theme CSS files.
    Example :
    <head runat=”server”>
    <link href = “/kendo.common.min.css” rel =
    “stylesheet” />
    <link href = “/kendo.default.min.css” rel = “stylesheet” />
    <link href = “/kendo.default.mobile.min.css” rel =
    “stylesheet” />
    <Script src = “/jquery.min.js”/>
    </head>

    HTML
    HTML extend for Hyper text markup language, which is the set of
    markup codes or symbols.The main Use of markup codes or symbols
    file intended for display on a World Wide Web browser pages. The
    HTML markup tells the Web browser, how to display a Web page’s
    contain like words and images on a web browser.
    <!DOCTYPE html>
    <html xmlns = “http://www.w3.org/1999/xhtml “>
    <head runat = “server “>
    <title> Kendo Grid </title>
    <link href = “Style/kendo.common.min.css ” rel =
    “stylesheet ” />
    <link href = “Style/kendo.default.min.css ” rel =
    “stylesheet ” />
    <link href = “Style/kendo.default.mobile.min.css ” rel =
    ” stylesheet ” />
    <link href = “Style/Main.css ” rel = “stylesheet ” />
    <script src= “Script/jquery.min.js “/>
    <script src= “Script/kendo.all.min.js “/>
    <script src= “Script/Main.js “/>
    </head>
    <body>
    <form id = “form1 ” runat = “server “>
    < div id = “example “>
    < div id = “grid “>
    < / div>
    < / div>
    < / form>
    < / body>
    < / html>

    JQUERY
    It is a JavaScript library and it’s light-weighted, “write less, do more”.
    The purpose of using this is to make it much easier to use JavaScript
    on your web application. It takes a lot of common tasks to accomplish
    this, that is require many lines of JavaScript code, and wraps them into
    methods that you can call with a single lines of code. It also simplifies
    the lots of the complicated things from older Java Scripts concepts,
    like AJAX call and DOM ( Document Object Model ) manipulation etc.
    Note : You can use these demo api (https://demos.telerik.com/kendo-
    ui/service/Northwind.svc/Customers) to fetch data and bind
    accordingly in your web application project.
    $( document ).ready( function () {
    $( ” #grid ” ).kendoGrid( {
    dataSource : {
    type : ” odata “,
    transport : {
    read : “https://demos.telerik.com/kendo-
    ui/service/Northwind.svc/Customers “
    },
    pageSize : 20
    },
    height : 550,
    groupable : true,
    sortable : true,
    pageable : {
    refresh : true,
    pageSizes : true,
    buttonCount : 5
    },
    columns : [ {
    template : “
    “style=’background-image:
    url(../content/web/Customers/#:data.CustomerID#.jpg);’>”
    + ” # : ContactName # “,
    field : “ContactName “,
    title : “Contact Name “,
    width : 240
    }, {
    field : “ContactTitle “,
    title : “Contact Title “
    }, {
    field : “CompanyName “,
    title : “Company Name “
    }, {
    field : “Country “,
    width : 150
    }]
    } );
    } );

    CSS
    CSS stands for Cascading Style Sheets. Basically, it is used
    to describes how HTML elements are to be displayed on screen, on
    paper, or in other medias. It saves developers lot of work because it
    can control the layout of multiple web pages all at once place.
    External style sheets are stored in this files.
    .customer-photo {
    display : inline-block;
    width : 32px;
    height : 32px;
    border-radius : 50%;
    background-size : 32px 35px;
    background-position : center center;
    vertical-align : middle;
    line-height : 32px;
    box-shadow : inset 0 0 1px #999, inset 0 0 10px
    rgba(0,0,0,.2);
    margin-left : 5px;
    }
    .customer-name {
    display : inline-block;
    vertical-align : middle;
    line-height : 32px;
    padding-left : 3px;
    }
    GITHUB REFERENCES
    Note : If you would like to Download the this Demo then Click here to
    get Demo project for more understanding.

    SUMMARY
    The Kendo User Interface Grid is a powerful widget which allows you to
    visualize and edit data via its table representation. It provides a
    variety of option about how to present and perform operations over
    the underlying data, such as paging , sorting , filtering , grouping , and
    editing , etc.
    After complete this demo you are feel very positive because you are
    able to work on Kendo User Interface Grid with HTML, J query,
    JavaScript and CSS Cascading Style Sheet files.
    Article references : Click here to learn how to work with Angular
    CLI.

    Source : https://www.loginworks.com/blogs/work-kendo-grid-using-jquery/

    You might also like