Questions on Kendo UI for jQuery Forum

5 answers

4.9K+ views

[Solved] Filter and sort string columns as Date

Hello,

I have a grid and the data I receive is in string, even for my 2 date columns. I was able to change them in the preferred Date format, but I can't seem to get the filter and sorting working.

I tried to change the datatype of the columns to datetime, but that was unsuccesfullI

I'm now looking for some help to create a custom filter (and sort) so that I can sort and filter my date columns the correct way.

It's a pretty complicated solution, but here's some of the code were I load my grid:

function loadGrid(userGridSettings) {

var gridSettings = {

selectable: "multiple row",

sortable: true,

filterable: true,

pageable: {

refresh: true,

pageSizes: [10, 20, 50, 100],

buttonCount: 5

},

resizable: true,

columnMenu: true,

toolbar: kendo.template($("#searchgrid-toolbar").html()),

editable: "popup",

reorderable: true,

columnHide: saveState,

columnShow: saveState,

columnResize: saveState,

columnReorder: saveState,

columns: [{

field: "IsSelected",

title: null,

sortable: false,

filterable: false,

width: 25,

menu: false,

reorderable: false

}, {

field: "BatchName",

title: "Batchnaam",

filterable: { multi: true }

}, {

field: "RequesterPartyRequired",

title: "Kabelsel.",

filterable: { multi: true }

}, {

field: "StartDate",

title: "Plandatum start",

type: "date",

format: "{0: dd-MM-yyyy}",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: dd-MM-yyyy}'

})

},

multi: false

}

}, {

field: "EndDate",

title: "Plandatum eind",

type: "date",

format: "{0: dd-MM-yyyy}",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: dd-MM-yyyy}'

})

},

multi: false

}

}, {

field: "ID",

title: " ",

filterable: false,

sortable: false,

width: 25,

menu: false,

reorderable: false

}]

};

var customFields = [{

field: "IsSelected",

template: "<input type='checkbox' class='checkbox' #= IsSelected !== undefined && IsSelected ? checked='checked' : '' # />",

headerTemplate: "<input type='checkbox' id='checkAll' />"

},

{

field: "StartDate",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: d-M-yyyy}'

})

},

operators: {

string: {

eq: "Is gelijk aan",

neq: "Is niet gelijk aan"

}

},

multi: false

},

format: '{0: d-M-yyyy}'

},

{

field: "EndDate",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: d-M-yyyy}'

})

},

operators: {

string: {

eq: "Is gelijk aan",

neq: "Is niet gelijk aan"

}

},

multi: false,

},

format: '{0: d-M-yyyy}'

},

{

field: "ID",

template: "#=actionTemplate(data)#"

}];

if (userGridSettings !== undefined && userGridSettings !== "" && userGridSettings !== null && JSON.stringify(userGridSettings) !== "{}") {

gridSettings.columns = userGridSettings;

}

