Hi All,

Currently we are using kendo grid in one of the application developed in  Outsystem tool, we have a grid with the column- Select(used checkbox),ID, column3,..............

In order to achieve some functionality, when user clicks on get selected Record (button) we need the checkbox value(true or false) and the first column value (ID).

Can anyone help me on this please?

Thanks

Raj

Hi, I'm using the kendo form to build an 'order form'.

The form has pre-existing Vendors to select which cascades to a list of pre-existing Sites (Customers).
However, I also need to be able to add sites - which I have done via a POST method.

The issue that I am facing is that after I have done this, I can't figure out how to refresh the 'SiteCode' MultiColumnComboBox - nothing I have tried is able to get the control to populate with the new data, even though i am able to see the new data in the local array that it's being stored in.

I have tried multiple methods of implementing the transportation layer

• Using 'read()' on varying objects (can't figure out which one is correct for a form object) to no effect
• Setting the SiteCode dataSource to a secondary "filtered" list which is filled by the VendorCode select event
• Using 'serverfiltering' and a standard kendo remote dataSource but unfortunately I don't believe the API I am working with is compatible with the server filtering options (I can only filter by adding a parameter to the url e.g. '&fltFilterName=FilterValue')
  
  Below are the two main objects I am concerned with:

{
    field: "VendorName", editor: "MultiColumnComboBox", label: "Partner/Vendor Name:", validation: { required: true },
    delay: 0,
    editorOptions: {
        placeholder: "Select vendor",
        dataTextField: "VendorName",
        dataValueField: "VendorCode",
        height: 300,
        columns: [
            { field: "VendorName", title: "Vendor Name:", width: 300 },
            { field: "VendorCode", title: "Vendor Code:", width: 150 },
            { field: "TerritoryCode", title: "Territory Code:", width: 150 },
            { field: "TerritoryName", title: "Territory Name:", width: 300 },
        ],
        filter: "contains",
        dataSource: slData.partners,
    },
},
{
    field: "SiteName",
    label: "Site Name:",
    delay: 0,
    validation: { required: true },
    editor: "MultiColumnComboBox",
    editorOptions: {
        autoBind: false,
        placeholder: "New site name",
        dataTextField: "SiteName",
        dataValueField: "SiteName",
        cascadeFrom: "VendorName",
        height: 400,
        columns: [
            { field: "VendorCode", title: "Vendor Code:", width: 200},
            { field: "SiteCode", title: "Site Code:", width: 200 },
            { field: "SiteName", title: "Site Name:", width: 300 },
            { field: "warning", width: 200,
                template: '<span style="padding: 8px 9px !important;" class="badge-general badge-#:data.Status#">#:data.DaysRemaining# Days Remaining</span>',
                headerTemplate: ' '
            }
        ],
        filter: "contains",
        dataSource: slData.sites,
        select: selectSiteName,
        noDataTemplate: $("#noDataTemplate").html(),
        },
        dataBound: function() {
            initSiteStatusBadges()
        }
    }
},

dataSource: {
    transport: {
        read: createDataURL("Order", "CustomerVendorSite", `&fltVendorCode=${getFormVendorCode()}` ) , 
        dataType: "json",
        cache: false,
    },
    filter: { field: "SiteCode", operator: "eq", value: e.data.SiteCode }
},

Hi, 

within the columns definition of my grid I want to be able to call a function as the template.

currently I have:

 {field: 'recommended', title: 'Recommended', template: '# if(recommended)' + '{# <span class=\"glyphicon glyphicon-ok\"></span> #}' + 'else{# <span class=\"glyphicon glyphicon-ok\"></span> #}#'},

and I would like to have

 {field: 'recommended', title: 'Recommended', template: generateFlagTemplate(recommendedFieldValue)},

defining the function as

function generateFlagTemplate(field){
    return kendo.template("# if (field)" + "{# <span class=\"glyphicon glyphicon-ok text-success\"></span> #}" + "else {# <span class=\"glyphicon glyphicon-remove text-grey\"></span> #}#");
}

how can I pass the 'recommended' field value to the function?

I would like to have the function because the same template will be used in different places and saves me from having to duplicate my code.

thanks

Hello,

I tried to achieve Server-side grouping function with Kendo UI grid. The grid is grouping by two groups. Below is the grid configuration:

Below is the formated json data returned from server fetching the first grouping data, the grid display the data without any problem.

Then I expanded one of the first group to fetch the second group data, the server return the same formated json data:

But this time, the kendo grid throw this exception:

My chart as below:

$("#myChart).kendoChart({
                chartArea: {
                    height: 50
                },
                seriesDefaults: {
                    spacing: 0,
                    gap: 0,
                    margin: 0,
                    padding: 0,
                    type: "bar",
                    stack: {
                        type: "100%"
                    }
                },
                series: [
                    {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [80],
                        color: "#11fa00"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [0],
                        color: "#0026ff"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [0],
                        color: "yellow"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [20],
                        color: "red"
                    }
                ],
                valueAxis: {
                    min: 0,
                    max: 1,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    }
                },
                categoryAxis: {
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    }
                },
                valueAxes: {
                    visible: false,
                    majorGridLines: {
                        visible: false,
                    }
                }
            });

Please help me understand what is the difference and why this issue is happening. Thanks

Hello All,

I have a gird with several columns, whose data source is a json(RepProjectData) with more than 500 records. with 7 checkboxes in each row.

I need to implement select all feature. In this when a user checks the checkbox on header then all the below checkboxes(in same column) must get selected.

 headerTemplate: "<span class='title-vertical'><input type='checkbox' class='chkheaderBC'> Business Case</span>",

 template: function (e) {
                if (e.RepBusinessCase == true) {
                    return dirtyField(e, 'RepBusinessCase') + '<input type="checkbox" checked class="chkbxBusinessCase1" />';
                }
                else {
                    return dirtyField(e, 'RepBusinessCase') + '<input type="checkbox" class="chkbxBusinessCase1" />';
                }
            }

For this, I have written below code on data bound

   $('.chkheaderBC').change(function (e) {

                   checkAll(e, "RepBusinessCase")

  });

chekAll function-

 function checkAll(e, FieldName) {
        displayLoading();
        var checked = e.target.checked;
        var currentGrid = $("#gridGenerateDocument").data("kendoGrid");
        var data = currentGrid.dataSource.view();
        var rowCnt = RepProjectData.length;   
            for (var i = 0; i < data.length; i++) {
                data[i].set(FieldName, checked);
            }
    }

This code is working and solve the purpose when there are <100 records. But when there are >200 records then it is taking longer than expected. Is there any other way to perform this action with minimum time?

Thanks in Advance :)

Hi Team,

is it possible to show the sort icon to tell user that "column can be sorted by clicking here" when none of the column is sorted.

thanks

How can I render a currency when all I have is a number in cents? I've tried with factor set to 0.01 but this only works for the input once it's selected. When not selected it shows 8999,00 while when I select it, goes to 89,99.

I have a reproducer here: https://dojo.telerik.com/uDUdErOG

      $(".currency").kendoNumericTextBox({
        value: 8999,
        format: "c2",
        factor: 0.01,
        min: 0,
        max: 8999,
        step: 1,
        restrictDecimals: true,
        decimals: 2,
        spinners: false,
      });
    });

Could you please help me to change the default design of kendo file upload.

I want to display my custom design on the web page for users. Also , I want to give both functionalities like below

---------------------------------------------------------

Drag and Drop File or Browse File

----------------------------------------------------------