Questions on Kendo UI for jQuery Forum

1 answer

54 views

Multiple Row grid against single row column

I want to create grid like shown in picture. Need code reference or guidance. Your help will really be appreciated.

Data Source

Grid

answered on 11 Apr 2023

0 answers

48 views

How do I recreate the custom column filter values (checkboxes)

I am looking for a help where I need to recreate the options for column filter values when the data on left hand side filter changes?

I have a drop down list country on left hand side and when ever user select the country the column(region), filter (custom filter, based on column on the grid) all the checkboxes for the custom filter should reflect the region as per the country selected.

asked on 09 Apr 2023

1 answer

51 views

TreeView dataSource change event e.action "itemLoaded"

My dataSource change handler is getting an event with with e.action set to itemLoaded, which is not one of the defined values in the API documentation.

I am wondering if this is a valid event action that I can target and the documentation is not correct, or if this is something else like a bug.

Here is a dojo. If you run it and expand the item, in the browser console you will see a couple events, the last of which is the itemLoaded event.

Data Source

TreeView

answered on 31 Mar 2023

1 answer

102 views

Problems with DataSource

Hi,

i have a question regarding the DataSource.

I am using the code below. I don't have it in a separate file but in the <script> tag of the HTML. It's not the entire code either, that would probably be an unnecessary amount here. My problem concerns the valueOrderFinished. Inside the DataSource in the schema, the value is set. That works well, because when I set the innerhtml of #outputtest, the right value is displayed. But when I try to access it outside, in my document ready function, I always get that valueOrderFinihed is undefined.
What I also don't understand, when I debug this code, it jumps from the transport part of the DataSource directly into my createCharts() function, and then back into the schema part of the DataSource.

I am really stumped and can't manage to solve the problem... can someone help me?

var showProfile = 0;

var valueOrderFinished;

[...]

            var dataSourceOrderFinished = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "Services/OrderServices.asmx/GetCountOrderFinished",
                        contentType: 'application/json; charset=utf-8',
                        type: "POST"
                    },
                    parameterMap: function (options) { return JSON.stringify({ parameter: options }); }
                },
                schema: {
                    data: function (result) {
                        console.log(result.d.Count);
                        document.getElementById("outputtest").innerHTML = result.d.Count;
                        valueOrderFinished = result.d.Count;
                    },
                    total: function (result) { return result.d.Count; }
                }
            }
            );



            /* */
            /* */
            /* ++++ Funktionen ++++ */
            $(document).ready(function () {
                console.log("dokument ready");
                hideProfileElements();
                console.log("Profilelemente versteckt");
                valueOrderFinished = dataSourceOrderFinished.read();
                console.log("datasource gelesen");
                console.log(valueOrderFinished);
                createCharts();
            });

[...]

Data Source

answered on 29 Mar 2023

1 answer

45 views

TreeView: process only nodes that meet certain criteria

Hi all,

I have a JSON tree with 3 levels of depth that I want to transform into a TreeView with checkboxes. This tree is sent by a server and the nodes contain certain metadata that will help me to format the output. More specifically, if a node has "isshop" to 1, or "isshop" is 0 but "_chn" is 1, then I have to include it. If the node is not a shop and has no children I should not output it.

The issue is that using templates the most I have been able to reach is having gaps in the view where the filtered nodes should have been without applying conditions. Here is my template:

<script id="tvCentrosTmpl" type="text/kendo-ui-template">
    # if (item.isshop == 1 || (item.isshop == 0 && item._chn)) { #
        <div class="spnNameCentro" data-idmodel="#:item.id#" data-uid="#:item.uid#" data-type="#:item.type#" data-isshop="#:item.isshop#">#:item.name#</div>
    # } #
</script>

And in the checkboxes definition I am using this:

template: function(data){
    if (data.item.isshop == 1 || (data.item.isshop == 0 && data.item._chn))
    {
        return '<input type="checkbox" class="chkParams" data-id="' + data.item.id + '" data-isshop="' + data.item.isshop + '" onclick="srcInhibMasivas.chkCenter_click(this);" />'
    }
    return '';
}

Here is an example output where "Z03" has no children and is not a shop:

Is there any way to leave the undesired nodes out without having to traverse and process the JSON client-side?

Thank you very much, best regards.

Data Source

TreeView

answered on 28 Mar 2023

1 answer

631 views

Multiple Fields in one Grid Column - Multiple filters possible

Hello there!

I have a question regarding the use of multiple fields in one KendoGrid column.

I managed to display multiple fields in one column by using this code (data source is set dynamically using a buttongroup):

