We've got a grid set up to allow for horizontal scrolling (no vertical). We accomplished this by enabling scrolling on the grid, setting the width of the grid to 200px (which doesn't seem to actually restrict the width, which is strange), and setting individual widths on each of the columns, also in pixels.
var grid = $("#report_grid").kendoGrid({ dataSource: jsonDataRemote, columnMenu: true, groupable: { showFooter: true }, pageable: { refresh: true, pageSizes: [20, 50, 100], buttonCount: 5 }, sortable: { allowUnsort: true }, dataBinding: onDataBinding, filterable: true, resizable: true, scrollable: true, width: "200px", columns: [ { title: "Home Group", field: "HomeGroup", width: "125px" }, { title: "Learner", field: "LearnerName", width: "125px" }, { title: "Learner Wage", field: "LearnerHourlyWage", width: "80px", sortable: false, groupable: false }, { title: "Learner Hours", field: "LearnerHours", width: "92px", groupable: false }, { title: "Learner Cost", field: "LearnerCost", width: "84px", groupable: false }, { title: "Trainer", field: "TrainerName", width: "125px" }, { title: "Trainer Wage", field: "TrainerHourlyWage", width: "80px", sortable: false, groupable: false }, { title: "Trainer Hours", field: "TrainerHours", width: "92px", groupable: false }, { title: "Trianer Cost", field: "TrainerCost", width: "80px", groupable: false }, { title: "Extra Cost Description", field: "ExtraCostDescription", width: "125px" }, { title: "Extra Cost Amt", field: "ExtraCostAmount", width: "92px", groupable: false }, { title: "Total Cost", field: "TotalTrainingCost", width: "94px", aggregates: ["sum"], groupFooterTemplate: "<div class='f-right'>Sub Total: #=kendo.toString(sum, 'n2')#</div", footerTemplate: "<div class='f-right'>Total: #=kendo.toString(sum, 'n2')#</div", groupable: false }, { title: "Training Type", field: "TrainingType", width: "125px" }, { title: "Course", field: "CourseName", width: "125px", template: "# var icon = '' #" + "# if (TrainingType == 'Online') { #" + "# icon = 'fa-icon-desktop' #" + "# } else if (TrainingType == 'External') { #" + "# icon = 'fa-icon-share-square-o' #" + "# } else if (TrainingType == 'SCORM') { #" + "# icon = 'fa-icon-cloud' #" + "# } #" + "<span><i class='#= icon # margin-right-5'></i>#= CourseName #</span>" }, { title: "Session Date", field: "SessionDate", width: "125px", format:"{0:dd-MMM-yyyy h:mm tt}", groupable: false, template: "# if (SessionDate != '') { #" + "<div class=\'f-right'>#= SessionDate #</div>" + "# } #" }, { title: "Completed Date", field: "CompletionDate", width: "125px", format:"{0:dd-MMM-yyyy}", groupable: false }, { title: "Grade", field: "Grade", width: "125px", groupable: false } ]}).data("kendoGrid"); This all works fine, however we noticed that when you start removing columns from the grid, via the option in the column header dropdown, at a certain point (probably when the columns no longer "fill" the grid width), the grid display "breaks" and starts showing empty space on the right (see attached image).
How can we prevent this from occurring?
Also, while this bug is my primary concern, I was also hoping someone could explain why setting the grid and column widths in px is necessary for horizontal scrolling, and how it will affect the responsiveness of the grid.
Hi,
I am trying to make specific cells of the treelist editable based on some condition.
Following some websearch and kendo documentation, I figured that grid allows this via closeCell functionality.
I could not find anything similar for treelist. Is there a way to make a cell editable conditionally? i.e. via onEdit or editor: property on the specific field?
Thanks a lot,
Labhesh
​
I have a requirement like this.
I am making a dynamic grid. In that grid dataSource can be change any time. Because of that I am making dynamic grid. In that grid update popup It has a Boolean value. So I wanna change it to radio button. So what I am try to do is I add a custom template.
editable: {
mode: "popup",
template: kendo.template($("#myCustomTemplate").html())
}
When someone click the update button it will give this template.
<script type="text/x-kendo-template" id="myCustomTemplate">
<div id="lead-update22">
<table data-template="leadFieldsTemplate" @*data-bind="source: dataField.leadModel"*@></table>
</div>
</script>​
But this grid is dynamic. So I try to make kendo.Observable() object and try to make the field to bellow template with in the above template.
<script type="text/x-kendo-template" id="leadFieldsTemplate">
<script>
But this is not working. I wanna know that if it is possible to do something above ??
I have two multi selects:
<select kendo-multi-select ng-model="authorizedUsers.office"
k-data-source="officeUsers"
k-data-text-field="'fullName'"
k-data-value-field="'userId'"
k-filter="'contains'"
k-placeholder="'Select users...'"
k-value-primitive="true"></select>​
<select kendo-multi-select ng-model="authorizedUsers.client"
k-data-source="​clientUsers"
k-data-text-field="'fullName'"
k-data-value-field="'userId'"
k-filter="'contains'"
k-placeholder="'Select users...'"
k-value-primitive="false"></select>
both clientUsers and officeUsers are arrays of objects but when I select anything the underlying model is updated with an array of strings of userId. Is there a bug with the multi select and k-value-primitive or am I missing something?
Hi,
I am experiencing a strange issue with the kenKo NumericTextBox in my ASP.NET MVC project when (and only when) client side validation is enabled.
I have a model class with a Nullable Decimal property and decorated with the [Required] attribute so as to force the user to enter a value (0) does not mean "no value entered".
I am using the Kendo UI widgets, but not with the MVC wrappers. I have a few different sorts of widgets on the page (dropdownlist, datePicker, timePicker etc) and all seem to work OK using the standard @Html.EditorFor / @Html.TextBoxFor / @Html.ValidationMessageFor helpers, but I am seeing strange behaviour with the NumericTextBox in particular.
Firstly, the NumericTextBox does not show the client-side Validation Message when no value is entered, but I think this is due to the fact that the real input is hidden, and jQuery validation does not work with hidden inputs. That is actually fine, and I can live without client-side validation for this, but the behaviour seems to be broken even when relying on the server-side validation performed by the ASP.NET model binder.
Specifically, if you enter all valid entries, apart from the NumericTextBox, and click submit, the page will post back to the controller and MVC detects the model error (null value in the decimal property) and returns back to the View.
Now, the validation message *is* shown because it has been enabled by the server-side rendering.
However, if I now enter a value into the NumericTextBox and click Submit, the value posted back to the controller is always 0.
Checking the RequestBody sent to the server, the first time the Input value is included in the form values body but correctly is empty. After the post-back though, on the second submission, the input name is not sent at all, and therefore the MVC model binder is defaulting to a value of zero (not sure this should be the default behaviour but that's another topic!)
In any case, once Client side validation is disabled, the behaviour works as expected, so I would have to conclude there is some further incompatibility between the NumericTextBox and jQuery validation?
I have deployed an example MVC project to Azure here: http://mvckendonumerictextbox.azurewebsites.net/
and the source is in GitHub here: https://github.com/djjlewis/MvcKendoNumericTextBox
Regards
Dan.
Lets say we have a table, each row with a ComboBox containing the same allowed values.
It seems that each ComboBox generates its own DOM list (<ul> etc) for use, so for a table with 100 rows, you will end up with 100 extra lists in the background which eventually affect performance.
Is there a way to get the ComboBoxes to share the same list of available values? Or is there a more appropriate widget I should be using?
I want to create a grid in the following scenario:
My data is an array of objects and within each object will be another array. The main array is entries and the child array is standings. The standings array will vary in size but every entry will have the same number of objects in standings. So if entry 1 as 4 standings objects then every entry will have 4 standings. They will also be in the same order.
I'd like my grid to then be:
entry.name | entry.standings[0].team | entry.standings[1].team | entry.standings[n].team
In addition to this I need to be able to color the table cell depending on a different value in standings: entry.standings[0].loss for it's respective cell.
This is what I have so far:
dataBound: function () { $('td').each(function () { if ($(this).text() == 'MIA') { $(this).addClass('warning') } }) },
This will change the background based on the value or team but I need it based on the value of loss
[{$id: "1",$type: "FootballMn.Data.Entry, FootballMn.Data",EntryId: 3,UserId: 72,Name: "My Test Entry",NameNbr: 1,CurrentStrikes: 0,WeekOut: 0,SortOut: 0,Standings: [{$id: "2",$type: "FootballMn.Data.Standing, FootballMn.Data",EntryId: 3,Week: 1,Sort: 1,TeamId: "SEA",Loss: 1},{$id: "3",$type: "FootballMn.Data.Standing, FootballMn.Data",EntryId: 3,Week: 2,Sort: 1,TeamId: null,Loss: null},{$id: "4",$type: "FootballMn.Data.Standing, FootballMn.Data",EntryId: 3,Week: 3,Sort: 1,TeamId: null,Loss: null},{$id: "5",$type: "FootballMn.Data.Standing, FootballMn.Data",EntryId: 3,Week: 4,Sort: 1,TeamId: null,Loss: null},{$id: "6",$type: "FootballMn.Data.Standing, FootballMn.Data",EntryId: 3,Week: 5,Sort: 1,TeamId: null,Loss: null}]]
vm.mainGridOptions = { dataSource: { type: "json", transport: { read: "http://localhost:55666/breeze/FootballData/EntriesWithStandings" //StandingsTest" }, serverPaging: false, serverSorting: false, }, sortable: true, pageable: true, dataBound: function () { $('td').each(function () { if ($(this).text() == 'MIA') { $(this).addClass('warning') } }) }, columns: [{ field: "Name", title: "First Name", width: "120px" }, { title: "1", value: 'test', template: '#: Standings[0].TeamId #' //}, { // title: "2", // template: '<span class="#: setBackground() #">#: Standings[0].Loss #</span>' }] };

I'm upgrading from Kendo 2015 Q1 SP1 (2015.1.408) where my grid with AutoComplete editor works fine, but when upgrading to any of the later versions (ex:Q2 SP1) breaks the editor, throwing "Uncaught TypeError: e._preselect is not a function" when clicking on a grid cell with the custom editor.
http://dojo.telerik.com/epowu shows the broken version (click on a "States" cell to see the exception and the placeholder text and not the correct value).
http://dojo.telerik.com/oHIse works fine using an older version.
Did I miss some breaking change?
Thanks