Questions on Kendo UI for jQuery Forum

1 answer

787 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

1 answer

270 views

clear method of the form removes checkboxgroup value attribute

hello everyone

i have a checkbox group inside a form

when ever i clear the form with form.clear or even with the default clear button of the form , the value attribute of checkbox become empty and from that time i can not work with items of checkboxgroup with theirs value.

is there any one can help me?

CheckBoxGroup

Form

answered on 05 May 2021

1 answer

279 views

Screen Readers not reading headers on Sortable/Scrollable grids

Hello all,

I'm working on accessibility features for one of our kendo grids, and our version of kendo ui is v2012.2.710. This one has both sortable and scrollable set to true. One problem is that if scrollable is set to true the headers and body are broken up into two separate tables, and so the headings to not get read when using screen reader navigation (which is using ctrl and the arrow keys to navigate within the table). The screen reader also correctly reads there are two tables and thus you can't navigate easily from the headings to the body using screen reader controls. The other problem being that setting sortable to true makes it so the headings are read off as links.

For the scrollable problem, I've simply set scrollable to false for now, but is there a way to keep this functionality and have the table not be broken up? Or to add some sort of setting to trick the screen reader into thinking it's all one table? I've read about adding scope="col" as an attribute to the headings but that doesn't seem to address the problem.

For sorting, I'm having a lot more difficulty. I've tried using aria-labels but I can't seem to get a consistent fix working for it. When trying to relabel the headings it seems to break the heading association that setting scrollable to false fixes, I'll get a generic "Column 1" read back to me instead of the heading name. I'm also getting mixed results when dealing with the two different screen readers (NVDA and Narrator) that we test against.

Thus far I've had the best luck setting both scrollable and sortable to false and making sure every column has fields and titles set for it. Just wondering if there's an official answer on this or if someone's been through this. I know we've got a pretty old version of kendo to work with and if you know of an update that addresses this, that's helpful as well.

Thanks!

Accessibility

Grid

Sortable

answered on 04 May 2021

16 answers

728 views

Date field Custom Validation with Formatting (Case Sensitive!)

Hi, currently I have a date field with the custom format dd-MMM-YYYY
fields: [{ field: "StartDate", title: "Start Date", format: "dd-MMM-yyyy"}]

