Questions on Kendo UI for jQuery Forum

1 answer

362 views

I'm trying to group my category axis by year and quarter but am struggling to find a suitable solution. I've found this was requested in the following link some time ago (2013). Has there been any sort of implementation to group on quarters?

https://www.telerik.com/forums/please-consider-supporting-quarters-in-date-series-just-like-weeks

Thanks
Ben

Charts

answered on 18 Jan 2022

1 answer

220 views

Custom Search bar not able to search but kendo search bar works ?

Hi i got some trouble for searching in my search bar where kendo grid search function work

This is kendo grid search bar where it work in searching

Input search is not working when searching

This is input search code that i link to kendogrid

$("#search-user-name").on("keyup change", function() {
  var grid = $("#user-list").data("kendoGrid");
  grid.dataSource.filter({
    logic: 'contains',
    filters: [{
      field: "username",
      operator: "contains",
      value: $(this).val()
    }]
  });
});
<input class="search-input form-control" placeholder="Name" type="text" name="User Name" id="search-user-name">

Grid

answered on 18 Jan 2022

1 answer

830 views

Navigate to specific cell of selected row

Hi, I'm trying to scroll my grid to a specific cell (td) in a specific row. Currently I'm able to navigate to X row in a paginable grid and I can get the information of that row but I'm wondering if there is something similar to what I'm using to scroll to row. This is the code I have for now:

 Select row with ID = <input id="numeric" /> (1-78)
    <button id="searchBtn" class="k-button">Go</button>
    <div id="grid"></div>
    <script>
      function selectGridRow(searchedId, grid, idField){
        var dataSource = grid.dataSource;
        var filters = dataSource.filter() || {};
        var sort = dataSource.sort() || {};
        var models = dataSource.data();
        // We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages
        var query = new kendo.data.Query(models);
        var rowNum = 0;
        var modelToSelect = null;

        models = query.filter(filters).sort(sort).data;

        // Now that we have an accurate representation of data, let's get the item position
        for (var i = 0; i < models.length; ++i) {
          var model = models[i];
          if (model[idField] == searchedId) {
            modelToSelect = model;
            rowNum = i;
            break;
          }
        }

        // If you have persistSelection = true and want to clear all existing selections first, uncomment the next line
        // grid._selectedIds = {};

        // Now go to the page holding the record and select the row
        var currentPageSize = grid.dataSource.pageSize();
        var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based
        grid.dataSource.page(pageWithRow);

        var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
        if (row.length > 0) {
          grid.select(row);

          // Scroll to the item to ensure it is visible
          grid.content.scrollTop(grid.select().position().top);
        }
      }

      $(document).ready(function () {

        $("#searchBtn").click(function(){
          var grid = $("#grid").data("kendoGrid");
          var searchedId = $("#numeric").data("kendoNumericTextBox").value();

          selectGridRow(searchedId, grid, "ProductID");
        });

        $("#numeric").kendoNumericTextBox({
          min: 1,
          max: 78,
          format: "n0"
        });

        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { type: "number" },
                  UnitPrice: { type: "number" },
                  UnitsInStock: { type: "number" }
                }
              }
            },
            pageSize: 10
          },
          height: 350,
          sortable: true,
          filterable: true,
          selectable: "row",
          pageable: {
            refresh: true,
            pageSizes: true
          },
          columns: [
            {
              field: "ProductID",
              title: "ID",
              width: 100
            },{
              field: "ProductName",
              title: "Product Name",
              width: 180
            }, {
              field: "UnitPrice",
              title: "Unit Price"
            }, {
              field: "UnitsInStock",
              title: "Units in Stock"
            }, {
              field: "Discontinued",
              width: 150
            }]
        });
      });
    </script>

And here is the DOJO: https://dojo.telerik.com/OBaYiguF

