Questions on Kendo UI for jQuery Forum

0 answers

166 views

Date picker is not loading once it is deployed on server but in local it is working.

So this is the code.

@(Html.Kendo().DatePicker()
                          .Name("frShift")
                          .Start(CalendarView.Year)
                          .Depth(CalendarView.Year)
                          .Format("MMMM yyyy")
                          .Value(DateTime.Now)
                          .Min("01/01/" + Model.StartYear)
                          .Max("12/31/" + Model.EndYear)
                          .HtmlAttributes(new { style = "width: 100%;", placeholder = "Select month...", title = "Shift From" })
                          .Events(e =>
                  {
                      e.Change("shiftDemand.updToRow");
                  })

On local it is opening while on server it is not opening due to date control. If we remove date control then it will load. Please respond.

It is on Local

but once i deploy on QA and PROD server its loading but not opening.

Date/Time Pickers

DateInput

DateRangePicker

updated question on 22 Sep 2023

1 answer

433 views

How to dynamically build an array to use as datasource for a kendodropdownlist widget ?

Hello, the following code works like a charm:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];
    

    arr.push({text:"Option 33",value:"Value 33"});

    var datasource = new kendo.data.DataSource({
      data: arr
    });
    datasource.read();

    jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

However if I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = {
        text:operators[i],
        value:operators[i]
      };

      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get [object Object] where I should have the elements
of operators as values and text on the dropdownlist.

If I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = "{text:\""+operators[i]+",value:\""+operators[i]+"\"}";


      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get "undefined" where I should have the elements
of operators as values and text on the dropdownlist.

Any idea on how can get the values from "operators" into the datasource and show up on the dropdownlist ?

Thanks,

Rafael

Data Source

DropDownList

answered on 20 Sep 2023

1 answer

316 views

Trying to replace default Kendo loading Indicator post SASS style change, but can't

Hi there,

I'm in the middle of migrating my site to the new SASS css for the new Progress release (Telerik.UI.for.AspNew.Mvc5.2023.2.829), and I'm trying to override the default animated spinning black circle icon with one of the old loading image gifs from one of your classic css styles which matches the site better.

For example, if you override the css with:

.k-loading-image {
    background-position: center;
    background-image: url(images/kendo/loading-image.gif) !important;
    background-repeat: no-repeat;
}

You end up with the new loading image displaying on-top-of / alongside the SASS default loading animation (see attached image), instead of replacing it.

This seems to be the case with old Dojo examples provided by yourselves in the Forum:

https://www.telerik.com/forums/progress-loading---k-loading-image-doesn-t-work-correctly

Can you please provide a way of overriding the loading indicator based on the new SASS style sheets?

Many thanks,

Mike

Styling

answered on 20 Sep 2023

0 answers

129 views

Kendo Grid appending data -- instead of replacing it -- on refresh

As the title says, my grid is appending the data -- instead of replacing it -- when I refresh the table.

As far as I can tell, this isn't the intended behavior from Telerik, but I also can't find any settings to set this behavior.

I didn't build these components -- someone else did like 5 years ago. However, I did do the update from 2018-2023 so it's entirely possible I simply missed something.

Kendo UI version ^2023.2.718

And here's my code.

 $('#CorrectiveActionsGrid').kendoGrid({
      toolbar: ['excel'],
      excel: {
        fileName: 'CorrectiveActions.xlsx',
        allPages: true,
      },
      dataSource: {
        type: 'aspnetmvc-ajax',
        transport: {
          read: {
            url: '/LoanAudit/GetAssignmentCorrectiveActions',
            type: 'GET',
            dataType: 'json',
            data: { assignedToId: $('#ddlEmployee').data('kendoDropDownList').value() },
          },
        },
        schema: {
          type: 'json',
          data: 'data',
          total: 'total',
          model: {
            id: 'id',
            fields: {
              id: { type: 'string' },
              loanNumb: { type: 'string' },
              questionText: { type: 'string' },
              note: { type: 'string' },
              status: { type: 'string' },
              caDueBy: { type: 'date' },
            },
          },
        },
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
      },
      selectable: true,
      change: function (arg) {
        const selected = $.map(this.select(), function (item) {
          return $(item).find('td').first().text();
        });
        const url = `/LoanAudit/CorrectiveAction/${selected}`;
        window.open(url, '_blank');
      },
      filterable: true,
      sortable: true,
      pageable: {
        refresh: true,
        pageSize: 10,
        pageSizes: [5, 10, 15, 20, 30, 'All'],
        buttonCount: 5,
      },
      columns: [
        { field: 'id', filterable: true, title: 'Corrective Action Id' },
        { field: 'loanNumb', filterable: true, title: 'Loan Number' },
        { field: 'questionText', filterable: true, title: 'Action' },
        { field: 'note', filterable: true, title: 'Reviewer Note' },
        { field: 'status', filterable: true, title: 'Status' },
        {
          field: 'caDueBy',
          filterable: true,
          title: 'Due Date',
          template: "#= (caDueBy == null) ? '' : kendo.toString(kendo.parseDate(caDueBy, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
        },
      ],
    });

Help?

Grid

asked on 19 Sep 2023

1 answer

107 views

How I can disable the select top-corner button in SpreadSheet

Hello,

I need to disable the button that selects the entire sheet in SpreadSheet. I tried to hide it with CSS but the button remains active.

I have highlighted in yellow the button I am talking about in the screenshot below.

Thanks.

Spreadsheet

updated answer on 19 Sep 2023

1 answer

1.6K+ views

Remove required attribute after form built

I have a form on a page with inputs. Some are kendo dropdownlists, some are basic html inputs, etc. That form uses a kendo validator. Normally when I want a field to be required I just add the required attribute to the input or select. That is what I'm doing here. Where the question arises is that as the user is doing other things on the page some of the fields in my form become not required or required again. How do I dynamically change the required state of a field in a kendo form after the form controls and validator have been initialized? Can I simply remove the required attribute from the basic html form element or must I do something more?

Validation

answered on 19 Sep 2023

1 answer

113 views

when load state -> custom editor is not rendered as expected

when load

expected

Filter

answered on 18 Sep 2023

1 answer

78 views

AngualrJS kendo-date-picker, how to color day cells.

I have a Kendo Date Picker for AngualrJS and I would like to color the individual day cells for a given day within the month.

How do I do that?

I see the Angualr solution with ng-template, but how do I do that in AngualrJS?

Date/Time Pickers