Telerik Forums
Kendo UI for jQuery Forum
2 answers
2.3K+ views

Hey,

I'm using a template to get a button into my grid toolbar since my atempt to write it analog to teh treelist doesn't work. But I can't access the click event. I want to open a custom create-dialog for grid items.

For the treelist i use something like this:

toolbar: [{
 
imageClass: 'k-i-plus',
name: 'createPosition',
text: 'New',
click() {
$('#newItemDialog').data('kendoDialog').open();
},
},
'search',
]

 

Since this doesn't seem to work I tried this but can't access the click-event:

 

$myGrid.kendoGrid({
        dataSource: myDatasource,
        columns: [
        ....
        ],
        toolbar: [
            {
                template: '<a class="k-button" href="\\#" id="newItemButton" ">New</a><span class="k-textbox k-grid-search k-display-flex"><input autocomplete="off" placeholder="Search..." title="Search..." class="k-input"><span class="k-input-icon"><span class="k-icon k-i-search"></span></span></span>'
            }
        ],
       
    }).after(() => {
        $('newItemButton').kendoButton({
            icon: 'k-i-plus',
            click: onNewClick
        });
    });
 
function onNewClick() {
    $('#newItemDialog').data('kendoDialog').open();
}
Hans-Jürgen
Top achievements
Rank 1
Veteran
 answered on 18 Feb 2021
1 answer
435 views

 

 

DateTimePicker does to not scroll to selected value when the TimePicker is opened since version 2020.2.513, is it a bug? If not, what can I do to achieve the behavior in latest version of Kendo UI for jQuery?

https://dojo.telerik.com/aJolodUn

Mihaela
Telerik team
 answered on 18 Feb 2021
1 answer
309 views

For our date fields when no date has yet been selected, on opening the calendar control, we want the start date to be set to a specific date. Is this possible?  Not today's date but a date in the past. 

I can set a default date but then on reaching that page the default date is showing in the input  - we don't want that.  On reaching the page , the date must show as blank and only on opening of the calendar, the date should be defaulting to our specified date. Then once a date is selected it can be shown in the input. 

Anton Mironov
Telerik team
 answered on 18 Feb 2021
3 answers
311 views

Hi,

We are using Kendo stock chart to display  365 days of data, but I can see that the full one year(365 days) data is not being displayed on the category axis in the default/ zoomout mode. But when i zoom in I can see the bars for each day. How can i fix this ? Is this something related to sample rate ? I need to show full data on the category axis.  Attaching images, first img is kendostock chart which won't display all data, second img is KendoChart which displays full set of data. But I need this work with KenoStock chart. Appreciate any help. 

 

 

 

 

 

 

 

 

 

Wasquez
Top achievements
Rank 1
 answered on 17 Feb 2021
8 answers
1.0K+ views

I need to refresh the whole treeview and I found on forums that to do that is to call .dataSource.read() method. However when I call this method the user does not see that the treeview is loading and he still sees the old data.

How to refresh the treeview and display the loading animation just like when the treeview is loaded for the first time?

Stoyan
Telerik team
 answered on 17 Feb 2021
3 answers
456 views
I have a Grid with the following DataSource:
..
transport: {
    read: {
        url: "GetJsonData.p",
        data: {
            "function": grid_function,
            "element":  "grid",
            "param1":   grid_param1,
            "param2":   grid_param2,
            "param3":   grid_param3,
            "rowid":    grid_rowid
        },
        dataType: "json"
    }
},
schema: {
    data:  "data",
    total: "recordsCount",
    model: {
        id: "field1"
    }
}
...

I want to be able to update the DataSource when the user selects a row on a different Grid. For that reason, I am using a JS function that uses the SetDataSouce method and passes different values to the getJsonData.p procedure, which then generates the return data:

function SetGridDS(grid_element,grid_function,grid_param1,grid_param2,grid_param3,grid_rowid) {
    grid_element.setDataSource(new kendo.data.DataSource({
        transport: {
            read: {
                url: "GetJsonData.p",
                data: {
                    "function": grid_function,
                    "element":  "grid",
                    "param1":   grid_param1,
                    "param1":   grid_param2,
                    "param3":   grid_param3,
                    "rowid":    grid_rowid
                },
                dataType: "json"
            }
        },
        schema: {
            data:  "data",
            total: "recordsCount",
            model: {
                id: "field1"
            }
        }
    }));
 
    grid_element.dataSource.read();
}

 

However, I am getting the e.slice is not a function error. (hence the schema and the model, as suggested by others in the forum - but with no luck).
Is there a way to better analyse the error and find what exactly is causing it?

Thank you in advance,
Syian

Anton Mironov
Telerik team
 answered on 17 Feb 2021
1 answer
95 views

Hi,

We need to display only month view and Agenda view. We don't want other views. so we have hide those views. we have set view properties like 'event per day':2

Now if on one particular day, if there are more than 2 events, Month view shows.. and it will be opening day view which we don't want.

So How we can show event per day dynamically based on the number of events in that particular month? 

If we set 'event per day' more than 2 then UI doesn't look good if we don't have single event on particular day.

Can't we implement functionality like SharePoint where in calendar month view, if on any particular day if there are more than 2 events then it gives expand, collapse option? In that case if you expand the events, it increases particular row height of the table rather than entire scheduler rows?

Please find the screenshot for the same.

