Telerik Forums
Kendo UI for jQuery Forum
6 answers
148 views

Why doesn't this work? 

$('#my-kendo-numerictextbox').attr('title', '100');

Currently the title/tooltip is displaying the value the is already visible in the textbox - seriously? 

I want to be able to change the value dynamically to reflect the upper value allowed in the numeric textbox, in other words, some useful information.I'm a bit weird that way, wanting to show the users something that is actually useful...

thanks

Jose Manuel
Top achievements
Rank 2
 answered on 11 Mar 2020
1 answer
208 views

Hi guys

I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller.  I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location.  All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room.

 

Here is some of my code.

Razor MVC

@(Html.Kendo().Scheduler<MeetingViewModel>()
                                .Name("scheduler")
                                .Date(startOfWeek)
                                .StartTime(startOfWeek.AddHours(8))
                                .EndTime(startOfWeek.AddHours(18))
                                .Height(670)
                                .AllDaySlot(false)
                                .Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false))
                                //.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false))
                                .Events(e =>
                                {
                                    e.Save("scheduler_save");
                                })
                                .Views(views =>
                                {
                                    views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                    views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                })
                                .Timezone("Etc/GMT")
                                .Resources(resource =>
                                {
                                    resource.Add(m => m.RoomID)
                                    .Title("Room")
                                    .DataTextField("ResourceName")
                                    .DataValueField("RoomID")
                                    .DataColorField("ResourceColour")
                                    .Multiple(false)
                                    .DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty })));
                                })
                .DataSource(d => d
                .Events(x => x.RequestEnd("check_response"))
                    .Model(m =>
                    {
                        m.Id(f => f.MeetingID);
                        m.Field(f => f.Title).DefaultValue("No title");
                        m.RecurrenceId(f => f.RecurrenceID);
                        m.Field(f => f.Title).DefaultValue("No title");
                    })
                .Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty }))
                .Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })
                )
)

 

CustomTemplate

@*TEMPLATE FOR MODAL POPUP*@
<script id="customTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="title">Title</label>
    </div>
 
    <div class="k-edit-field" data-container-for="title">
        <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" />
    </div>
 
    <div class="k-edit-label">
        <label for="start">Start</label>
    </div>
    <div class="k-edit-field" data-container-for="start">
        <span style="display: none;" class="k-widget k-datetimepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
            </span>
        </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span>
    </div>
 
    <div class="k-edit-label">
        <label for="end">End</label>
    </div>
    <div class="k-edit-field" data-container-for="end">
        <span style="display: none;" class="k-widget k-datetimepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
            </span>
        </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span>
    </div>
 
    <div class="k-edit-label">
        <label for="roomID">Room</label>
    </div>
 
    <div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div>
        <script>
                jQuery(function () {
                    var container = jQuery("\#resourcesContainer");
                    var resources = jQuery("\#scheduler").data("kendoScheduler").resources;
 
                    console.log(resources[0].dataSource._data);
 
                    jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field))
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: resources[0].dataTextField,
                            dataValueField: resources[0].dataValueField,
                            dataSource: resources[0].dataSource,
                            valuePrimitive: resources[0].valuePrimitive,
                            optionLabel: "N1one",
                            template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField)
                        });
                })
            <\/script>
</script>

 

The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.

When I create a simple select like is passes the value correctly 

<select name="RoomID" data-bind="value:RoomID">
            <option value="2">Yo</option>
            <option value="4">Blah</option>
            <option value="6">Blah</option>
        </select>

 

 

Petar
Telerik team
 answered on 11 Mar 2020
6 answers
1.8K+ views
Hi there,

I have a grid with several custom numeric text box fields set up for inline editing. I need to set the initial value of some of the fields based on the current data. From what I've seen, the edit event is the place to do this. I'm able to set the initial value of the fields fine but when I save the row the values aren't being sent to the server. This tells me that the model data isn't being updated when I change the values but I can't figure out how to make that happen. I tried adding .change()  to the end of each e.container line as recommended by a forum post I found but that just threw errors and didn't help.