I have implemented a custom validator in the schema (retyped, but I think the syntax is correct)
fields: {
StartDate: { type: "date",
validation: { dateValidation: function (input) {
var isValid = true;
alert('validator executed');
try {
//insert check to validate date
}
catch (error) { isValid = false; }
return isValid;
}
}
}

When I enter manually 19-Apr-2012, the validator works - The alert box fires off. If I use 19-APr-2012 (capital P!), the custom validation does not occur.
I assume this is caused by some RegEx somewhere ... Is there anyway to get around this case sensitive 'feature' ?

thanks!

Grid

answered on 04 May 2021

5 answers

509 views

DataSource filtering not working

I have this JSON that I am displaying in a kendo template. The format is as follows:

[

{

"Pending": [

{"FieldA": "SomeValue", "FieldB", "SomeValue"},

{"FieldA": "SomeValue", "FieldB", "SomeValue"}

],

"Submitted": [

{"FieldA": "SomeValue", "FieldB", "SomeValue"},

{"FieldA": "SomeValue", "FieldB", "SomeValue"}

]

}

]

It always return an array with 1 object that has 2 fields: Pending and Submitted. Now each field contains an array of objects shown above.

What I am trying to do is to filter Pending and Submitted thru Field A but its always nothing.

Here is my code:

var filtersArray = [

{

field: "Pending",

operator: function(itemValue, value) {

return itemValue && itemValue.find(function (item) {

return item.FieldA == value;

});

},

value: "searchTextHere"

},

{

field: "Submitted",

operator: function(itemValue, value) {

return itemValue && itemValue.find(function (item) {

return item.FieldA == value;

});

},

value: "searchTextHere"

}

];

var filter = {

logic: "or",

filters: filtersArray

};

formDataSource.filter(filter);

Data Source

answered on 03 May 2021

1 answer

660 views

How to use kendo stepper with "Form or Other Kendo" in each corresponding step

How to use kendo Stepper with Upload Image.

Example:

I want step 1 is Upload Image. Then Step 2 is Show this Image and Input information this Image

Stepper

answered on 03 May 2021

1 answer

502 views

How to "Enable Selection" in a kendoPDFViewer component

I'm using a KendoPDFViewer component, and it works fine.

I want to enable selection by default, so that the use don't need to enable it manually.

I want to know in the following code snipet, how can i set "Enable Selection" property to true?

function createPdfViewer($elem) {
	$.when(
		$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
		$.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
	).done(function () {
		window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
	}).then(function () {
		$elem.kendoPDFViewer({
			pdfjsProcessing: {
				file: $elem[0].dataset.filename
			},
			width: $elem[0].dataset.width,
			height: $elem[0].dataset.height
		}).data("kendoPDFViewer");
	});
}

PDFViewer

answered on 03 May 2021

6 answers

1.1K+ views

Calling kendoGrid dataSource.read() removes added class to current row

I have added a custom class to each td in a kendoGrid, to display a different color in cells that are readonly.

But when I run this: $("myGrid").data("kendoGrid").refresh();

it removes the class from the current row.

Is there a way to prevent this from happening?

Grid

answered on 03 May 2021

1 answer

291 views

KendoUI Jquery grid - parameters on WebAPI has null

Hello,

I am trying Kendo UI to see if we can use it in our projects.

This is my first attempt to load a grid. The WebAPI method gets hit but, the parameters on the WebAPI side are showing as null.

Can anyone let me know what needs to be changed here?

 var costCenter = {

                        Contract_StartDate : '01/01/2021',  
                        Contract_EndDate : '05/01/2021'
                        Grant_ID : 750  
                    }
       
                            
       
         var crudServiceBaseUrl = 'http://localhost:55383/api/CostCenterSetup',
             dataSource = new kendo.data.DataSource({
                 
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/GetCostCenterDataForEdit",
                            type:"POST",
                            data: function () {
                                alert(costCenter.Contract_StartDate);
                                return costCenter
                            },
                                //{
                                //    Contract_StartDate: "01/01/2021", 
                                //    Contract_EndDate : "05/01/2021",
                                //    Grant_ID: "750"  
                                //}                            ,    
                            contentType : "application/json",
                            dataType: "json"
                        },
                        //,
                        //update: {
                        //    url: crudServiceBaseUrl + "/UpdateCostCenterInfo",
                        //    dataType: "jsonp"
                        //},
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/DeleteCostCenterInfo",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    autoSync: true,
                    aggregate: [{
                        field: "TotalSales",
                        aggregate: "sum"
                    }],
                    group: {
                        field: "Category.CategoryName",
                        dir: "desc",
                        aggregates: [
                            { field: "TotalSales", aggregate: "sum" }
                        ]
                    },
                    schema: {
                        model: {
                            id: "CostCenterID",
                            fields: {
                                CostCenterID: { editable: false, nullable: true },
                                CostCenter_Name: { type: "string", editable: false },
                                Grant_ID: { type: "string", editable: false },
                                Fund_ID: { type: "string", editable: false },
                                Department_ID: { type: "string", editable: false },
                                Program_ID: { type: "string", editable: false },                               
                                //Fund: {
                                //    defaultValue: {
                                //        FundID: -1,
                                //        FundName: "---Select---"
                                //    }
                                //},
                                //Grant: {
                                //    defaultValue: {
                                //        GrantID: -1,
                                //        Grant: "---Select---"
                                //    }
                                //},
                                //Department: {
                                //    defaultValue: {
                                //        DepartmentID: -1,
                                //        Department: "---Select---"
                                //    }
                                //},
                                //Program: {
                                //    defaultValue: {
                                //        ProgramID: -1,
                                //        Program: "---Select---"
                                //    }
                                //}
                            }
                        }
                    }
                });

        function Loadgrid() {

                $("#kuiGrid").kendoGrid({
                        dataSource: dataSource,
                        columnMenu: {
                            filterable: false
                        },
                        height: 680,
                        editable: "incell",
                        pageable: true,
                        sortable: true,
                        navigatable: true,
                        resizable: true,
                        reorderable: true,
                        groupable: true,
                        filterable: true,
                        toolbar: ["excel", "pdf", "search"],
                        columns: [{
                            selectable: true,
                            width: 75,
                            attributes: {
                                "class": "checkbox-align",
                            },
                            headerAttributes: {
                                "class": "checkbox-align",
                            }
                        }, {
                            field: "CostCenterID",
                            title: "CostCenterID",
                            //format: "{0:c}",
                            width: 105
                        },{
                            field: "CostCenter_Name",
                            title: "CostCenter_Name",
                           // template: "<div class='product-photo' style='background-image: url(../content/web/foods/#:data.ProductID#.jpg);'></div><div class='product-name'>#: ProductName #</div>",
                            width: 300
                        }, {
                            field: "Grant_ID",
                            title: "GrantID",
                            //format: "{0:c}",
                            width: 105
                        }, {
                            field: "Fund_ID",
                            title: "Fund ID",
                            //template: "<span id='badge_#=ProductID#' class='badgeTemplate'></span>",
                            width: 130,
                        },  {
                            field: "Department_ID",
                            title: "DepartmentID",
                            width: 105
                        }, {
                            field: "Program_ID",
                            title: "ProgramID",
                            //format: "{0:c}",
                            width: 140
                            //aggregates: ["sum"],
                        },{
                            field: "Fund",
                            title: "Fund List",
                            editor: clientFundEditor,
                            //groupHeaderTemplate: "Category: #=data.value#, Total Sales: #=kendo.format('{0:c}', aggregates.TotalSales.sum)#",
                            width: 125
                        }, {
                            field: "Grant",
                                title: "Grant List",
                            //editor: clientCategoryEditor,
                            //template: "<input id='rating_#=ProductID#' data-bind='value: CustomerRating' class='rating'/>",
                            //editable: returnFalse,
                            width: 140
                        }, {
                            field: "Department",
                            title: "Department List",
                            //template: "<div class='k-text-center'><img src='../content/web/country-flags/#:data.Country.CountryNameShort#.png' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>",
                            //editor: clientCountryEditor,
                            width: 120
                        }, {
                            field: "Program",
                                title: "Program List",
                            //editor: clientCategoryEditor,
                            //format: "{0:c}",
                            //template: "<span id='chart_#= ProductID#' class='sparkline-chart'></span>",
                            width: 220
                        },
                        { command: "destroy", title: "&nbsp;", width: 120 }],
                    });
                //});

        }

       

        function clientFundEditor(container, options) {
            $('<input required name="Country">')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "FundName",
                    dataValueField: "FundID",
                    dataSource: {
                        transport: {
                            read: {
                                 url: 'http://localhost:55383/api/Lookups/GetFunds',
                                 data: {
                                    CID: 'CONAME',
                                    TableName: 'Lkup_Funds'
                                 },
                                 dataType: "jsonp"
                            }
                        }
                    },
                    autoWidth: true
                });
        }

Web API Code:

[System.Web.Http.Route("api/CostCenterSetup/GetCostCenterDataForEdit")]
        [System.Web.Http.HttpPost]
        public List<CostCenter> GetCostCenterDataForEdit(CostCenterEdit costCenterDetails)
        {}

 public class CostCenterEdit
    {
        
        public string Contract_StartDate { get; set; }

        public string Contract_EndDate { get; set; }
        public string Grant_ID { get; set; }
    }

Grid

answered on 03 May 2021