How to Show multiple kendo grids using dynamic data in Html using Jquery

-
1.Declare a div element to bind the gird

ex:   <div class="container-fluid">
               <div id="Equipmentgrid"></div>
         </div>

2. Get the data using ajax call

ex: <script>
        var EquipmentData;
        var EmployeeDat;

                $.ajax({
                    type: 'GET',
                    url: "WS_Equipment.asmx/GetEquipmentData",
                    data: { WeekendingDate: WeekendingDate, WorkOrderId: WorkOrderId },
                    dataType: "json",
                    success: function (jsonData) {
                        var i = JSON.parse(JSON.stringify(jsonData));
                        if (jsonData != null) {
                            //JSON.parse(JSON.stringify(jsonData.Employee));
                            EquipmentData = i.Equipment;
                            EmployeeDat = i.Employee;
                            BindGrid();
                        }

                    },
                    error: function (error) {
                        alert(error.responseText)
                    }
                });
 </script>

3.Declare the schema

ex: EquipmentData = new kendo.data.DataSource({
                data: EquipmentData,
                batch: true,
                pageSize: 5,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            HeaderId: { type: "string" },
                            JobNumber: { type: "string" },
                            WorkOrderNumber: { type: "string" },
                            WeekendingDate: { type: "string" },
                            EquipmentType: { type: "string" },
                            Service_ID: { type: "string" },
                            Hours: { type: "string" },
                            CreatedBy: { type: "string" },
                            CreatedDate: { type: "string" },
                            UpdatedBy: { type: "string" },
                            UpdatedDate: { type: "string" },
                        }
                    },

                }
            });


4. Define the grid and columns to display with respective titles

ex:$("#Equipmentgrid").kendoGrid({
                dataSource: EquipmentData,
                pageSize: 5,
                pageable: true,
                sortable: true,
                pageable: {
                    alwaysVisible: true,
                    pageSizes: [5, 10, 20, 100],
                    refresh: true,
                    buttonCount: 10
                },
                columns: [{
                    field: "HeaderId",
                    filterable: false,
                    width: 100
                },
                {
                    field: "JobNumber",
                    title: "Job Number",
                    width: 200

                }, {
                    field: "WorkOrderNumber",
                    title: "Work Order Number",
                    width: 200
                }, {
                    field: "EquipmentType",
                    title: "Equipment Type",
                    width: 200
                }, {
                    field: "Hours",
                    title: "Hours",
                    width: 200
                },
                {
                    command: [{
                        name: "edit",
                        className: "btn-Edit",
                        text: "Edit", click: btnEdit
                    }], title: "Edit Data", media: "(min-width: 500px)", width: "110px"
                },
                {
                    command: [{
                        name: "GenerateReport",
                        className: "btn-markavailable",
                        text: "Generate Report", click: btnGenerateReport
                    }], title: "Generate Report", media: "(min-width: 500px)", width: "220px"
                },
                {
                    command: [{
                        name: "GFSign",
                        className: "btn-Delete",
                        text: "GFSign", click: btnGFSign
                    }], title: "GFSign", media: "(min-width: 500px)", width: "110px"
                },
                {
                    command: [{
                        name: "CustomerSign",
                        className: "btn-ignore",
                        text: "CustomerSign", click: btnCustomerSign
                    }], title: "CustomerSign", media: "(min-width: 500px)", width: "220px"
                }
                ]
            });



Note:  Add below scripts in your page

  <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/kendo.all.min.js"></script>

Comments

Post a Comment

Popular posts from this blog

Top MNC Interview Questions- Full Stack Developer

-
Common Questions: What is Reflection? What is data integrity In SQL Server? Different types of relationships in SQL Server? Different b/w Union, Union All, Minus, Intersect? When we use the method overloading concept in c#? Real-time example for oops concepts? Why we go for Interfaces when we have abstract Classes? (Note: Provide Reason other than multiple inheritances, and abstraction concept). What is the Bundling and Minification Concept? What are the different options available in google chrome developer tools? Can we call the same request again from the network tab in the google chrome developer tab? What are ACID properties in SQL Server? What is CTE? Where we can use it and why? What are the components of ado.net? Types of Cookies in MVC and how the memory allocated? Diff. b/w array.clone() and array.copyto()? Why we need relations in SQL? Diff. b/w Task and Thread? How do you implement dependency injection in MVC .net standard f/w? Async and Await? Task and Task<T>? Diffe...
Read more

Interview Questions-2

-
 output of following program and if any errors what should be the correct syntax class baseclass {​​​​​​​​​      public void func1() {​​​​​​​​ Console.WriteLine ("Base Fun1()")​}​​​​​​​​​      public virtual void func2() {​​​​​​​​ Console.WriteLine ("Base Fun2()")​}​​​​​​​​​      public virtual  void func3() {​​​​​​​​​ Console.WriteLine ("Base Fun3()")}​​​​​​​​​ }​​​​​​​​​ class derivedclass :baseclass {​​​​​​​​​      new public void func1() {​​​​​​​​ Console.WriteLine ("derived Fun1()")​}​​​​​​​​​      public override void func2() {​​​​​​​​ Console.WriteLine ("derived Fun2()")​}​​​​​​​​​      public new void func3() {​​​​​​​​ Console.WriteLine ("derived Fun3()")​}​​​​​​​​​ }​​​​​​​​​ class Program {​​​​​​​​​      static void Main(string[] args)      {​...
Read more

How to get the user details, user current level, next level, Rank in sql server

-
 ALTER PROCEDURE [dbo].[SP_GETUSERPROFILE] @UserId int AS BEGIN --checks whether user reported any tweet or not IF EXISTS(SELECT * FROM OnGoingReports WHERE UserId=@UserId) BEGIN --if user already reported tweets then gets the user details and rank select UserId,UserName,Name,UserReportedTweetCount,Rank      from  (select UserId,UserName,Name,UserReportedTweetCount,ROW_NUMBER() OVER(ORDER BY UserReportedTweetCount desc) AS Rank  from      (select ogr.UserId,uc.UserName,Name,Count(*) UserReportedTweetCount from UserCredentials uc       inner join OnGoingReports ogr       on       ogr.UserId=uc.UserId        GROUP BY ogr.UserId,uc.Name,uc.UserName) as TopList ) as UserRank      where UserId=@UserId END ELSE BEGIN --if user not reported any tweets then it get the default value as 0 and rank based on tweets reported select UserId,UserName,Nam...
Read more