Questions on Kendo UI for jQuery Forum

1 answer

258 views

Kendo grid - update row if it is already exists in the grid

Dears,

I need help in inline edit grid , i want way in that if user create row first time it add row (e.g item name, quantity), if user add same item again in the grid and that item exists in the grid update the quantity of first record and remove the new record.

how can i do that?

Thanks

Grid

answered on 21 Jan 2022

1 answer

81 views

Output a value from the model as text in popup editor?

Hi,

I'm sure this is a stupid question however I've not seen an example of how to do this. I need to output just a simple status as a string in the popup editor external template when editing an appointment on the scheduler. It does not need edited - it is there just to show the user if they are approved to request that appointment or not.

I have the status value in my ViewModel and I need to display it on the appointment double click. I've tried @Model.status but need something equivalent to @Html.Kendo().TextboxFor(m=>m.status). By doing it this way the string shows but it is in a textbox of course.....I need to make it appear as just a string of text similar to a label.

Thanks for any help!

Scheduler

answered on 19 Jan 2022

1 answer

474 views

Pagination not work with ListView mode

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

203 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

304 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

164 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

792 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

107 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

285 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