$.each(customFields, function (customFieldIndex, customField) {

$.each(gridSettings.columns, function (columnIndex, column) {

if (column.field == customField.field) {

if (customField.sortable) {

column.sortable = customField.sortable;

}

if (customField.template) {

column.template = customField.template;

}

if (customField.headerTemplate) {

column.headerTemplate = customField.headerTemplate;

}

if (customField.filterable) {

column.filterable = customField.filterable;

}

});

searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");

searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();

searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();

}

Grid

answered on 08 Oct 2020

2 answers

118 views

[Solved] Find grid row from embedded chart click

Hi,

I have a grid with an embedded bar chart. The bar chart is firing a seriesClick() event.
How can I find the grid row containing the chart that fired the event?

Prototype is in this snippet copied from the embedded chart demo. Just click in any bar of a chart.
https://dojo.telerik.com/@eyep/exIVAraw

Thanks in advance,

Eugenio Yep

Grid

answered on 08 Oct 2020

12 answers

2.4K+ views

Multi filter with null values - they are not visible

Hi,

In my grid there are cells where we can accept having null values, e.g. property can exist without owner. I would like to filter owner column in multifilter by having null. Right now, empty (null) values are not visible in multi filter menu, only existing owners are displayed. We hacked the problem by switching from null values to empty strings "", and they are visible in menu. But I'm feeling extremely awful for doing such hacks in my code.

I checked that it's made like that because in FilterMultiCheck _init function you got such line:

FilterMultiCheck

_init: function () {

...

this.checkSource.data(distinct(this.dataSource.data(), this.field));

...

And the distinct function looks like that:

function distinct(items, field) {

...

if (text !== undefined && text !== null && !seen.hasOwnProperty(text)) {

result.push(item);

seen[text] = true;

}

...

You see, that null and undefined values are omited and they are not the part of the results. Unfortunately, removing the null & undefined conditionals don't work - null is showed in menu but you cannot filter by it.

Will you be able to do something with it in the future? Right now i can workaround it, but it's really nasty to replace nulls with empty strings :)

Grid

answered on 08 Oct 2020

5 answers

580 views

[Solved] Horizontal Scroll

Hi, Is there any way to enable horizontal scrolling to my Scheduler?

Scheduler

answered on 08 Oct 2020

4 answers

1.0K+ views

Using DataSource to add data attributes

I see that you can set the text and value of list items with dataValueField and dataTextField, but is there any way to set custom attributes with DataSource (ie: data-*)?

DropDownList

answered on 08 Oct 2020

4 answers

475 views

add zoom css style to grid kendo ui

agregar css de zoom a la cuadrícula, pero al hacer clic en los controles de filtro, los cuadros aparecen desalineados o separados del control ayuda ...

Diagram

answered on 08 Oct 2020

4 answers

3.4K+ views

How to pass string as a argument in a Template

How can I pass a string with single quote in a Kendo grid template -

In the below code I have a function confirmDelete which expects a string argument, in the example I am passing id (encrypted string) but when I add the single quote around it the HTML rendering fails. If I pass just id with no quotes AngularJs throws a error.

This may not be the right forum but I have not got response from the Kendo Lab, i will appreciate your help.

k-columns='[
{ "field": "firstName", sortable:true, "title": "First Name"},
{ "field": "lastName", sortable:false,"title": "Last Name"},
{ "field": "middleName", sortable:true,"title": "Middle Name"},
{ "field": "id", sortable:true,"title": "Id"},
{ "template": "<a href=\"Constituent/Detail/#: id#\">Edit</a><a href=\"\" ng-click=\"confirmDelete('\"+id+\"')\">Delete</a>", "title": "Actions" }]'

General Discussions

answered on 07 Oct 2020

3 answers

427 views

[Solved] Kendo MVVM Template - Not binding Correctly

Hi,

I am trying to bind kendo template with MVVM but unfortunately facing some weird issue. My JSON looks correct but the template is binding the data incorrectly. What's interesting is if I comment either Dropdown or Span, the other control works perfectly. I tried assigning a unique Ids to control but it's not helping. Could you please check below fiddle?

http://jsfiddle.net/rahulsingii/5nzcruk3/8/

General Discussions

answered on 07 Oct 2020

6 answers

875 views

Globally Override Default Properties

Hi Guys,

When using the Grid widget I can globally override a property, for example columnMenu as follows

   kendo.ui.Grid.fn.options.columnMenu = {
        columns: true
   };

but I am unable to find any examples in how to override the default dataSource properties.

What I'm trying to achieve is to always default the schema section with the following values

   schema: {
        data: "data",
          errors: "error",
          total: "total",
     },

to save having to duplicate them on every dataSource instance.

Is this at all possible ?

Regards
Alan

Data Source

answered on 07 Oct 2020

1 answer

222 views

Show Grid Values on a form

Hello,

I have this kendo jquery grid, and I want to display the selected row values to the form above. How can I best achieve that?

and secondly, I want to send the selected row(s) to a controller for processing...

index.vbhtml:
    <div><input id="TxtLoanCodeDescription" /></div>
    <div id="grid"></div>
<script src="~/Scripts/loanInstallments.js"></script>

<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                data: installments,
                schema: {
                    model: {
                        fields: {
                            InstallmentNo: { type: "string" },
                            InstallmentPeriod: { type: "string" },
                            InstallmentMonth: { type: "string" },
                            Principal: { type: "string" },
                            PrincipalRepaid: { type: "string" },
                            PrincipalBalance: { type: "string" },
                            Interest: { type: "string" },
                            InterestRepaid: { type: "string" },
                            InterestBalance: { type: "string" }
                        }
                    }
                },
                pageSize: 20
            },
            //toolbar: ["search"],
            height: 155,
            scrollable: true,
            selectable: "multiple",
            sortable: false,
            filterable: false,
            pageable: false,
            columns: [
                { field: "InstallmentNo", title: "Install", width: "50px" },
                { field: "InstallmentPeriod", title: "Period" },
                { field: "InstallmentMonth", title: "Month" },
                { field: "Principal", title: "Principal" },
                { field: "PrincipalRepaid", title: "Principal Repaid" },
                { field: "PrincipalBalance", title: "Principal Balance" },
                { field: "Interest", title: "Interest" },
                { field: "InterestRepaid", title: "Interest Repaid" },
                { field: "InterestBalance", title: "Interest Balance" }
            ]
        });
    });
</script>

loanInstallments.js

var installments = [
{
    InstallmentNo: "1",
    InstallmentPeriod: "June 2020",
    InstallmentMonth: "June",
    Principal: "10, 000.00",
    PrincipalRepaid: "0.00",
    PrincipalBalance: "10, 000.00",
    Interest: "0.00",
    InterestRepaid: "0.00",
    InterestBalance: "0.00"
    },
    {
        InstallmentNo: "2",
        InstallmentPeriod: "June 2020",
        InstallmentMonth: "June",
        Principal: "10, 000.00",
        PrincipalRepaid: "0.00",
        PrincipalBalance: "10, 000.00",
        Interest: "0.00",
        InterestRepaid: "0.00",
        InterestBalance: "0.00"
    },
    {
        InstallmentNo: "3",
        InstallmentPeriod: "June 2020",
        InstallmentMonth: "June",
        Principal: "10, 000.00",
        PrincipalRepaid: "0.00",
        PrincipalBalance: "10, 000.00",
        Interest: "0.00",
        InterestRepaid: "0.00",
        InterestBalance: "0.00"
    }, {
    InstallmentNo: "4",
    InstallmentPeriod: "June 2020",
    InstallmentMonth: "June",
    Principal: "10, 000.00",
    PrincipalRepaid: "0.00",
    PrincipalBalance: "10, 000.00",
    Interest: "0.00",
    InterestRepaid: "0.00",
    InterestBalance: "0.00"
}];

Grid

answered on 07 Oct 2020