I have a grid that is initiated with a local datasource. I have a schema and a parse that manipulates the data received. I need to replace the datasource but don't want to retype the entire schema over again. How can I do that? I have an example dojo here. In my example, I am adding 100 to the age. Notice that after reloading the new records don't have the 100 added to the age. I need to know how to do this for the entire grid and also for updating a single record in the grid. I tried pushUpdate for a single record and it ignores the parse also. 

http://dojo.telerik.com/OxazIqAG

<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
      { field: "id" }
    ],
 
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        parse: function(response) {
            var users = [];
            for (var i = 0; i < response.length; i++) {
                let record = response[i];
                var user = {
                    id: record.id,
                    name: record.name,
                    age: record.age + 100
                };
                users.push(user);
            }
            return users;
        },
        model: {
         id: "id",
          fields: {
           id: { type: "number" } 
          }
        }
      }
    }
  });
    
    $("#setData").click(function(){
      $("#grid").data("kendoGrid")
      			.dataSource
      			.data([{id: 3, name: "new item", age: 20}]);
    });
  </script>

I am trying to use 'kendo ui for jquery' with asp.net core web api, Can you please let me know where I can find the sample code for the same . I found examples on github for telerik ui for asp.net mvc but couldn't  find any examples for kendo ui jquery with asp.net core web api. Thanks. 

I have a kendo Dialog with an embedded wizard, populated by ajax.  On the first invocation of the dialog with the wizard, everything works fine.   Then it gets closed, I empty the wizard div on dialog close.  On the second invocation of the dialog, the activate method on the wizard starts getting called multiple times on the 'Next' button click, always at least once with the wrong step, the last one.  Is there a way to clear out the event handler for the wizard each time the dialog starts up?

Thanks.

I have tow KendoUI grids with one row and multiple columns.

If we change value of Column1 dropdown in Grid1, it should change value of Column1 Dropdown in Grid2,

Please share your inputs how we can implement this requirement in Jquery.

I have implemented both grids dropdown lists using Column Template.

Please find attachment for grid structures.

I have a Kendo Panel that contains a Tile Layout.  I have 2 hard-coded HTML kendo templates that display and 1 that I am using a Kendo Window which loads a view passing in a model.  The 2 hard-coded ones are displayed fine, but the Kendo Window one is an empty rectangle (see PanelWithTileLayout.jpg).  If I enter a URL of the Kendo Windows content source, it displays fine (see KendoWindowContentWithDirectURL.jpg).  The LoadContentFrom URL is being hit on a breakpoint in the controller.  I was thinking I have to open the Kendo Window in javascript somewhere, but it is not recognized in the document.ready routine, probably because it is in a child template and hasn't been created yet.  

<script id="dues-remit" type="text/x-kendo-template">
    @(Html.Kendo().Window()
        .Name("DuesRemission")
        .Width(310)
        .Draggable(false)
        .LoadContentFrom("_DuesRemission", "Dashboard", new { TplNum = ViewBag.TempleNumber })
        .Events(events => events.Close("close"))
        .Visible(true)
        .ToClientTemplate()
    )
</script>

<script id="members" type="text/x-kendo-template">
    <div id="members-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Membership Change</h3>
            <div class="info-holder">
                <div class="item-values">Percent change since last year: -0.5%</div>
                <div class="item-values">Percentile against all temples: 63</div>
            </div>
        </div>
    </div>
</script>

<script id="unapplied-payments" type="text/x-kendo-template">
    <div id="unapplied-payments-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Unapplied Payments</h3>
            <div class="info-holder">
                <div class="item-values">Current number of unapplied payments: 5</div>
                <div class="item-values">Percentile against all temples: 47</div>
            </div>
        </div>
    </div>
</script>

<div class="demo-section k-content container-fluid">
    @(Html.Kendo().TileLayout()
        .Name("temple-health")
        .Columns(3)
        .RowsHeight("150px")
        .ColumnsWidth("510px")
        .Containers(c => {
            c.Add().BodyTemplateId("dues-remit").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("members").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("unapplied-payments").ColSpan(1).RowSpan(1);
        })
        .Reorderable(true)
        .Resizable(true)
    )
