Questions on Kendo UI for jQuery Forum

7 answers

1.7K+ views

How add/remove item dynamic in Tilelayout ~

Hi !

I'm using Kendo TileLayout in Jquery. When I create Tilelayout.

I want add or remove item dynamic at runtime, but I don't find way to do it.

Please help me do it

Many thanks !

TileLayout

updated answer on 07 May 2021

1 answer

724 views

Grid update VERY slow with 60000 rows

I have a large grid (to support filter functions) and I have editable: "popup" set. This is fine when I have a 20 row set, but it doesn't finish in a tolerable length of time with a 60,000 row set.

I have not yet written the writeback functions to update the database. This is just updating the grid.

Any advice would be appreciated.

Here is the code:

@{
    ViewBag.Title = "Casebook Files";
}

<h2>Casebook Files</h2>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
@*<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>*@
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>


<div id="kendoGrid">
    
</div>

<script>
    var caseBookDatasource;
    $(function () {

        $("#kendoVersion").text(kendo.version);
        var casebooks = getCaseBooks();

    });

    function getCaseBooks() {

        $.ajax({
            //url: "/Home/GetCaseBooks"
            url:"/Home/GetNewtonCaseBooks"
        }).done(function (rows) {
            var datarows = JSON.parse(rows);
            buildCasebookDatasource(datarows)
            createGrid();
        });

    }

    function buildCasebookDatasource(rows) {
        caseBookDatasource = new kendo.data.DataSource({
            data: rows,
            schema: {
                model: {
                    fields: {
                        recordId: { type: "number" },
                        caseNumber: { type: "string" },
                        caseName: { type: "string" },
                        serviceReqDate: { type: "date" },
                        srProg: { type: "string" },
                        srUnit: { type: "string" },
                        boxNumber: { type: "number" },
                        destructDate: { type: "date" },
                        notes: { type: "string" },
                        otherNames: { type: "string" },
                        initials: { type: "string" },
                        xRef1: { type: "string" },
                        xRef2: { type: "string" },
                        xRef3: { type: "string" },
                        xRef4: { type: "string" }

                    }
                }
            },
            pageSize: 20,
            sort: {
                field: "caseNumber",
                dir: "asc"
            }

        });
    }

    function createGrid() {
        $("#kendoGrid").kendoGrid({
            dataSource: caseBookDatasource,
            height: 750,
            pageable: true,
            sortable: true,
            filterable: true,
            scrollable: "virtual",
            columns: [
                {
                    field: "recordId"

                },
                {
                    field: "caseNumber",
                    title: "Case #",
                    width: 100
                },
                {
                    field: "caseName",
                    title: "Name",
                    width: 200
                },
                {
                    field: "serviceReqDate",
                    title: "Received",
                    template: "#= kendo.toString(kendo.parseDate(serviceReqDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    width: 120
                },
                {
                    field: "srProg",
                    title: "Program",
                    width: 50
                },
                {
                    field: "srUnit",
                    title: "Unit",
                    width: 50
                },
                {
                    field: "boxNumber",
                    title: "Box",
                    width: 50
                },
                {
                    field: "destructDate",
                    title: "Destroyed",
                    template: "#= kendo.toString(kendo.parseDate(destructDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    width: 120
                },
                {
                    field: "notes",
                    title: "Notes",
                    width: 200
                },
                {
                    field: "otherNames",
                    title: "Other Names",
                    width: 200
                },
                {
                    field: "initials",
                    title: "Initials",
                    width: 50
                },
                {
                    field: "xRef1",
                    title: "XRef1",
                    width: 50
                },
                {
                    field: "xRef2",
                    title: "XRef2",
                    width: 50
                },
                {
                    field: "xRef3",
                    title: "XRef3",
                    width: 50
                },
                {
                    field: "xRef4",
                    title: "XRef4",
                    width: 50
                },
                {command: "edit"}
            ],
            editable: "popup",
            toolbar:["create","cancel", "save"]
        });
    }

   


</script>

Data Source

Grid

answered on 07 May 2021

1 answer

11.2K+ views

default value in dropdownlist

I have this

$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });
////////////////
whenever I load the page the dropdownlist is not automatically filled with the first value of the list (default value).
I have to click the mouse or do something and it gets filled.

if I put it like this
alert('hello');
$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });

after I click the alert the default value is filled.
How can I make it fill the default without needing a popup?

DropDownList

answered on 06 May 2021

1 answer

209 views

Spreadsheet not loading data when number is formatted as text

Hi,

When loading the attached file, the data is not completely loaded in spreadsheet. https://dojo.telerik.com/AjOWOPEG

PFA the file as well.

Is there any specific formatting that spreadsheet allows or some restricted formatting. Please suggest.

Spreadsheet

answered on 06 May 2021

2 answers

151 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

767 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

1 answer

222 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

3.5K+ 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

856 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

1.5K+ 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