Questions on Kendo UI for jQuery Forum

18 answers

762 views

My mobile app build with kendo ui failed user acceptance testing because the app is "slow", "sluggish" or "sometimes stops working". After some research I found out that the app quite often fails to react when the user clicks a button: the click event does not fire when the user does not tap "the right way". Since my app aims at inexperienced users, this is a serious issue.

The problem can easily be reproduced in the button/events demo, especially when viewed on a mobile device:

http://demos.telerik.com/kendo-ui/mobile/button/events.html

Just between touching and releasing move the finger or mouse a little bit to the side or up/down, and the click event does not fire.

What's worse (and why i would consider this an error) is that the user gets a visual feedback that the button was pressed --- but nothing happens!

It's kind of like the opposite of the problem in this thread: http://www.telerik.com/forums/button-click-event-firing-when-trying-to-scroll where someone is (ab?)using oversized buttons.

Is there a way to set the sensibility of how much wiggle is allowed until a touch isn't a click anymore? Any other solution?

I am using kendoui.complete.2013.3.1119. The behaviour was tested on iOS6 & iOS 7 (iPad).

TIA Marco

Button (Mobile)

answered on 04 Mar 2015

0 answers

26 views

Important: Tooltips not visible in Q3'13 release

Hello,

A defect is preventing the sparkline tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

Recommended temporary workarounds:

Disable shared tooltips. This will not negatively affect Sparklines with only one series.

$("#hum-log").kendoSparkline({
type: "area",
data: [71, 70, 69],
tooltip: {
format: "{0} %",
shared: false
}
});

Set series names on Sparklines with more than one series:

$("#sparkline").kendoSparkline({
type: "area",
series: [{
name: "Series one",
data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
}, {
name: "Series two",
data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
}],
tooltip: {
format: "{0} %"
}
});

Apologies for the caused inconvenience.

Sparkline

asked on 21 Nov 2013

1 answer

4 views

How to update gantt task assignments directly on datasource

Using the code below I can successfully update a gantt task (I'm using a custom edit screen + custom update function). It fires off my transport update handler and axios does the update just fine.

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { title: "New Title" });
  ganttdatasource1.sync()

What I can't figure out is how to update the resource assignments, doing as below seems to ignore the 'resources' property so when in the transport update handler 'resources' just has the ones that were originally set,

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { 
        title: "New Title", 
        resources: {
            taskId: 111,
            resourceId: 222,
            value: 5,
        } 
    });

  ganttdatasource1.sync()

Gantt

answered on 06 May 2021

2 answers

10 views

Is there a way to keep connectors visible even without hover the diagram shape?

Get the example diagram in https://dojo.telerik.com/oNOJidug from example in Diagram Connections page reference

With the basic configuration:

$("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
            text: "Step 1"
        },
        stroke: {
            color: "#33ccff"
        }
      }
    ]
  });

My question is, is there a way to keep the connectors of both shapes visible without need to keep mouse hover?

I want this:

instead of:

Diagram

answered on 05 May 2021

5 answers

78 views

Chart with negative value

hi team, I want to show a chart with some negative values, ( and also positive values). However, I found that the xaxis labels are always under the line y=0. I do not want them appear in the chart, instead, I would like to show label in the bottom to the chart. I notice in your demo:

categoryAxis: {
...
labels: {
padding: {top: 145}
}
},

than the padding parameter can set the xaxis label's position. However, since my data is dynamic, I do not know how distance I should padding. Is there a way to automatically determine the position of xaxis label to the bottom?

Charts

updated answer on 05 May 2021

0 answers

2 views

PivotGrid with Mondrian can't see dimension levels

Hello,

I can't see dimension levels when using PivotGrid. This is my schema:

