Telerik Forums
Kendo UI for jQuery Forum
4 answers
1.3K+ views
I have a diagram that's taking a long time to render, and there seems to be no way to set a loading indicator while it's drawing the diagram. I add the progress indicator just before declaration and remove it on the databound event, but the page just looks unresponsive. Is there a way to set the progress and remove when complete? 
Bryan
Top achievements
Rank 1
 answered on 09 Jul 2019
1 answer
105 views

Hello,

is there a way to have shape fills that are more complex than rgb-values, for example a diagonal hatch fill?

my knowledge on the map control and svgis limited. my current approach is to create a pattern via jquery when the map is created:

        jQuery("map svg defs").html(''
            + '<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">'
            + '  <line x1="0" y1="0" x2="0" y2="10" style="stroke:red; stroke-opacity:0.4; stroke-width:8" />'
            + '</pattern>';

then i use the def as fill for shapes when they are created:

    shape.fill("url(#diagonalHatch)");

this works fine, but i want to have opacity or color depend on other parameters, which would result in many defs.

Do you have any suggestions?

Tsvetomir
Telerik team
 answered on 09 Jul 2019
2 answers
180 views

I have a radial guage with 2 pointers.   The initial value can be set in the view model for both pointers but when I change the value in the model using Set, only one of the pointers gets changed.  How can i modify both pointer values?

I've created a dojo showing this.

 

https://dojo.telerik.com/AkEKaSes

Perry
Top achievements
Rank 1
 answered on 08 Jul 2019
2 answers
301 views

Hi Team, 

To expand on my title, the default value of the 'selectable' attribute is false. However, by accident I discovered, that even if it is false, if you run the select() function on the grid, its default behavior is "multiple,row".

Is this the expected result in this scenario? Personally I would expect there to be no change as i have not specified a selection strategy?

See example, and comment out the selectable attribute: https://dojo.telerik.com/iyaFajoB

Regards, 

Grant

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 08 Jul 2019
2 answers
1.0K+ views

Hi all,

 

I am looking for a way to put multiples commands buttons, for i.e., "Edit", "Delete", "Print" into one split-button dropdown in Kendo Grid.

 

I've found these buttons here (https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items.menubuttons) how I wanted but I am not getting the template right for it.

 

The idea is to have a default clickable button to "Edit" and an dropdown arrow to select "Delete" or "Print".

 

Thanks in advance.

Rafael
Top achievements
Rank 1
 answered on 08 Jul 2019
5 answers
3.4K+ views
Suppose I've got an array of items, and I'd like to edit an attribute of each of those items.  So I create a div, bind my array of items to it, and then specify a template to use to render each item using the data-bind attribute to bind the value of my item an input box.

e.g. (this is derived from another example I found in a separate thread), 

<div id="example" data-template="template" data-bind="source: arr"></div>

<script id="template" type="text/x-kendo-template">
    <divAge: ${age}</div>
    <input type="text" data-bind="value: age"/>
</script>​

and 

var arr new kendo.data.ObservableArray([
    name"John Doe"age23 }
    name"Jane Doe"age34 }
]);

var viewModel kendo.observable({
    arrarr 
});

kendo.bind($("#example")viewModel);

setTimeout(function({
    viewModel.arr[1].set('age',54);
}2000);
​
From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34.  Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty.  Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.

Here's a JSFiddle where you can try it:  http://jsfiddle.net/2R3tF/

Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work.  Can someone explain, and ideally provide a version that works?



Dimitar
Telerik team
 answered on 05 Jul 2019
7 answers
69 views

I've been chasing down an elusive problem for some time now and I've narrowed it to a logic change in the ListViewItemBinder.refresh() method between Kendo UI versions 2015.2.902 and 2015.3.930 (the issue happens on every version since 2015.3.930).  We have a mobile list view that is bound to a data source.  The template for the ListView creates a Touch widget and a tap handler for each list item.  The tap events and event handlers are working just fine, within this tap handler we change several properties on the data items within the DataSource.  The issue is that in v2015.2.902 these property changes cause the ListView to refresh itself and properly reflect those property changes, but in 2015.3.930 the ListView does *not* refresh itself even though the code has not changed on our end.

I finally managed to isolate the issue to a logic change within ListViewItemBinder.refresh() between the two versions, specifically within the first "if" block.  Here's the logic in 2015.2.902:

if (action === "itemchange" && !listView._hasBindingTarget()) {
  item = listView.findByDataItem(dataItems)[0];
  if (item) {
    listView.setDataItem(item, dataItems[0]);
  }
  return;
}

In 2015.2.902, action === "itemchange" resolves to true and !listView._hasBindingTarget()) resolves to false, so this block is skipped.  The code eventually drops to the following if/else if/else blocks and eventually calls the very last "else" block which actually triggers the kendo code that re-executes the template and replaces the HTML content (comment is mine):

