Questions on Kendo UI for jQuery Forum

1 answer

25 views

why the HYBRID UI demo is yet 2022?

Does it stop upgrading?

ActionSheet

updated answer on 27 May 2024

1 answer

18 views

legend.labels.template - HTML format

Is it possible to use HTML fragments in the legends.template (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/legend.labels#legendlabelstemplate)?

I tried several html tags (<span></span>, <br/>), but the template is rendered as clear text, not as html text. even the \n does not work :

config:

legend: {
    position: "bottom",
    labels: {
      template:
      function(e){
        return '<span style="color: red;">' + e.text +'</span>';
      }  
    }
  }

result:

Charts

answered on 24 May 2024

0 answers

16 views

Filter issue on version upgrade.

Hello,
Thank you for helping us on successfully version upgrade which I mentioned here. The Current version is 2023.3.1114. Now I'm facing another issue. On selecting the filter option (three dots on column), I'm getting error in my console panel. This configuration works in some pages and breaks in some pages. I've attached console error
Below is my sample code.

var gridName = <HTML_SELECTOR+NAME>,
    gridURL = <SERVER_URL>,

    columnNames = [{
        template: "# if((uploaded_status =='Delete In Process')||(uploaded_status =='GSTN Delete Error')||(uploaded_status =='Saved')|(uploaded_status =='Submitted')|(uploaded_status =='Filed') ){} else { # <input type='checkbox' class='checkBoxClassInv' name='selectgst[]' value='#: data.gstin_of_customer #:#: data.invoice_no #'>  #}#",
        field: "gstin",
        title: "<input type='checkbox' check-id='checkBoxClassInv' class='checkAllGrid'>",
        filterable: false,
        sortable: false,
        groupable: false,
        width: 30
    }, {
        template: "<div class='status #: uploaded_status #'>#: uploaded_status #</div>",
        field: "uploaded_status",
        title: "Status",
        width: 100
    }, {
        field: "outwardvsgstr1_status",
        title: "OutwardVsGstr1 Status",
        width: 90
    }, {
        field: "invoice_category",
        title: "Tran Type",
        width: 100
    }, {
        field: "doc_type",
        title: "Doc Type",
        width: 100
    }, {
        template: "<span class='grid-align-left'>#: customer_name #</span>",
        field: "customer_name",
        title: "Customer Name",
        width: 200
    }, {
        template: "<span class='invoice_no' >#: invoice_no #</span>",
        field: "invoice_no",
        title: "Doc No ",
        width: 100
    }, {
        field: "invoice_date",
        title: "Doc Date",
        width: 100
    }, {
        field: "place_of_supply",
        title: "POS",
        width: 90
    }, {
        command: [{
            text: " ",
            name: "Details",
            click: outwardInvoiceDetails,
            iconClass: "k-icon k-icon-20 k-i-info m-r-0-imp op-1"
        }, {
            text: " ",
            name: "Edit",
            click: outwardInvoiceEditDetails,
            iconClass: "k-icon k-icon-20 k-i-edit m-r-0-imp op-1",
            visible: function (dataItem) {
                if ((dataItem.uploaded_status == 'Deleted') || (dataItem.uploaded_status == 'Pending Response') || (dataItem.uploaded_status == 'Delete In Process') || (dataItem.uploaded_status == 'GSTN Delete Error') || (dataItem.uploaded_status == 'Saved') || (dataItem.uploaded_status == 'Submitted') || (dataItem.uploaded_status == 'Filed')) { } else {
                    if (outwardManualEntryConf == 1 && editable == 1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }],
        title: "<span class='select'>Details</span>",
        width: 130
    }],

    gridData = {
        p_gstin: gstin,
        return_period: fpdate
    };
//below is kendo grid defination
$("#" + gridId).empty().kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: <SERVER_URL>,
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: gridData,
                dataType: "json"
            }
        },
        schema: {
            aggregates: serverAggregateConf,
            model: modelConf,
            parse: function (response) {
                //schema response structure
            },
            total: function (count) {
                // custom total page counter
            }
        },
        error: function (response) {
            dataSourceError(response);
        },
        serverPaging: serverpgination,
        pageSize: defaultPageSize,
        aggregate: aggregateConf,
        serverAggregates: typeof (serverAggregateConf) == 'undefined' ? false : true
    },
    dataBound: function (e) {
        //UI manipulations logic
    },
    scrollable: true,
    change: function (e) {
        //setting heights as per UI
    },
    dataBinding: function () {
        srno = (this.dataSource.page() - 1) * this.dataSource.pageSize();
    },
    noRecords: {
        //custom message if no message
    },
    height: 800,
    groupable: groupableConf,
    sortable: sortableConf,
    columnMenu: columnMenuConf,
    resizable: resizableConf,
    pageable: pagingConf,
    filterable: filterConf,
    columns: gridColumns,
    excelExport: excelConf,
    excel: {
        allPages: true
    }
}).data("kendoGrid");

Grid

asked on 23 May 2024

1 answer

29 views

Changes in filter/sort/group format after KendoUI update to 2024. ASP MVC

We have been using an older version of your libraries from 2021 and decided to update it to the current one.

We have a grid and we have been using server-side filtering/sorting/etc... In the old version there used to be syntax like this:

filter: RequestStatus~eq~1~and~PersonFullName~contains~'Steve'

We took this string, parsed, and processed the data. However, with the update, this is no longer the case. Now it looks like this:

And we are clueless on how to properly parse and or process this format on our back end.

This is the code that we use on the front end to query the back end.

    gridDataSource = new kendo.data.DataSource({
        serverFiltering: true,
        serverGrouping: true,
        serverSorting: true,
        serverPaging: true,
        serverAggregates:true,
        pageSize: 25,
            transport: {
                read: {
                    url: __config.baseUrlAbsolute + "Requests/Home/GetCurrentViewRequests",
                    dataType: "json",
                    data: function () {
                        return {
                            type: requestTypesList[requestType],
                            id: personId,
                        };
                    }
                }
            },
    });
    })

Our backend is .NET MVC and this is the method that we have used to process the request. But this no longer works.

 public string GetCurrentViewRequests([DataSourceRequest] DataSourceRequest request, int type, int id)
 {
       var filters = Request.Params.Get("filter");
       var groups = Request.Params.Get("group");
       var sorts = Request.Params.Get("sort");

       //Process
}

Would you be so kind as to point us in the right direction on how to properly parse and process the request?

Filter

Grid

Sortable

answered on 22 May 2024

2 answers

60 views

Firefox 126.0 and Hybrid UI

The latest version of Firefox released yesterday appears to have broken navigating between views in the Hybrid UI. Upon changing views the page goes blank. I am seeing this also happen in the demos: https://demos.telerik.com/kendo-ui/m/index

General Discussions

View

answered on 21 May 2024

1 answer

16 views

Bind and Unbind from Multiselect Event

I would like to conditionally bind and unbind events from a kendo UI multiselect's select event. The component was initialized with a select event that must always be fired regardless of the conditions being met. In standard JQuery, I can give an event a namespace such as select.myconditionalevent. Later I can unbind that using that same namespace. Unfortunately, I tried this with the Kendo Multiselect and it didn't work. How would you suggest I add an event that I will later take away, without affecting the initialized event? I can't use the enable disable because I need them to be able to open the dropdown and see what they selected (it is single tag mode and there isn't room on the UI to display a bunch of tags)

Example:
If (!canSelectStuff) { bind event }

else { unbind myconditionalevent }

MultiSelect

answered on 21 May 2024

1 answer

18 views

Line Height with Inline Editor Not Working

I seem to be having a problem with the line height tool when using the inline editor. In the Dojo example here, I put the line height tool into both editors. When trying to use the tool, the selected text becomes unselected and it seems that it only recognizes the first line in the editor to change the height. Please let me know if line height can work with the inline editor. Thanks.

Editor

answered on 20 May 2024

0 answers

14 views

Kendo Grid dataBond property is not setting the value

The below code where I getting the list of data from List c# method and all the data is properly binding with all the columns property. But the problem is when I am passing a hrtotal and it is not setting dataBond property.

<div id="totalHours">
</div>

<script>
var griddataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("List", "GLID")',
                    dataType: "json",
                   success: function (result) {
                    var totalHours = result.totalhr;
                   }
                },
            schema: {
                data: "data",
                total: "total",
              }
});

griddataSource.read();
        $("#grid").kendoGrid({
            dataSource: griddataSource,
            toolbar: ["excel"], 
            dataBound: function(e) {
                    resizeGrid(e);
                    var totalHours =  e.totalhr; // ****** I want to update the value of totalHour
                    $("#totalHours").text("Total new Hours: " + totalHours);
            },
            columns: [
            ]
        });
</script>

The below code is JsonResult List() method where I am passing totalhr through json.

var totalHours = list.Sum(item => item.Hours);
return Json(new { total = total, totalhr = totalHours, data = data }, JsonRequestBehavior.AllowGet);

Grid

asked on 19 May 2024

1 answer

16 views

Issue with Label Rendering in KendoUI TreeView Component

We are currently experiencing a rendering issue with the KendoUI TreeView component, version 2019.2.703, on Project Server Online. This problem arose following a recent update to Project Online, which introduced a change in how the WebComponentsIcons font, used for icon rendering, is managed in the cloud environment.

Issue Details:

Previously, the grid component functioned correctly. However, after the update, labels in combo boxes that contain hierarchical items (years and months in our case) are not displaying correctly. Specifically, the label for the year is now rendering "behind" he checkbox and is only partially visible within the interface.

See attachment: TreeView_err1.png

Attempted Fixes and Complications:

We attempted a solution that successfully made the year label visible again modifying the style of the class .k-treeview .k-in (setting the Font Family and size).

.k-treeview .k-in {
border-radius: 0;
margin: 0;
padding: 4px 8px;
border: 0 solid transparent;
text-decoration: none;
display: inline-flex;
align-items: center;
align-content: center;
vertical-align: middle;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
}

However, this adjustment led to an unintended change in the Document Object Model, and an empty <span> cover the checkbox and partially blocked the selection of the checkbox.

See attachment: TreeView_err2.png

To avoid the conflict between the checkbox and the empty span we modified the style of the .k-icon class changing the display from inline-block to display: contents;

Now, the trigger, originally on the triangle icon for showing/hiding child items (months), is incorrectly positioned above the checkbox for selecting the year. This results in all child items being expanded and displayed when the parent is selected, which is not the desired behaviour.

See attachment: TreeView_err3.png

Attachments:

Please find attached screenshots for a better understanding of the issues described.

Request:

Could you please investigate this behaviour? Any suggestions on how to correct the year label rendering without affecting the functionality of the child item display would be greatly appreciated.

Checkbox

TreeView