</div>

_DuesRemission.cshtml:

<div id="dues-remit-border" class="health-border">
    <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
    <div class="info-container">
        <h3 class="temple-health-title">Dues Remission</h3>
        <div class="info-holder">
            <div class="col-lg-6 col-sm-6">Dues Year @Model.CurrentDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid as of today: @Model.PercentPaidCurrentYear</div>
            <div class="col-lg-6 col-sm-6">Dues Year @Model.LastDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid last year: @Model.PercentPaidLastYear</div> 
        </div>
    </div>
</div>

There are no errors in the F12 console display.

Some clinical studies can take up to 5 years or more, and I want to be able to show an entire study and its sub-tasks in a Kendo Gantt chart. I want to show periods of time longer than the current maximum of 1 year that is built into Kendo UI for jQuery v2018.3.1017, is that possible?

I'd like to be able to show a maximum of 6 years. Ideally the header would change to be able to see Quarter/Year rather than Month.

I posted a message on StackOverflow too and received a response from Alexsander. However he pointed me to a web page that we already tried.  https://stackoverflow.com/questions/71561541/display-more-than-1-year-in-kendo-ui-for-jquery/71568711#71568711 

Does anyone have any more info on how we can see 3 or 6 years at a time?

Thanks

I am having a dropdownlist inside a kendo grid. The dropdownlist is bound to the grid using template editor. The grid has got around 20K rows, and the dropdownlist has around 20K data. I am having issues in

1) displaying the data in the dropdownlist. When I click on the dropdownlist, the dropdownlist is taking time to display.

2) click on 'Add New' in the grid is taking time to add new record in the grid.

Could you please let me know the options by which we can improve the performance here?

The below code is used for binding the data to the dropdown.

@using Kendo.Mvc.UI
@{
Layout = null;
}
@(Html.Kendo().DropDownList()
.Name("Segment")
.DataValueField("SegmentID")
.DataTextField("SegmentName")
.BindTo((System.Collections.IEnumerable)ViewData["Segment"])
)

I would like to help user to see if a filter is active or not on a GRID 

In my exemple before filter the icon is black

After filter I would like to have another color on my icon (for example red) 

is it possible ?

After upgrading from Kendo UI v2021.3.1216 to Kendo UI v2022.1.301 my grid search button has changed a little and is now misaligned.

I use this code to display a search button with an icon inside the text box:

<span class="k-textbox k-grid-search k-display-flex" style="margin-left:3px;">
    <input id="search-questions" autocomplete="off" placeholder="[#[Search]#]..." class="k-input">
    <span class="k-input-icon"><span class="k-icon k-i-search"></span></span>
</span>

I'm using bootstrap 3 as the theme. I can't spot the CSS that cause the misalignment.

Before and after:

Hello experts

How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

please Answerㅠㅠ

link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan

<form id="myForm"></form>


<script>
  $("#myForm").kendoForm({
    formData: {
        ID: 1,
        FirstName: "John",
        LastName: "Doe",
        Address: "London",
        Postcode: "SW1A 1AA"
    },
    layout:"grid",
    orientation: 'horizontal',
    grid: {
        cols: 2,
        gutter: 20
    },
    items: [{
        type: "group",
        label: "Personal Information",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 2,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "LastName",
            label: "Last Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "Addresss",
            label: "Address:",
            validation: { required: true },
            colSpan: 2
        },{
            field: "Postcodee",
            label: "Postcode:",
            validation: { required: true },
            colSpan: 2
        }]
    },{ 
        type: "group",
        label: "Shipping Address",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 4,
            gutter: 10
        },
        items:[{
            field: "Address",
            label: "Address:",
            colSpan: 2,
        },{
            field: "Postcode",
            label: "Postcode:",
            colSpan: 2
        }]
    }]
  });
</script>