if (action === "add" && !groupedMode) {
    var index = view.indexOf(dataItems[0]);
    if (index > -1) {
        addedItems = listView.insertAt(dataItems, index);
        addedDataItems = dataItems;
    }
} else if (action === "remove" && !groupedMode) {
    addedItems = [];
    listView.remove(dataItems);
} else if (groupedMode) {
    listView.replaceGrouped(view);
}
else if (prependOnRefresh && !listView._filter) {
    addedItems = listView.prepend(view);
    addedDataItems = view;
}
else {
    listView.replace(view); // <-- This is where the template is re-executed
}

However, in v2015.3.930, the first "if" block I listed earlier was re-written as follows:

if (action === "itemchange") { // action is indeed "itemchange"
    if(!listView._hasBindingTarget()) { // This evaluates to false
        item = listView.findByDataItem(dataItems)[0];
        if (item) {
            listView.setDataItem(item, dataItems[0]);
        }
    }
    return; // We hit this return statement, thus the "refresh" block is never called
}

As I mentioned in the comments, this logic change causes us to immediately hit the "return" statement and we never drop into the lower if/else if/else block where the template gets re-executed.  My questions then are as follows:

  1. What exactly was the purpose of this change?
  2. Is the scenario I've laid out actually exposing a bug, or is there something that I'm doing incorrectly that I can resolve within my own code?

I've tried to mock up this scenario in the Dojo but as of yet haven't quite been able to do it, hence the long post.  Thanks for taking a look!

Boyan Dimitrov
Telerik team
 answered on 05 Jul 2019
2 answers
5.9K+ views

I have a grid with 10000+ items but with the menu filter mode enabled this poses a bit of a lag issue when trying to populate all of the dropdown options for the filter menu.

 

So I use:

filterable: {mode: "menu, row"}

 

Is it possible to have the menu filter mode enabled but disable it on a column by column basis? (See attached image for example of what I mean)

 

As always, thank you for your help.

Jamie
Top achievements
Rank 1
 answered on 05 Jul 2019
4 answers
1.5K+ views

Hello,

After a countless of attempts and adjustements, it is still impossible to retrieve data from a datasource (to load a grid).

I use an API Net.Core that returns JSON (with Odata nugets).

Everything is OK : json is return, callback is triggered (I check with Fiddler 4 of Telerik).

HTML side : I use Odata type for the Transport (I noticed it is impossible to get a callback from my API if I use "webapi" or anything else for instance).

HTML file (body):

<div id="example">
            <div id="grid"></div>
            <script>
   
   $(document).ready(function () {
   
   var dSource = new kendo.data.DataSource({
      type: "odata",
      dataType: "json",
      serverPaging: true,
                        serverSorting: true,
                        pageSize: 12,
      
      transport: {
        read: "https://localhost:44363/api/students"
          
         }
     });
   // read data from the remote service
            dSource.read();
   var data = dSource.data();
   alert(data[0]);
   
   });
           
            </script>
        </div>

 

 

Alex Hajigeorgieva
Telerik team
 answered on 02 Jul 2019
4 answers
2.3K+ views

I'm doing something like this in my css to adjust how the tabs on the render:

.k-tabstrip-items {
align-self: left;
background-color: green;
margin-top: 8px;
margin-bottom: 8px;
height: 32px;
border: 1px solid black !important;
width: 70% !important;
margin-left: 5%;
}

But I need to dynamically adjust the margin so sometimes the tabstrip is centered and sometimes it has the margin above.

So I want to conditionally add something like this:

.k--items-addon {
margin-right: auto;
margin-left: auto;
}

I don't see anything in the API that allows me to pass a class for the  items so that I can dynamically change things in my template or class. Any ideas?

 

Dimiter Topalov
Telerik team
 answered on 02 Jul 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?