My grid definition is:

$("#HolesGrid").kendoGrid({
    editable: "inline",
    scrollable: false,
    columns: [
        {
            command: ["edit", "delete"],
            title: "Actions",
            width: "90px"
        },
        { title: "Number", field: "Number", type: "number", width: "80px", editor: numericNoDecimalEditor },
        { title: "Male Par", field: "MalePar", type: "number", editor: numericNoDecimalEditor },
        { title: "Female Par", field: "FemalePar", type: "number", editor: numericNoDecimalEditor },
        { title: "Male Rank", field: "MaleRank", type: "number", editor: numericNoDecimalEditor },
        { title: "Female Rank", field: "FemaleRank", type: "number", editor: numericNoDecimalEditor }
    ],
    dataSource: {
        schema: {
            data: "Data",
            total: "Count",
            errors: "Error",
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    CourseID: { type: "number", defaultValue: CourseID },
                    Number: { type: "number" },
                    MalePar: { type: "number", defaultValue: 5 },
                    FemalePar: { type: "number", defaultValue: 5 },
                    MaleRank: { type: "number" },
                    FemaleRank: { type: "number" }
                }
            }
        },
        transport: {
            read: {
                url: "/CourseEdit/GetHoles",
                contentType: "application/json",
                type: "POST",
                data: { courseID: CourseID }
            },
            create: {
                url: "/CourseEdit/CreateHole",
                contentType: "application/json",
                type: "POST"
            },
            update: {
                url: "/CourseEdit/UpdateHole",
                contentType: "application/json",
                type: "POST"
            },
            destroy: {
                url: "/CourseEdit/DeleteHole",
                contentType: "application/json",
                type: "POST"
            },
            parameterMap: function (data, operation)
            {
                return JSON.stringify(data);
            }
        },
        requestEnd: function (e)
        {
            if (e.type == "create" || e.type == "destroy")
            {
                // Update the Yardage list
                $("#YardagesGrid").data("kendoGrid").dataSource.read();
                $("#YardagesGrid").data("kendoGrid").refresh();
            }
        }
    },
    edit: function (e)
    {
        if (e.model.isNew())
        {
            // Find the next hole number
            var holes = this.dataSource.data();
            var lastNum = 0;
            for (var i = 0; i < holes.length; i++)
            {
                var thisNum = holes[i].Number;
                if (thisNum - lastNum > 1)
                {
                    break;
                }
                lastNum = thisNum;
            }
            var nextNum = lastNum + 1;
 
            e.container.find("input[name=Number]").data("kendoNumericTextBox").value(nextNum);
            e.container.find("input[name=MaleRank]").data("kendoNumericTextBox").value(nextNum);
            e.container.find("input[name=FemaleRank]").data("kendoNumericTextBox").value(nextNum);
        }
    }
});
 
function numericNoDecimalEditor(container, options)
{
    $('<input data-bind="value:' + options.field + '" name="' + options.field + '"/>')
      .appendTo(container)
      .kendoNumericTextBox({
          format: "n0",
          decimals: 0
      });
}
Any ideas how I can make this work?

Thanks,
Jason
Alex Hajigeorgieva
Telerik team
 answered on 11 Mar 2020
3 answers
845 views

Would it be possible to set custom width and height using CSS calc()?

The situation is the following: I have a UI which consists of a main area and a sidebar.

When I open the window I want to be able to center the window within the main area, without covering the sidebar. And in my case, the sidebar having 400px, I would like to be able to set the Kendo Window width: calc(100% - 440px) and add a position left of 20px. In this way I would have control on various types of layouts.

Thanks,

Andy

Dimitar
Telerik team
 answered on 11 Mar 2020
1 answer
466 views

     I'm trying to generate a PDF report and I need the charts I generate for my HTML for the PDF file. I'm trying to send the image data to the server but when I try to load it into an image object it fails. Hoping you can help me.

