Posts

Showing posts with the label Kendo

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

How to get row data in kendo grid when button is clicked

-
Let us consider their is a edit button in kendo  grid as shown below ex:           {                     command: [{                         name: "edit",                         className: "btn-Edit",                         text: "Edit", click: btnEdit                     }], title: "Action", media: "(min-width: 500px)", width: "220px"                 } Now In btnEdit() function we get the button clicked row data using jquery as shown, ex:      function btnEdit(e) {             var grid = $("#gridName").getKendoGrid();             var item = grid.d...
Post a Comment
Read more

How to add button in kendo grid using jquery

-
Below code can be used to add a button in kendo grid.  ex:           {                     command: [{                         name: "edit",                         className: "btn-Edit",                         text: "Edit", click: btnEdit                     }], title: "Action", media: "(min-width: 500px)", width: "220px"                 } In the above code, className :- Defines the css class name text :- Text displayed on button click :- Function to be called when clicked on button title:- Text displayed as grid column header In this example we are calling btnEdit function on clicked, function b...
Post a Comment
Read more

How to show loading effect in kendo grid using jquery

-
The below line can be used to show the loading effect for your grid,  kendo.ui.progress($("#YourGridId"), true); To stop the loading effect you can use the below line  kendo.ui.progress($("#YourGridId"), false);
Post a Comment
Read more

How to select default value on loading dynamic kendo dropdownlist

-
//calling the below function to get the weekendingdates from database using ajax call ex:  function GetWeekEndingDates() {             $.ajax({                 type: 'GET',                 url: "WS_Equipment.asmx/GetWeekendingDate",                 dataType: "json",                 success: function (jsonData) {                     var i = JSON.parse(JSON.stringify(jsonData));                     if (jsonData != null) {                         WeekDates = i.WeekEndingDates;                         LastWeekDate = i.LastWeekEndingDate;         ...
Post a Comment
Read more

How to show or bind dynamic data to kendo grid using jquery in mvc view,aspx?

-
    <script> $(document).ready(function () {             $("#ListViewGrid").kendoGrid({                 dataSource: {                     transport: {                         read: {                             url: 'WS_Equipment.asmx/ListView',                             dataType: 'json'                         }                     },                     schema: {                         model: {     ...
Read more

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) {    ...
Post a Comment
Read more

How to bind remote data from DB to kendo dropdownlist using Jquery in C#

-
Let us consider the below example, Step 1 : Consider the below textbox for which we want to bind dropdownlist using kendo. Sample code : <div class="col-md-3">           <label for="validationServer01" style="color: #6f90a3">Week Ending Date</label>                                       <input id="products" style="width: 270px" />  </div> Step 2 : Let's write the Jquery script to get the dropdown list from webservice and bind it to input element  and initialize kendo dropdown. Sample code: <script>         $(document).ready(function () {             $("#products").kendoDropDownList({                 filter: "contains",                 optionLabel: "Select Week...
Read more