$("#users-grid").kendoGrid({
                groupable: false,
                filterable: { mode: "menu" },
                sortable: true,
                resizable: true,
                pageable: true,
                columns: [{
                    title: "OrderNumber",
                    field: "OrderNumber",
                    width: "10%",
                    resizable: true,
                    template: '#=OrderNumber#',
                    filterable: true
                },
                    {
                        title: "Address",
                        field: "AddressDelivery.ZipCode",
                        width: "35%",
                        resizable: true,
                        template: '#=AddressDelivery.ZipCode#  #=AddressDelivery.City# - #=AddressDelivery.Street#  #=AddressDelivery.StreetNumber# - #=AddressDelivery.Iso3166Alpha2#'
                    },
                {
                    title: "Creation Date",
                    field: "CreationDate",
                    width: "8%",
                    resizable: true,
                    template: '#=isNull(CreationDate)?\'\':kendo.toString(CreationDate, \'dd.MM.yy\')#'
                },
                {
                    title: "Complete Date",
                    field: "CompleteDate",
                    width: "8%",
                    resizable: true,
                    template: '#=isNull(CompleteDate)?\'\':kendo.toString(CompleteDate, \'dd.MM.yy\')#'
                },
                {
                    title: "Company / Last Name",
                    field: "AddressDelivery.Company",
                    width: "25%",
                    resizable: true,
                    template: '#=AddressDelivery.Company?AddressDelivery.Company:\'\'# / #=AddressDelivery. LastName#'
                }]
               
            });

However, I want to make it possible, that my Users can filter the column "Address" regarding every field that is displayed. At the moment I can only filter by AddressDelivery.ZipCode.

How would I manage that?

Best regards

Data Source

Filter

Grid

answered on 06 Mar 2023

0 answers

43 views

Binding more than 1 pages to kendo

Hi guys,
I searched all the documents but there was nothing about binding more than 1 view. I have an error about length.

Here is the error:

Uncaught TypeError: Cannot read properties of null (reading 'length')
at o (kendo.ui.core.js:11901:65)
at r (kendo.ui.core.js:11933:51)
at r (kendo.ui.core.js:11983:67)
at r (kendo.ui.core.js:11983:67)
at r (kendo.ui.core.js:11983:67)
at r (kendo.ui.core.js:11983:67)
at Object.s [as bind] (kendo.ui.core.js:11998:9)
at TakvimDonemTanimlariService.initialize (TakvimDonemTanimlariService.js?v=DWpWtbx8AYW9jERt4Zt9itqDau9V9clzgEHhorRx-l8:400:15)
at HTMLDocument.<anonymous> (TakvimDonemTanimlariService.js?v=DWpWtbx8AYW9jERt4Zt9itqDau9V9clzgEHhorRx-l8:410:33)
at mightThrow (jquery.js:3557:29)

Here is what I am binding:

kendo.bind($(".service-body"), takvimDonemTanimlariService);
kendo.bind($(".form-wrapper"), takvimDonemTanimlariService);

How can I solve this problem?

Data Source

asked on 06 Mar 2023

0 answers

47 views

Displaying remote integer data

Hello,

I ran into an relatively simple issue and I just can not find out how to do it.
I have a Donut Chart which I want to fill with remote data.

function createCharts() {
                var showLabels = $(document).width() > 677;

                $("#overview-chart").kendoChart({
                    theme: "sass",
                    dataSource: {
                        data: [
                            { value: countOrderFinished, type: "New Orders" },
                            { value: 30, type: "Orders in Process" },
                            { value: 180, type: "Finished Orders" },
                        ]
                    },
                    series: [{
                        type: "donut",
                        field: "value",
                        categoryField: "type",
                        startAngle: 70,
                        holeSize: 55
                    }],
                    legend: {
                        position: "bottom"
                    }
                });

                kendo.resize($(".k-grid"));
            }

            $(document).ready(createCharts);
            $(document).bind("kendo:skinChange", createCharts);

            $(window).on("resize", function () {
                kendo.resize($(".k-chart"));
            });

How would I manage to fill my Variable countOrderFinished with remote data? I tried this way, but it did not work:

var countOrderFinished = new kendo.data.DataSource({
                type: "json",
                read: {
                    url: "Services/OrderServices.asmx/GetCountOrderFinished",
                    contentType: 'application/json; charset=utf-8',
                    type: "POST"
                },
            });

I think it is a simple solution but I just cant get it.

Thank you for your Help!

Data Source

asked on 01 Mar 2023

0 answers

49 views

dir-paginate equivalent

Good afternoon,

I've been working on an effort to replace angularJS with Kendo for JQuery. For the most part, there's been a solution for everything, but I'm running into a bit of a hiccup. Is there some sort of equivalent I can use to replace the dir-pagination directive (which can be applied to things like TR or LI elements) that angular uses?

Thanks,