Hi there,

I have an array with the list of column names, that needs to be displayed in the grid. 

So, while initializing the grid, I need to loop through each column in the datasource - and if that column is present in the Array, then I need to display it.

For example,

var ColumnNames = ["col1","col3"];

var dataSource = [{"col1": "a", "col2": "1", "col3": "11","col4": "1111"}, {"col1": "b", "col2": "2", "col3": "22","col4": "2222"}, {"col1": "c", "col2": "3", "col3": "33","col4": "3333"}, .....]

The grid should display only with the columns present in the array. Here, as shown below:

col1    col3

---------------

a        11

b        22

c        33

.......

The ColumnNames Array and dataSource actually comes from DB, based on the user selection. So, I can not hardcode column names. I tried various options (using column templates, foreach loops for building the model, etc) , but facing one or the other issue. Can someone help me out on this please?

Thanks in advance!

Regards

Neelima

I am doing server validation on my create and update requests. However this causes an issue when updating a recurring event as it triggers both a create and update in some situations.

How can I "merge" 2 requests into 1 e.g. when making a recurrence exception by editing only single event?

Note: the documentation on the Kendo menu provides how to close an item, but not the actual menu itself. 

For example, the menu documentation on the Kendo menu states:
//intialize the menu widget
    $("#menu").kendoMenu();
    // get a reference to the menu widget
    var menu = $("#menu").data("kendoMenu");

    // close the sub menu of "Item1"
    menu.close("#Item1");

There is a bug setting the percentage width for a table within the Kendo editor. 

1. Go to https://demos.telerik.com/kendo-ui/editor/index
2. Under Editor / Basic usage select the Table Wizard Icon and click Table Wizard to bring up the Wizard Dialog
3. You will notice that within this dialog the unit options for width and height are only px and em
4. Within this dialog create a table two columns and four rows
5. Place your cursor in one of the table cells again and click the Table Wizard button again to edit the propertied of the new table
6. The unit options for width and height are still only px and em.  Go ahead and enter 100px into the width field and click Ok on the dialog
7. Once again with you cursor in one of the table cells, click the Table Wizard button again.  Now the units options for all widths and heights for tables and cells are px, em and importantly %
8. If I now create a new table via the Table Wizard the unit options available are px, em and % as expected

I logged a previous, different bug about the Table Wizard in github here: https://github.com/telerik/kendo-ui-core/issues/4390 but have had no response, so is this the correct place for bug reports, or github?

I have created a drop down list embedded within my grid using the demo: https://demos.telerik.com/kendo-ui/grid/editing-custom

For some reason when I select an option within the drop down it doesn't send the data back in a format the grid can use, however the default value (if I don't touch drop down) works just fine.

My datasource designed as such: 

and the kendo grid:

The editor is the built like this:

and the data source for the drop down list:

If I create an item in the grid and don't touch the dropdown I get the following back in the e.data:

But if I select an option (even the default) the data doesn't come back as an object.  It only sets a field called SwitchPerson 

Any thoughts on the cause of this?

Thanks in advance