<Schema name = "TestIncassi">
    <Cube name="Incassi" cahce="true" enabled="true">
        <Table name="righedocumento"/>
        <Dimension type="StandardDimension" name="Articolo" foreignKey="idart">
            <Hierarchy hasAll="true" allMemberName="Tutti gli articoli" primaryKey="id">
                <Table name="articolistd"/>
                <Level name="Codice" visible="true" column="codarticolo" uniqueMembers="true" type="String" levelType="Regular" hideMemberIf="Never"/>
            </Hierarchy>
        </Dimension>
        <Dimension name="Periodo" foreignKey="idtes" type="TimeDimension">
            <Hierarchy hasAll="true" allMemberName="Tutti i periodi" primaryKey="id">
                <Table name="documenti"/>
                <Level name="Anno" uniqueMembers="true" levelType="TimeYears">
                    <KeyExpression>
                        <SQL dialect="postgres">EXTRACT(YEAR FROM datadoc)</SQL>
                    </KeyExpression>
                </Level> 
                <Level name="Mese" uniqueMembers="false" levelType="TimeMonths">
                    <KeyExpression>
                        <SQL dialect="postgres">EXTRACT(MONTH FROM datadoc)</SQL>
                    </KeyExpression>
                    <NameExpression>
                        <SQL dialect="postgres">
                            case EXTRACT(MONTH FROM datadoc)
                                when 1  then 'Gennaio'
                                when 2  then 'Febbraio'
                                when 3  then 'Marzo'
                                when 4  then 'Aprile'
                                when 5  then 'Maggio'
                                when 6  then 'Giugno'
                                when 7  then 'Luglio'
                                when 8  then 'Agosto'
                                when 9  then 'Settembre'
                                when 10 then 'Ottobre'
                                when 11 then 'Novembre'
                                when 12 then 'Dicembre'
                            else 'Errore'
                            end
                        </SQL>
                    </NameExpression>
                </Level> 
                <Level name="Settimana" uniqueMembers="false" levelType="TimeWeeks">
                    <KeyExpression>
                        <SQL dialect="postgres">EXTRACT(WEEK FROM datadoc)</SQL>
                    </KeyExpression>
                    <NameExpression>
                        <SQL dialect="postgres">TO_CHAR((datadoc), 'W')</SQL>
                    </NameExpression>
                </Level> 
                <Level name="Giorno" uniqueMembers="false" levelType="TimeDays">
                    <KeyExpression>
                        <SQL dialect="postgres"> EXTRACT(DAY FROM datadoc)</SQL>
                    </KeyExpression>
                    <NameExpression>
                        <SQL dialect="postgres">TO_CHAR((datadoc), 'DD')</SQL>
                    </NameExpression>
                </Level> 
            </Hierarchy>
        </Dimension>
        <Dimension name="Tipo Documento" foreignKey="idtes">
            <Hierarchy hasAll="true" allMemberName="Tipi Documento" primaryKey="id" primaryKeyTable="documenti">
                <Join leftKey="idtpdoc" rightKey="id">
                    <Table name="documenti"/>
                    <Table name="ttipodocumento"/>
                </Join>
                <Level name="Codice" table="ttipodocumento" column="codice" uniqueMembers="false" internalType="String"/>
            </Hierarchy>
        </Dimension>
        <Dimension name="Fornitore" foreignKey="idcodforn">
            <Hierarchy hasAll="true" allMemberName="Fornitori" primaryKey="id" primaryKeyTable="codicifornitori">
                <Join leftKey="idforn" rightKey="id">
                    <Table name="codicifornitori"/>
                    <Table name="anagraficapgfstd"/>
                </Join>
                <Level name="Fornitore" table="anagraficapgfstd" column="ragsoc" uniqueMembers="false" internalType="String"/>
            </Hierarchy>
        </Dimension>
        <Dimension name="Categoria Merceologica" foreignKey="idart">
            <Hierarchy hasAll="true" allMemberName="Tutte le categorie merc." primaryKey="id" primaryKeyTable="articolistd">
                <Join leftKey="idcm" rightKey="id">
                    <Table name="articolistd"/>
                    <Table name="tcatmerstd"/>
                </Join>
                <Level name="Codice Cat.Mer." table="tcatmerstd" column="codice" uniqueMembers="false" internalType="String" visible="true"/>
            </Hierarchy>
        </Dimension>
        <Measure name="Importo"             column="imponibile"     aggregator="sum"        formatString="#,###.00"/>
        <Measure name="Quantità"            column="quantita"       aggregator="sum"/>
        <Measure name="Costo"               column="acqprezzo"      aggregator="sum"        formatString="#,###.00"/>
        <CalculatedMember 
                name="Margine Valore" 
                dimension="Measures" 
                formula="([Measures].[Importo] - [Measures].[Costo])" 
                visible="true" 
                caption="Margine Valore">
            <CalculatedMemeberProperty name="FORMAT_STRING" value="#,###.00"/>
        </CalculatedMember> 
    </Cube>
</Schema>

If I use Saiku, everything works: I can see all dimensions and all levels. (you can see it in the image below on the left).

Instead, if I use PivotGrid, I see fields but not levels. When I try to drill down fields, I continue to see the field endlessly. (An example in the image below)

There are no errors in the logs.

Anyone have ideas/suggestions?

Thank u.

Filter

PivotGrid

asked on 05 May 2021

1 answer

7 views

Angular Chart Reclaculate CategoryAxis labels step after zoom

Hello

I have an Angular column chart. On render event, I calculate the CategoryAxis labels steps. Then after zoomEnd event, I get new (current) categories and according to them, again I recalculate the CategoryAxis labels steps to have new steps(distance) for labels.

The question is, that after setting the new step size, the chart initialized again with "0" levels zooming. I mean after setting the new steps I lose my zoomed stage.

Thanks in advance

Charts

answered on 05 May 2021

9 answers

220 views

How to avoid duplicate entry in Grid

Hello,

How to avoid duplicate entry in Grid / Inline editing?

I am used MVC 4 With Eazor.

Thanks,
Quest

Grid

answered on 05 May 2021

1 answer

6 views

How to make reload all value then return step 1

Sorry My Title maybe something went wrong. It means. After click done, deleting all values and returning it to step 1 to perform new action.

