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

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

How to update the user level when ever user report any tweet in sql

-
  ALTER PROCEDURE [dbo].[SP_UPDATEUSERLEVEL] @Userid INT AS BEGIN Declare @CountOfUserReportedTweets INT Declare @LevelBadgeId INT SET @CountOfUserReportedTweets=(select count(*) from OnGoingReports where UserId=@Userid) --CHECKS WHETHER THE LEVEL EXIST OR NOT IF EXISTS(select Top 1 * from LevelBadge where NoofTweets<=@CountOfUserReportedTweets order by NoofTweets desc) BEGIN --IF LEVEL EXISTS UPDATE OR INSERT WITH THAT LEVEL ID SET @LevelBadgeId=(select Top 1 Id from LevelBadge where NoofTweets<=@CountOfUserReportedTweets order by NoofTweets desc) IF EXISTS(select * from UserLevel where UserId=@Userid) BEGIN UPDATE UserLevel SET LevelBadgeId=@LevelBadgeId WHERE UserId=@Userid END ELSE BEGIN INSERT INTO UserLevel(UserId,LevelBadgeId) VALUES (@Userid,@LevelBadgeId) END END ELSE BEGIN --IF NO LEVEL EXISTS THEN INSERTING DEFAULT LEVEL IF EXISTS(select * from UserLevel where UserId=@Userid) BEGIN UPDATE UserLeve...
Read more

Implement virtualisation in kendo drop down list using jquery ajax in mvc, aspx page

-
virtualization helps to load huge data fastly. $("#abcd").kendoDropDownList({                 filter: "contains",                 dataTextField: "WorkOrderNumber",                 dataValueField: "WorkOrderNumber",                 virtual: {                     itemHeight: 26,                     valueMapper: function (options) {                     }     ...
Read more