-- Code on client side

        kendo.drawing.drawDOM($("#ESChart"))
            .then(function (group) {
                return kendo.drawing.exportImage(group);
            })
            .done(function (data) {
                chartData = encodeURI(data);

                $.ajax({
                    method: "POST",
                    data: chartData,
                    url: "/Home/CreateFacilityReport" + location.search,
                })
                    .done(function (msg) {
                        alert(msg);
                    })
                    .fail(function (data) {
                        alert("Failed to load svg");
                    });
            });

 

-- Code on server side

        public ActionResult CreateFacilityReport(string FacilityId, string chartData)
        {

            string myData = HttpUtility.UrlDecode(chartData.ESChart);

            byte[] myBytes = Encoding.ASCII.GetBytes(myData);

            using (var ms = new MemoryStream(myBytes))
            {
                Image myImage = Image.FromStream(ms, true, false);      <---- Blows up here and gets a 'Parameter is not valid'
                myImage.Save("/ESChart.png");
            }
}


Ivan Danchev
Telerik team
 answered on 10 Mar 2020
3 answers
72 views

Hi,

Is it possible to render the Pager of a ScrollView in the footer of its parent View? I want to give the user a visual clue that there are more items to scroll through and on which page they are currently at. Basically I want the pager to be visible at all times and that the content of the page in the ScrollView stays scrollable vertically.

 

Kind Regards,

Marco

Aleksandar
Telerik team
 answered on 10 Mar 2020
4 answers
2.6K+ views

I am using Javascript and have a kendo drop down list like so:

$("#ddl).kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: "contains",

dataSource: {
    data: [
      {id: 1, name: "apples"},
      {id: 2, name: "oranges"},
      {id: 3, name: "apples2"},
      {id: 4, name: "oranges2"}]
  }
});

 

As a user, I open the drop down list, type "apples" into the filter, and select "apples".  Then I activate a function (though clicking a button), that attempts to programmatically change the drop down list to the "oranges" value (index 1, id 2).  However, the filterInput is still active, and attempts to set the drop down list to index 1 instead sets it to index 1 of the filtered drop down list ("apples2").

I know I can access the filterInput programmatically.  How can I programmatically clear the filterInput and set the drop down list value to "oranges"?

Dimitar
Telerik team
 answered on 10 Mar 2020
10 answers
667 views
How can I implement drag/drop of external items onto the Scheduler control to create new events?
Ianko
Telerik team
 answered on 10 Mar 2020
4 answers
2.3K+ views

Hi

In our project, we need a footer template design in the Kendo grid. So we have used a Footertemplate property inside the columns.

columns: [{
field: "Name",
title: "Name",
headerTemplate: "Name <span class='fa fa-gbp' onclick='Showpopup(false,this,120); return false'></span>",
footerTemplate: "<div class='footer_Template'><div id='Namecount' style='display:none;'>Count = #: count #</div></div>"
}],

For the aggregate function, we have added the icon in the header template and added the aggregate options dynamically inside the popup window. During click of the icon, we display the aggregate options on a popup window.

The Footer template aggregate labels are initially set as display: none (as mentioned above). Once the aggregate option is selected from the header popup the footer template aggregate labels style will be display: block.

The above process is working fine before sorting of the column values but while clicking the sorting the footer template aggregate labels goes back to the initial stage (all the design style changes to display: None)


We need the same functionality & process to take place as on the video on our application too.
Video Link

Attached a demo project for your reference.

Demo Project (The link will be valid for 6 days).

Dev
Top achievements
Rank 1
Veteran
 answered on 10 Mar 2020
1 answer
201 views

Hello, is there a way to implement load on demand on spreadsheet? or load data while scrolling?

I'm using kendo spreadsheet to display big files, with no edit/save functionality. 

Loading the entire file on json can be very difficult when the json size is 30MB+.

Martin
Telerik team
 answered on 10 Mar 2020
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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?