I have a page that has a value of fleetId that is set by the Router Object.   I also have a dropdown list that is populated with a datasource.   How can I set the selected value when the page(template) first loads?    It works if I set it to a function in the view model but that creates another set of problems (the onChange won't work)

 <script id="index" type="text/x-kendo-template">   
  
                       <input data-role="items"    
                              data-bind="source: channelFleets, value: selectedfleet,  
                              events: {
                                change: onChange,                   
                              }" 
                              data-text-field="fleetText"
                              data-value-field="fleetId"          
                         
                 
            />

</script>

---------viewmodel.js-----------------------


var viewModelIndex = kendo.observable({

  fleetId: "",// Set by Router 
  selectedfleet: "",   

// Changing the databinding value to this does work.

 //selectedfleet: function() {

               //    return this.fleetId;             
   //  },
  
  items: [
          { fleetId: "Fleet 1", fleetText: "Fleet 1" },
          { fleetId: "Fleet 2", fleetText: "Fleet 2" },
          { fleetId: "Fleet 3", fleetText: "Fleet 3" }
        ],           


   onChange: function() {              
                 var selectedFleet = this.get("selectedfleet");
                 router.navigate("/operations/fleet/" + selectedFleet);
        },


});

Hi,

We are using Kendo Grid control. I have one field which is editable in the grid. Initially, the grid remains in view mode. There is a button outside the grid. Upon clicking the Edit button, I want to make the whole column in edit mode. I want that the whole column should now have textboxes instead of the label. How can I achieve that in Kendo? I am using Kendo Batch editing, but the problem with inline editing mode is, we can only keep one row in edit mode, not all at once.

I found below thread having the same issue as mine but couldn't find the answer.

https://www.telerik.com/forums/dynamically-changing-template-of-a-column-to-make-it-editable

Thanks & Regards,

Ankush Jain

I am trying to change the color of the shape by using the below code. but not working by any way.

please advice what I need to change to set new color to the shape

<!DOCTYPE html>
<html>
<head>
</head>
<body>


  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script></head>



<div id="diagram"></div>
<script>
    function createDiagram() {
        $("#diagram").kendoDiagram({
            editable: {
                rotate: false,
                resize: false
            },
            pannable: false,
            zoomMax: 1,
            zoomMin: 1,
            shapeDefaults: {
                visual: visualTemplate,
                connect: false
            },
            connectionDefaults: {
                editable:
                {
                    drag: false
                }
            }
        });
    }

  
  
  function Data() {
        try {
           var diagram_data = $("#diagram").data("kendoDiagram");
           var diagram = $("#diagram").getKendoDiagram();
           diagram_data.dataSource.add({
                                    mac_id: "#12345",
                                    power_of_battry_value: "100",
                                    humidity: "60%",
                                    temperature: "33",
                                   
                                });
          //working fine
          diagram.shapes[0].position(new kendo.dataviz.diagram.Point(50, 50));
                      
           // working fine
          diagram.shapes[0].dataItem.mac_id = "mac_id";
          diagram.shapes[0].dataItem.humidity = "humidity";
          diagram.shapes[0].dataItem.temperature = "temperature";
          diagram.shapes[0].redrawVisual();
         
         
          
          // not working  
          diagram.shapes[0].options.fill.color =  "black";
          diagram.shapes[0].redraw();

          // not working  
          diagram.shapes[0].options.fill.color =  "black";
          diagram.shapes[0].redrawVisual(); 
          
          // not working 
          diagram.shapes[0].redraw({
            fill: {
              color: "black"
            }
          });
          
                       
             
        }
        catch (e)
        { alert(e); }
    }
    $(document).ready(function () {
        createDiagram();
        Data();
    });


    

    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var dataItem = options.dataItem;
        
        
        var g = new dataviz.diagram.Group({ id: dataItem.mac_id.trim() } );
        g.append(new  kendo.dataviz.diagram.Rectangle({
            id: dataItem.mac_id.trim(),
            width: 140,
            height: 75,
            x: 0,
            y: 0,
            fill: {
                color: "blue"
            }
        }));

        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.mac_id.trim(),
            x: 10,
            y: 10,
            fill: "#fff"
        }));
        g.append(new dataviz.diagram.TextBlock({
            text: "T: " + dataItem.temperature,
            x: 10,
            y: 25,
            fill: "#fff"
        }));
        g.append(new dataviz.diagram.TextBlock({
            text: "H: " + dataItem.humidity,
            x: 10,
            y: 40,
            fill: "#fff"
        }));
       

        return g;
    }

</script></body>
</html>

Hello,

After I changed  node's display text in client side the node become not selectable.  for example I have treeview as below: 

$("#treeview").kendoTreeView({
  dataSource: [
    { text: "foo", id:"1", items: [
      { text: "AAA",id:"2" } ] }
  ]
});

I changed "AAA" to "BBB"  by button click (see below code). after that I cannot select that node anymore. the node with 'BBB' function as a LABEL. Does anyone has idea how to resolve it?

  $("#btn").click(function(){
     var treeview = $("#treeview").data("kendoTreeView");               
      var myDataItem=treeview.dataSource.get(2); 
      var node = treeview.findByUid(myDataItem.uid);
      node.text("BBB");
      treeview.select(node);
     
 });