Right now the code is navigating to any row in the grid (that's okay) the next thing I want to do is once that I'm in the selected row then select a specific cell (for example "Units in stock")

Grid

answered on 17 Jan 2022

0 answers

126 views

Spreadsheet - Insert Rows on data loss validation

Hi,

I was trying to insert rows when my one of my columns in the spreadsheet has values in all rows. Are we able to detect the function or event before the data loss validation?

What i want to achieve is that before this validation is trigger, i will delete off some of the rows automatically in the spreadsheet itself.

I tried the insertRow event, but this validation check will take place before that was executed. Thanks in advance.

Regards,

Brian

Spreadsheet

asked on 17 Jan 2022

1 answer

343 views

Kendo Switch 'k-switch-container' applied multiple times - once every time I call the 'check' method.

I'm using UI for ASP.NET Core release 2021.3.1207

I have a modal dialog, containing a Switch control plus a few other controls, that is displayed when a button is pressed.

When I simply show the modal, all is fine.

When I try to set the value of the Switch 'check' then show the modal, the switch is being re-initialized and there are TWO 'k-switch-container' tagsets. Closing the dialog and showing again adds a THIRD 'k-switch-container'. etc. etc.

These extra 'k-switch-container' effects are:

- cannot tab directly to the next field, as focus disappears until TAB is pressed again. Happens for every additional <span> so eventually you need to press multiple tabs just to visit the next field.

- also when you are 'focussed' on one of these phantom locations, you can still press SPACE which toggles the Switch.

Have I done something wrong or is this a bug?

Thanks,

My Dialog

<div class="modal-body">
    <form id="frmEvent" novalidate="novalidate" class="form-validation">
        <div class="form-group">
            <label>@L("Title")</label>
            <input id="txtTitle" type="text" class="form-control border-2" placeholder="@L("title")" />
        </div>
        <div class="mb-2">
            <div class="form-group">
                @(Html.Kendo().Switch()
                        .Events(ev => ev.Change("onChangeAllDay")) 
                        .Name("swAllDay")
                )
                <label class="ml-2 mb-2">
                    @L("AllDayEvent")
                </label>
            </div>
        </div>

        ....

    </form>
</div>

My Button Event

** if I uncomment these two lines, I start getting additional nested k-switch-container span tags upon EVERY show of the modal

function newEvent() {
    var today = new Date();
    $("#txtTitle").val('');
    $("#txtDescription").val('');
    $("#StartDatePicker").val(today.toLocaleDateString(kendoCurrentCulture));
    $("#StartTimePicker").val('');
    //var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");
    //allDaySwitch.check(false);
    $("#eventModal").modal('show');
}

Here's the HTML after just loading the modal WITHOUT setting check.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function(){jQuery("#swAllDay").kendoSwitch({"change":onChangeAllDay});});</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>

Here's the HTML after just loading the modal WITH setting check, several times.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
            <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
                    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                        <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                            <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
                            <span class="k-switch-container">
                                <span class="k-switch-label-on">On</span>
                                <span class="k-switch-label-off">Off</span>
                                <span class="k-switch-handle">
                                </span>
                            </span>
                        </span>
                        <span class="k-switch-container">
                            <span class="k-switch-label-on">On</span>
                            <span class="k-switch-label-off">Off</span>
                            <span class="k-switch-handle"></span>
                        </span>
                    </span>
                    <span class="k-switch-container">
                        <span class="k-switch-label-on">On</span>
                        <span class="k-switch-label-off">Off</span>
                        <span class="k-switch-handle"></span>
                    </span>
                </span>
                <span class="k-switch-container">
                    <span class="k-switch-label-on">On</span>
                    <span class="k-switch-label-off">Off</span>
                    <span class="k-switch-handle"></span>
                </span>
            </span>
            <span class="k-switch-container">
                <span class="k-switch-label-on">On</span>
                <span class="k-switch-label-off">Off</span>
                <span class="k-switch-handle"></span>
            </span>
        </span>
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function () { jQuery("#swAllDay").kendoSwitch({ "change": onChangeAllDay }); });</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>

Switch

answered on 14 Jan 2022

1 answer

1.7K+ views

kendoDatePicker add years (Buddhist)

Hello, I can try add years after change calendar. but is not working

- using culture:"th-TH" (not working)

- set value: example value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY') (not working after change calendar)

I want results after change calendar:

12/01/2565 (Buddhist Year) just add 543

example link

