Questions on Kendo UI for jQuery Forum

1 answer

457 views

Hi Telerik Team,

I'm testing with ~2k images with FileManager. Setted pageable and pageSize to File Manager's data source, grid and list view config. In grid view mode, pagination working well, but in listview mode, there're no pagination bar shown. Tried with outside pager but it not help.

Please advise.

FileManager

answered on 19 Jan 2022

0 answers

198 views

Problem with slider and rangeslider

Hello,

I'm reading some datasets from a database and use the values to fill a grid - and on the other hand fill a small form.

The form contains among others a rangeslider. After a quick Google search I was pointed to the Telerik Forums.

So now I do it with the following code-section

   var rangeslider = $("#rangeslider").data("kendoRangeSlider");
   var rangeValues = [currentDataItem.MinPosition, currentDataItem.MaxPosition];
   rangeslider.setOptions({
      min: 0,
      max: currentDataItem.MaxPositionMeter,
      smallStep: 1,
      largeStep: 10,
      tickPlacement: "both"
   });
   rangeslider.value(rangeValues);

My problem is :
exemplary section of the data-grid
0, 704, 800
48, 752, 800
96, 800, 800

the first 2 numbers "serve" value-array and 800 as the max-parameter.
First 2 lines get displayed correctly, but the 3rd row behaves wierdly. The selection start-marker is displayed correctly, but whatever data-row was displayed at first, determines where the selection-end marker of the rangeslider is drawn, so it doesn't "move" - and the selection-range is displayed with correct length - but as the selection-end marker is not at the correct position the selection suddenly goes beyond the selection-start marker.

Is there anything I can do to prevent this weird behavior? Is it a problem when the value for selection-end is equal to max?

For reference I include a screenshot of the rangeslider drawn when going from data-row 2 to row 3

The min-value is always 0 for all 3 data-rows

Slider

updated question on 18 Jan 2022

1 answer

295 views

Group by quarter on Kendo UI chart

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

147 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

770 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

102 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

278 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.6K+ 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'));
        }
});

Date/Time Pickers

answered on 14 Jan 2022

1 answer

188 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

957 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