Telerik Forums
Kendo UI for jQuery Forum
4 answers
963 views

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.

 

Pavlina
Telerik team
 answered on 18 Sep 2015
4 answers
127 views

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

 â€‹

Nikolay Rusev
Telerik team
 answered on 18 Sep 2015
2 answers
71 views
I have a grid that displays a subset of the entire column set of my model  as follows as a result of my search form

 

$("#kendoResultGrid").kendoGrid({
                            dataSource: {
                                data:response
                            },
                            scrollable: true,
                            sortable: true,
                            columns: [
                                { field: "EmpNo", template: "getLink(response)" },
                                { field:"EmpName" },
                                { field:"EmpMgr" },
                                { field:"ClientName" },                                
                                { field: "FrameworkName",hidden:true }
                            ]
                        });      

 
 function getLink(emp) {
        var action = '@Url.Action("Index","PMP", new { emp = '+ emp +')';
        var empLink = kendo.format("<a href='{0}'>{1}</a>", action, emp.empNo);
        return empLink;
    }
 

I want to be able to pass the current row to my Index method on my PMP view and display employee id as a hyperlink. Can you please assist?
Man
Top achievements
Rank 1
 answered on 18 Sep 2015
1 answer
197 views

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 ??  

Alexander Popov
Telerik team
 answered on 18 Sep 2015
1 answer
697 views

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?

 

Georgi Krustev
Telerik team
 answered on 18 Sep 2015
1 answer
995 views

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.

 

Georgi Krustev
Telerik team
 answered on 18 Sep 2015
1 answer
139 views

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?

 

Alexander Valchev
Telerik team
 answered on 18 Sep 2015
3 answers
1.4K+ views

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>'
           }]
       };

 

 

 

Dimo
Telerik team
 answered on 18 Sep 2015
2 answers
191 views
 
Hi..

How can I create a header to kendo grid with combination of kendo toolbar options and kendo grouping header options.here is the attached ui grid.jpg

Kindly help me to resolve issue.

Thank you in advance.
Devineni
Top achievements
Rank 1
 answered on 18 Sep 2015
2 answers
213 views

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

Sypher
Top achievements
Rank 1
 answered on 17 Sep 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?