$("#datepicker").kendoDatePicker({
        culture:"th-TH",
        format: 'dd/MM/yyyy',
        value: moment(new Date()).add(543, 'years').format('DD/MM/YYYY'),
        open: function(e) {
        	console.log('open');
          this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        },
        change: function(e) {
          e.preventDefault();
          console.log('change');
        	console.log(this.value());
          console.log(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        },
        close: function() {
          console.log('close');
        	// this.value(moment(this.value()).add(543, 'years').format('DD/MM/YYYY'));
        }
});

DatePicker

answered on 14 Jan 2022

1 answer

245 views

spreadsheet does not display data once spreadsheet widget is loaded

The spreadsheet widget displays (it's under tab -- CONTRACTS) but the data does not display. However, if I resize the browser page - the data shows up.

I have tried to find the issue - but nothing. I can remove all the tabs and sections -- just leaving the grid; the result shows the grid and data just fine. It seems to make me think it has an issue with the page size. I hope that this is not the case - because I will want to insert 3-5 more grids on this page. Separated by CSS Tabs.

AJ

Grid

Spreadsheet

answered on 14 Jan 2022

1 answer

1.0K+ views

Kendo grid how to get the select user ID ?

Hello i am using ajax and kendogrid to put into the table and format it however i realize i have no idea how to when user selected a row it display the id maybe in console.log etc ? how can i do it

This is my ajax call and append into the table and kendogrid format it

This is being call from my ajax query to be append into this table

This is how my code look like

<script>
                        /* Call the ajax to load to load to #customer-list tbody */
                        $.ajax({
                            url: "https://ecoexchange.dscloud.me:8090/api/get",
                            method: "GET",
                            // In this case, we are going to use headers as
                            headers: {
                                // The query you're planning to call
                                // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
                                query: "UserGet(0)",
                                // Gets the apikey from the sessionStorage
                                apikey: sessionStorage.getItem("apikey")
                            },
                            success: function (data, xhr, textStatus) {
                                //console.log(data)
                                const buildTable = data => {
                                        const table = document.querySelector("#user-list tbody");
                                        for (let i = 0; i < data.length; i++) {
                                            let row =
                                            `
                                                <tr>
                                                
                                                <td class="cell-user-name"style="padding-left: 20px;"><img src = "${data[i].Picture}" class="picture" width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/placeholder-avatar.jpg';" ></img></td>
                                                <td class="cell-user-name" style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;">${data[i].Name}</td>
                                                </tr>
                                            `;
                                            table.insertAdjacentHTML('beforeEnd', row);
                                        }
                                    };
                                    // Fetch method
                                    const getData = async (url) => {
                                    const response = await fetch(url, {
                                        method: 'GET',
                                        headers: {
                                            query: "UserGet(1)",
                                            // Gets the apikey from the sessionStorage
                                            apikey: sessionStorage.getItem("apikey")
                                        }
                                    });
                                    const json = await response.json();
                                    $("#loading-container").hide();
                                    return buildTable(json);
                                    };
                                /*Error GET http://127.0.0.1:5501/testEnv/view/public/manageCustomers/null 404 (Not Found) */
                                /* But code are able to fetch the data */
                                getData ("https://ecoexchange.dscloud.me:8090/api/get")
                                },
                                error: function (xhr, textStatus, err) {
                                console.log(err);
                                }
                                });
                                $(window).on("resize", function(e) {
                                console.log("width:", $("#user-list").width(), "height:",$("#user-list").height())
                                });
                                        $("#user-list").kendoGrid({
                                            height: $(window).height()-$("#user-list").position()["top"]-130,
                                            selectable: "single",
                                            // width: $(window).width()-$("#customer-list").position()["width"]-10,
                                            //pageSize: 10,
                                            scrollable: {
                                                endless: true,
                                            },
                                            columns: [
                                                {
                                                    field: "",
                                                    title: "Profile",
                                                    headerAttributes: { "class": "k-text-center" },
                                                    width: 150
                                                },
                                                {
                                                    field: "",
                                                    title: "User Name",
                                                },
                                            ],
                                });
                                $("#user-list tbody").on("click", "tr", function(e) {
                                    const btns = $('.select-row');
                                    var rowElement = this;
                                    var row = $(rowElement);
                                    var grid = $("#user-list").getKendoGrid();
                                    if (row.hasClass("k-state-selected")) {
                                    var selected = grid.select();
                                    selected = $.grep(selected,function(x){
                                    var itemToRemove = grid.dataItem(row);
                                    var currentItem = grid.dataItem(x);
                                    return itemToRemove != currentItem
                                    })
                                    btns.prop('disabled', true).removeClass('disabled dark');
                                    grid.clearSelection();
                                    grid.select(selected);
                                    e.stopPropagation();
                                }else{
                                    grid.select(row)
                                    e.stopPropagation();
                                    btns.prop('disabled', false).removeClass('disabled dark');
                                }
                                });

I would need some help as to how to display the userID as this is my response for my response database ?

Grid

answered on 14 Jan 2022

1 answer

146 views

Chart labels without font get resolved twice

I ran into a error when trying to use a template to provide an axis label. After digging into it further, it appears that the chart resolves its axis labels twice when there is no font associated with the label, and the first time through the series data isn't fully populated, and the value that is passed in is not the final value.

Here is a dojo for reference. If you run this, the console will have messages where the series data element is undefined and for one set of values, followed by messages where it is defined with the correct values. If you then uncomment the font line in the valueAxis label definition and run it again, the console will only have messages where the series data element is defined.

I don't know if it's a bug, but it certainly caught me by surprise.

Charts

answered on 14 Jan 2022

1 answer

301 views

Remove deleting of tasks in Gantt

Hi, i want to remove the delete functionality for tasks within the gantt based on several aspects, one of which would be a field in the record set, another would be based on a user permission level.

I have the delete being cancelled but i'd like to stop the delete key from working and removal of the delete icon.

Any help would be appreciated.

Edit: we are using gantt within an MVC application

Gantt

answered on 13 Jan 2022