Thanks,

 

 

 

Martin
Telerik team
 answered on 17 Feb 2021
5 answers
1.2K+ views

Hello,

How do I configure the width of the donut chart circle?  The default one created by Kendo UI is very thick, but I would like a thinner one.  Attached is a screen shot of what I see when I use the donut chart as-is.  Also attached is a thinner donut chart image which is what I'm trying to achieve.  I tried to use the example for doing this with a bar chart, but it resulted in nothing showing up for the donut chart.

Thanks in advance,
David

Tsvetomir
Telerik team
 answered on 16 Feb 2021
3 answers
490 views

A client is asking for both batch edit AND a detail/expand edit.

They like the Excel-like editing of batch, but they want several other UI features in the expanded/detail view that don't make sense in a grid row (think charts, hyperlinks, buttons to calculate things, etc.). The idea is that users could use both, even on the same row, then save all grid changes as usually for batch.

I've got it mostly working here: https://jsfiddle.net/joewilson0/jwcLhtg2/

But I have two questions:

  1. Is this a supported way to make edits? Any concerns?
  2. When I change a value in the detail/expand template, the row collapses. How can I prevent that?
Georgi Denchev
Telerik team
 answered on 16 Feb 2021
8 answers
1.7K+ views

Hi

I don't really know Kendo UI very well but I'm modifying an existing application that was written almost entirely in Kendo UI. Normally, making small changes by studying and re-purposing existing bits of code works fine for me. However, I have found an issue that I can't get past and I need help with.

I have a screen that lists a bunch of people in a kendo.grid. There is an edit button for each row that launches a popup in which there are a bunch of checkboxes that can be checked. Then on update I will send that data to the server for processing.

However, in the popup, when I press update, the datasource: transport: update: clause isn't firing. (For info, the datasource: transport: read: clause fires perfectly).

So, here is the code. Can anybody see where I have made any mistakes?

(For info, I have pasted below just the grid code, but I have also put in attachment the entire JS page, in case it's helpful).

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

  function setGrid() {
  var command = {};
  dataSource = new kendo.data.DataSource({
  serverFiltering: false,
  serverSorting: false,
      serverPaging: false,
      sort: {
        field: 'per_name',
        dir: 'asc'
      },
      transport: {
      read: {
      url: 'action.cfm?action=filehandler.list',
      dataType: 'json',
      cache: false
      },
      update: {
      url: 'action.cfm?action=filehandler.save',
      dataType: 'json',
      cache: false
      }, // THIS NEVER FIRES
       parameterMap: function (options, operation) {
      console.log(operation);
      console.log(options);
      if (operation !== 'read') {
      return options;
      }
      }
      },
      pageSize: 20,
      schema: {
      model: {
      id: 'login',
      fields: {
      login: {
      editable: false
      },
      per_name: {
      editable: false
      },
      org_name: {
      editable: false
      },
      //lst_user_sec_ids: {
    //  editable: true
      //},
      lst_user_sec_labels: {
      editable: false
      }
      }
      }
      },
      change: function (e) {
      if (e.action === 'sync') {
      lists.loadFilehandlers();
      this.read();
      }
      },
      error: function (e) {
      app.printMessage({
      restError: e.xhr
      });
      }
      
  });

  $screen.find('#filehandler-grid').kendoGrid({
  dataSource: dataSource,
  sortable: true,
  cache: false,
  noRecords: true,
  pageable: {
  pageSize: 20,
  pageSizes: [20, 50, 100],
  refresh: true,
  info: true
  },
  filterable: {
  extra: false,
  mode: 'row',
  operators: {
  string: {
  contains: 'Contains'
  },
  number: {
  eq: 'Equals'
  }
  }
  },
  editable: {
  mode: 'popup',
  template: kendo.template($("#sectors-editor").html())
  },
  edit: function (e) {
  $(e.container).parent().css({
  top: '50px',
  left: '150px',
  width: '850px',
  height: '600px',
  overflow: 'scroll'
  });
  }, 
  
  resizable: true,
  selectable: 'cell',

  columns: [
  {
    field: 'login',
    title: 'ECAS ID',
    hidden: true,
    type: 'string',
    filterable: {
    cell: {
    showOperators: false
    }
    },
    width: '150px'
  },
  {
    field: 'per_name',
    title: 'Name',
    hidden: false,
    filterable: {
    cell: {
    showOperators: false
    }
    }
  },
  {
        field: 'org_name',
        title: 'Unit',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
        field: 'lst_user_sec_labels',
        title: 'Has access to sectors',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
        field: 'lst_user_sec_ids',
        title: 'hide this later',
        hidden: false,
        type: 'string',
        filterable: {
        cell: {
        showOperators: false
        }
        }
  },
  {
    command: [
    {
    name: 'edit',
    text: {
    edit: 'Edit',
    cancel: 'Cancel'
    },
    click: function(e) {
            // prevent page scroll position change
                e.preventDefault();
                // e.target is the DOM element representing the button
                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                // get the data bound to the current table row
                var data = this.dataItem(tr);
                // Get the data for the list of sectors and write it into the popup window
                setSectorsList(data.login, data.lst_user_sec_ids);
    }
    }
    ],
    title: 'Actions',
    width: '225px',
    filterable: false
  }
  ]
  });

  }


 

Viktor Tachev
Telerik team
 answered on 16 Feb 2021
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?