This code I have taken from https://demos.telerik.com/kendo-ui/wizard/ajax

    <div id="example">
    <div class="demo-section k-content wide">
        <div id="wizard"></div>
    </div>
    <script>
        $("#wizard").kendoWizard({
            loadOnDemand: true,
            reloadOnSelect: false,
            steps: [
                {
                    title: "Welcome",
                    buttons: ["next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent1.html"
                }, {
                    title: "Attendee Details",
                    contentUrl: "../content/web/wizard/ajax/ajaxContent2.html",
                }, {
                    title: "Agenda",
                    buttons: ["previous", "next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent3.html",
                }, {
                    title: "Finalize",
                    buttons: ["previous", "done"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
                },
            ],
            done: function (e) {
                e.preventDefault();
                var form = $('#attendeeDetails').getKendoForm();
                var talkDDLValue = $("#talk").data("kendoDropDownList").value();
                var workshopDDLValue = $("#workshop").data("kendoDropDownList").value();

                if (!form.validate()) {
                    e.sender.stepper.steps()[1].setValid(false);
                    kendo.alert("Please complete registration form");
                    e.sender.select(1);
                } else if (talkDDLValue == "" || workshopDDLValue == "") {
                    e.sender.stepper.steps()[1].setValid(true);
                    e.sender.stepper.steps()[2].setValid(false);
                    kendo.alert("Please select the talk and workshop you want to subscribe for");
                    e.sender.select(2);
                }
                else {
                    if (e.sender.stepper.steps()[1].options.error) {
                        e.sender.stepper.steps()[1].setValid(true);
                        e.sender.stepper.steps()[2].setValid(true);
                    }

                    kendo.alert("Thank you for registering! Registration details will be sent to your email.");
                }
            },
            select: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            contentLoad: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            reset: function () {
                var form = $('#attendeeDetails').getKendoForm();

                if (form) {
                    form.clear();
                }
            }
        });

        function updateSelection(e) {
            var selectedTalk = e.sender.wrapper.find('#talk').getKendoDropDownList().dataItem();
            var selectedWorkshop = e.sender.wrapper.find('#workshop').getKendoDropDownList().dataItem();
            $('#selectedTalk').html(selectedTalk.id === '' ? '' : selectedTalk.title);
            $('#selectedWorkshop').html(selectedWorkshop.id === '' ? '' : selectedWorkshop.title);
        }
    </script>

    <style>
        .wizardContainer {
            display: flex;
            height: 250px;
            justify-content: center;
            align-items: center;
        }
    </style>
</div>

Wizard

answered on 05 May 2021

1 answer

10 views

How to Upload Image and Show Image in Kendo Wizard

Hello, I have some problem when use Kendo Upload + Kendo Wizard.

Specifically I'm doing a Kendo Wizard with an .html file.

In the .html file of step 1, I used Kendo Upload to Upload Image.

Then It will show up in the .html file of step 2. But now I can only show in step 1 and I don't know how to show it in step 2

Please help me, thanks!!!

My Kendo Wizard Code:

$("#wizard").kendoWizard({
        loadOnDemand: true,
        reloadOnSelect: false,
        steps: [
            {
                title: "Upload",
                icon: "upload",
                successIcon: "check",
                buttons: ["next"],
                contentUrl: "./step1.html"
            }, {
                title: "Settings",
                icon: "gear",
                successIcon: "check",
                contentUrl: "./step2.html"
            }, {
                title: "Check All",
                icon: "preview",
                successIcon: "check",
                buttons: ["previous", "next"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            }, {
                title: "Save",
                icon: "save",
                successIcon: "check",
                buttons: ["previous", "done"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            },
        ],
        done: function (e) {
            e.preventDefault();
            var form = $("form").getKendoForm();
            var zxy = $("#title").val();

            console.log(zxy);

            if (e.sender.stepper.steps()[1].options.error) {
                e.sender.stepper.steps()[1].setValid(true);
                e.sender.stepper.steps()[2].setValid(true);
            }

            kendo.alert("Thank you for registering!");

        },

        reset: function () {
            var form = $("form").getKendoForm();

            if (form) {
                form.clear();
            }
        }
    });

My step1 is Kendo Upload

<inputname="files"id="files"type="file"/>

$("#files").kendoUpload({
        async: {
            chunkSize: 11000,// bytes
            saveUrl: "https://demos.telerik.com/kendo-ui/upload/chunksave",
            removeUrl: "https://demos.telerik.com/kendo-ui/upload/remove",
            autoUpload: true
        },
        validation: {
            allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
        },
        success: onSuccess,
        showFileList: true,
    });
    function onSuccess(e) {
        if (e.operation == "upload") {
            for (var i = 0; i < e.files.length; i++) {
                var file = e.files[i].rawFile;
                if (file) {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        $("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }

My step 2 is form, I want to show the image uploaded in step 1 above the form. And I'm having trouble here

<form>

<div class="wrapper">

 
<div id="products"></div>
</div>

<input type="text" id="title" name="title" class="k-textbox" />
</form>

Demo:

Step 1: Upload (Image step1.png)

Step2: Input Information (Image step2.png)

Upload

Wizard

answered on 05 May 2021