Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.3K+ views

I've got two different date pickers in my app, in different parts of the same page, and when I construct them, I am using the same options, but one of them has the "k-input" class added and style set to width:100%, while the second has neither of those - this is on the span containing the following classes: k-widget k-datepicker k-header.

In what situations is the k-input class added and the width: 100% added to this span surrounding the input element - and how do I prevent these from being added?

<input id="postingStartDate" placeholder="@Common.PostingStartDate" value="@Model.StartDate"/>
<input id="transactionStartDate" placeholder="@Common.StartDate" value="" />

and the javascript is:

$("#transactionStartDate").kendoDatePicker();
$("#postingStartDate").kendoDatePicker();

resulting in:

<span class="k-widget k-datepicker k-header k-input" style="width: 100%;"><span class="k-picker-wrap k-state-default"><input id="postingStartDate" placeholder="Posting Start Date" value="11/17/2010 9:02:41 PM" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="postingStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="postingStartDateLabel" aria-describedby="postingStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="postingStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

<span class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default k-state-hover"><input id="transactionStartDate" placeholder="Start Date" value="" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="transactionStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="transactionStartDateLabel" aria-describedby="transactionStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="transactionStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

 

Thanks,

--Ed

Dimiter Topalov
Telerik team
 answered on 19 Nov 2015
1 answer
374 views

Hi,

I am using Kendo List view with k-template. I want to use Bootstrap grid system inside template. I could not get it working. The content in template doesn't align properly.

I want content to stay within the listview template and behave the grid col-md-* layout. Even I tried changing css.

 

I attached the document. Please use the code in Kendo UI Dojo(i.e http://dojo.telerik.com/IyIYe).

 Appreciate if you can provide solution. 

Magdalena
Telerik team
 answered on 19 Nov 2015
1 answer
136 views

Hi Team,

Am trying to implement the tree view structure as per the attached image. As you can see, i have parent and child in the same line. When i expand the children it should show it's children under it. Is this structure achievable? Or should i always have children only under a parent and not in the same line?

 Thanks!

Alexander Popov
Telerik team
 answered on 19 Nov 2015
1 answer
123 views

HI,

I have a kendo gird which is shown in a popup on click of link button in another grid(parent grid)

 $(".styleColorsLink").on('click', function () {

                var grid = gridMAPScreen.data().kendoGrid;
                var dataItem = grid.dataItem($(this).closest('tr'));
                var selectedSeason = dataItem["Season"];
                console.log(dataItem);
                selectedStyle = dataItem["StyleNumber"];
                var selectedStyleDesc = dataItem["StyleDescription"];
                var selectedMAPPrice = dataItem["MAPPrice"];
                var selectedMAPDiscPercent = dataItem["MAPDiscPercent"];
                var selectedExceptionWeekParticipant = dataItem["ExceptionWeekParticipant"];
                var selectedExceptionWeekMAPPrice = dataItem["ExceptionWeekMAPPrice"];
                var selectedMAPLTMSRP = dataItem["MAPLessThanMSRP"];
                var selectedHide = dataItem["Hide"];
                var selectedConfidential = dataItem["Confidential"];
                var selectedCarryForward = dataItem["CarryForward"];
                var initialize = false;
                var selectedDS = '@viewType';
                var isItemDirty = dataItem.dirty;
                var dirtyFields = dataItem.dirtyFields;
                $("#gdMAPColors").kendoGrid({
                    toolbar:hasUpdatePermission ? [
                        { name: "save", text: "Save Changes" },
                        { name: "cancel", text: "Cancel Changes" }]: "",
                    editable: "incell",
                    autoBind: true, // load data during grid initialization
                    scrollable: true,
                    //resizable: true,
                    //reorderable: true,
                    navigatable: true,
                
                    columns: hasUpdatePermission ? ColorColumnOptions : ColorNonEditColumnOptions,
                    height: 420

     }
                });

// Column i need to lock in pop up kendo grid 

 var CarryForwardSeaColorCol = {

    title: "Carryforward Season",
    field: "CarryforwardSeason",
    width: 130,
    //Vipul Chnage
    locked: true,
    lockable: false,
    filterable: filterableContain
};

var ColorLevelCodeCol = {
    title: "Product Code",
    field: "ProductCode",
    width: 130,
    filterable: filterableContain,
    //template: "<span>#=StyleNumber#-#=ColorCode#</span>"
};

 

//defination of all columns
var ColorColumnOptions = [CarryForwardSeaColorCol, ColorLevelCodeCol, ColorLevelDescCol, ColorLevelLongDescCol,
    MSRPLastChangeCol, MSRPPriorCol, MSRPCurrentCol, ConfirmMSRPCol, MAPLastChangeCol, MAPPriceCol, MAPDiscountCol, ExceptionParCol, ExceptionWeekPriceCol,
    ExceptionWeekDiscountCol, MAPLTMSRPCol, HideCol, AddCol, ConfidentialCol, CarryforwardCol, NotesCol, ConfirmMMXAddCol];

When i do this CarryForwardSeaColorCol and ColorLevelCodeCol header show in same column.

 

Appreicate any help. Thanks

Nikolay Rusev
Telerik team
 answered on 19 Nov 2015
1 answer
117 views

Hello. I'm trying to implement virtual scrolling in my ComboBox. I'm using OData for datasource. 

I've tried to use this example (https://demos.telerik.com/kendo-ui/combobox/virtualization) however i'm stuck. I don't know how to implement a Value Mapper in my Web API.

In this example it's easy to do, because tere are no any filters/ordering in the DataSource request. But in my canse i'm using the same OData method for different DataSources, but with differend Filters and Ordering. So, how can i get the index if some value which is not existing in the initial DataSource data, if i don't know which filter/ordering was used for a datasource? Because for different filters/ordering the index of this value will be different.

Georgi Krustev
Telerik team
 answered on 19 Nov 2015
1 answer
405 views

Hi,

I am using Kendo UI for MVC.  I have a string column containing string numbers.  I also have a hidden int column containing the integer version of these numbers.  I would like for the user to sort the string number column, but have the sorting actually take place using the hidden number column.  How would I go about this with Kendo UI for MVC? 

 

Thanks.

Alexander Popov
Telerik team
 answered on 19 Nov 2015
1 answer
220 views

Hi, I am creating a dropdownlist as follows:

Create Widget:

html.Kendo().DropDownList().Name(widgetName).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = widgetName, selectId = RegexHelper.GetIndex(parameter) })

 GetPromptData:

 

