Questions on Kendo UI for jQuery Forum

1 answer

277 views

Hello,

I have a problem with changing the value of the breakpoint, for the responsive panel.

Example on the following code:

<body>

<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Home1</a>
<a href="#">Products1</a>
<a href="#">Home2</a>
<a href="#">Products2</a>
</nav>

<article>
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
Content
</article>

<script>

$("#navigation").kendoResponsivePanel({
breakpoint: 1020
});

console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);

$("#navigation").data("kendoResponsivePanel").options.breakpoint = 2000;

console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);

</script>
</body>

As the logs will tell you, the new value where the ResponsivePanel shoud start hiding the content is 2000px, that is not the case, the Panel activates at the initial value of 1020.

Is there a way to make this work, or does the ResponsivePanel not have this funktionality ?

Thanks !

ResponsivePanel

answered on 01 Apr 2019

1 answer

126 views

Model not binding completely to View

Hi,

As my title suggests, I have a Model object that is not binding entirely to the view I've assigned it to and I know what else to do.
here: https://dojo.telerik.com/UJaBOKAt

I've created a Window and bound the contents to a view model. when init. the principal and customer account should be disabled, and the values of these combo boxes are binding to the attributes. There are console logs printing the view model on to be sure.

Do you have any advice on how to resolve this?

Thanks and kind regards,
Grant

MVVM

answered on 01 Apr 2019

6 answers

525 views

Date Picker popup width problem after latest update

I just updated to 2019.1.220 and now the popup for the date picker is 100% the width of the browser.

How can I get it back to how it was before?

DatePicker

answered on 29 Mar 2019

3 answers

252 views

Indexed Validation For Cell Range

In all of the demos in the docs, cells that need to use validation functions like IsNumber, Len, etc. are done on a cell-by-cell manor like this:

{

dataType: "custom",

from: "AND(ISNUMBER(G2),LEN(G2)<6)",

type: "warning",

allowNulls: true,

titleTemplate: "Invalid Item",

messageTemplate: "Value must be a number and 5 characters or less"

}

Is there any way to do this type of thing for a range of cells? I'm looking for something similar to this by replacing "CurrentCell" with something:

var range = spreadsheet.activeSheet().range("G2:G100");

range.validation({

dataType: "custom",

from: "AND(ISNUMBER(CurrentCell),LEN(CurrentCell)<6)",

type: "warning",

allowNulls: true,

titleTemplate: "Invalid Item",

messageTemplate: "Value must be a number and 5 characters or less"

});

Spreadsheet

answered on 29 Mar 2019

2 answers

709 views

changing color when multiselecting with mouse drag

I have a grid where I multiselect using the mouse drag. The color that shows when doing so is orange. How can I change the color? I'm referring to the rectangle that shows up when you select multi rows with the mouse.

Grid

answered on 28 Mar 2019

6 answers

630 views

when insert ordered list and then use shift + enter to create new line, editor sends the data with no space

Hi,

We are using the Editor with some tools including insert ordered list.

When we use ordered list, we get something like:

1.line1
2.line2

Then we manually create an space between line1 and line2 and it becomes something like:

1.line1

2.line2

When I read the data from editor after submitting the from. I get the details without space. Next time when I add space, editor passes space as well.

Is this a bug or known behavior by default?

Editor

answered on 28 Mar 2019

1 answer

8.8K+ views

To don't allow DatePicker keyboard input

Hi,
I'm working with datepickers and I tried the following a while ago:

$("#begin_date").attr('disabled','disabled');

I tried this to disable the text input of a date. But I realized later that it also makes the attribute unavailable for the web server to use in my application. The server wasn't receiving the dates I was picking so I stopped using it.

Is there anyway to disable that text input besides this method?

DatePicker

answered on 28 Mar 2019

7 answers

1.2K+ views

need to make DatePicker control read only

I need to make the date picker control read only. Can someone help please:
Here is my code.

@(Html.Kendo().DatePicker()
.Name("DateOfPub")
.Value("@Model.DateOfPub")
)

Thanks
Vandana

DatePicker

answered on 28 Mar 2019

6 answers

146 views

[Solved] Chart Pan and zoom in Sortable

Hello,

Some problem with move by mouse in "Bar Charts / Pan and zoom" when use kendoSortable

https://dojo.telerik.com/ApavImA

How do i must use it together?

Charts

answered on 28 Mar 2019

1 answer

232 views

Dropped item shown twice after change event

I use a Kendo Sortable in 3 different places in my app. It has always worked flawlessly for me however recently I upgraded to Kendo 2019.1.115 and ONE of the kendo sortables has stopped working correctly. I know the issue isnt kendoSortable since its working fine elsewhere.

Here is the behavior I have seen. Before the drag begins this is what I have

https://screencast.com/t/Ov6mXlaqKw

Now if I drag Chilly to below Fresh Lemon I end up with the following

https://screencast.com/t/8UDK6LKmANK

The item that was dragged appears twice at the end of the list. I wrote out the source in the change event and it is correct. It shows

https://screencast.com/t/JTcjSE7aj80h

As you can see the data is correct. The problem is that the kendoSortable isnt showing what is in the data model.

Here is my code and template:

<script type="text/x-kendo-tmpl" id="tmplMenuOptionsGroupRow">

<div class="d-flex optionRow">

<div class="pl-2 col-1">

<i class="fal fa-arrows fa-2x dragHandler"></i>

</div>

<div class="col-5 modifierDesc">

<input name="optionDesc" class="form-control k-textbox k-input-lg"

data-bind="value: description, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />

</div>

<div class="col-4 optionPrice dragHide">

<input class="k-input-lg" data-role="numerictextbox"

data-format="c"

data-min="0"

data-format="c2"

data-spinners=false

data-bind="value:price, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />

</div>

<div class="dragHide optionDelete col-1" >

<button type="button" class="btn btn-danger btn-sm" data-bind="click:editorModel.menuOptionGroup.deleteOption, disabled:legacy"><i class="fal fal fa-trash-alt"></i>

</button>

</div>

</script>

$("#optionGroupItems").kendoSortable({

cursor: "move",

holdToDrag: false,

autoScroll: true,

ignore: 'input, button',

handler: '.dragHandler',

// move: function (e) {

// console.log('moving');

// },

placeholder: function (element) {

console.log("placeholder");

return element.clone().css({

"opacity": 0.3,

"border": "1px dashed #000000"

});

},

hint: function (element) {

return null;

},

change: function (e) {

console.log('drop/change');

var oldIndex = e.oldIndex;

var targetIndex = e.newIndex;

console.log('BEFORE Update');

_.each(self.editorModel.menuOptionGroup.options, function(anOption){

console.log(anOption.description);

});

self.editorModel.menuOptionGroup.options.splice(targetIndex, 0, self.editorModel.menuOptionGroup.options.splice(oldIndex, 1)[0]);

//after the splice

console.log("");

console.log('AFTER Update');

_.each(self.editorModel.menuOptionGroup.options, function(anOption){

console.log(anOption.description);

});

// console.log(self.editorModel.menuOptionGroup.options);

}

});

Sortable

answered on 28 Mar 2019