function GetPromptData(options) {
    $.ajax({
        url: "FileSubmit/GetPromptData",
        datatype: "jsonp",
        data: {
            "selectId": $('#widgetName').attr("selectid"),
            "key": window.dataKey
        },
        contentType: 'application/json',
        success: function (data) {
            alert("Data is received");
            options.success(data);
        }
    });
}

 And finally my controller:

public JsonResult GetPromptData(string selectId, string key)
{
   List<string> items = new List<string>();
   items.Add("item1");
   items.Add("item2");
   return Json(items, JsonRequestBehavior.AllowGet);
}
  

The ajax call receives a response but from there nothing happens?

html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
Georgi Krustev
Telerik team
 answered on 19 Nov 2015
3 answers
241 views

I have two date pickers and want to set the min of the second equal to the value of the first however it is not applying the restriction.  Here are my two pickers:

<input id="fromDate" name="toDate" kendo-date-picker k-ng-model="vm.fromDate" placeholder="From Date" />

<input id="toDate" name="toDate" kendo-date-picker k-ng-model="vm.toDate" k-min="vm.fromDate" placeholder="To Date" />

Kiril Nikolov
Telerik team
 answered on 19 Nov 2015
1 answer
179 views

 Is it possible to use Kendo's Grid to do virtual/infinite scrolling with an unknown number of entities?  My data is stored in a NoSQL Datastore which I query using cursors, so in general it is possible to determine where or not the data has tapped out on a particular page fetch, but not the total number of items.  Unfortunately, the schema.total documentation included below seems to indicate that schema.total is required for server side paging.  

 

schema.total Function |String
The field from the server response which contains the total number of data items. Can be set to a function which is called to return the total number of data items for the response.
The schema.total setting may be omitted when the Grid is bound to a plain Array (i.e. the data items' collection is not a value of a field in the server response). In this case, the length of the response Array will be used.
schema.total must be set if the serverPaging option is set to true.

 So, is there any way to do virtual/infinite scrolling with an unknown total?

 Thanks

 

Kiril Nikolov
Telerik team
 answered on 19 Nov 2015
2 answers
6.2K+ views
I am currently working on a grid that contains a column of checkboxes. I am adding a feature where by clicking a single checkbox, located at the top of the column (instead of having a title), will allow the user to either select or deselect every checkbox in that column with a single click. The entire grid and its functionality are being laid out in the Javascript file referenced in the markup at the time that the page renders.

This is how my grid is currently laid out:
$("#grid").kendoGrid({
    dataSource: {
        data: testData,
        pageSize: 10
    },
    groupable: false,
    sortable: false,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns:
    [
       {
           width: 35,
           title:  "<input id='checkAll', type='checkbox', class='check-box' />",
           template: "<input type=\"checkbox\" />"
 
       },
       {
           field: "FileName",
           title: "File Name",
           template: "<input id='f', type='file' />"
       },
       {
           field: "Description",
           title: "Description"
       },
       {
           field: "InLibrary",
           title: "In Library",
           template: "<input type=\"checkbox\" />"
       },
       {
           field: "Location",
           title: "Location",
           editor: locationDropDownEditor,
           template: "<input type=\"DropDownList\" />"
            
       },
    ]
});

Now, I know that something like this would work for me. However, I am confused by the implementation, and how the class "check-box" is used.

$(document).ready(function () {
    $('#checkAll').click(function () {
        if ($(this).attr('checked')) {
            $('.check-box').attr('checked', 'checked');
        } else {
            $('.check-box').removeAttr('checked');
        }
    });
  
    $('#Grid input[type=checkbox][id!=checkAll]').click(function () {
        var numChkBoxes = $('#Grid input[type=checkbox][id!=checkAll]').length;
        var numChkBoxesChecked = $('#Grid input[type=checkbox][checked][id!=checkAll]').length;
        if (numChkBoxes == numChkBoxesChecked && numChkBoxes > 0) {
            $('#checkAll').attr('checked', 'checked');
        }
        else {
            $('#checkAll').attr('checked', '');
        }
    });
});

What is missing to connect these two pieces of functionality? Is this a viable solution? How do I implement the "check-box" class?
Venelin
Telerik team
 answered on 19 Nov 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?