Telerik Forums
Kendo UI for jQuery Forum
2 answers
558 views
Why is the controller's reference to the grid not yet set in the databound event? Is this a design choice or a bug?
You can get a complete reference by accessing the sender in the databound event, so why would the scope not be updated yet?

Here's a plunker pointing out what I mean: http://plnkr.co/edit/ErDILanappRCgMxxo3Jh

I'm relatively new to AngularJS, so if this is a matter of design and guidelines please enlighten me with the details.


Thanks
صابر
Top achievements
Rank 1
 answered on 28 May 2017
2 answers
269 views

I've tried adding the dataBound event to a kendo diagram using k-options and also tried adding the event via the k-on-data-bound attribute but neither of these seem to work. Here is an example of where I would expect the dataBound event to fire but the console message is never printed.

 

صابر
Top achievements
Rank 1
 answered on 28 May 2017
26 answers
2.3K+ views

http://dojo.telerik.com/IkoTO/2

This is just a modified example from the original API Docs demo.  All I did was add a spacer div so the page has scroll.

To reproduce: Simply click inside a multiselect, then scroll down to bottom of dropdown results.  

You'll see the dropdown closes and then the page starts scrolling.

 

This would be VERY annoying for any end-user.

Telerik needs to fix this by stopPropagation of the scroll event maybe?

Lucia
Top achievements
Rank 1
 answered on 26 May 2017
4 answers
381 views

Hi, we are using MVVM as much as possible in all of our KendoUI Implementations.  We've run into what seems to be a limitation of the Grid control.  The MVVM support for the column values field does not appear to support view model binding.  I am not able to reference arrays or data sources in the view model while creating the view. Here's a link to my jsFiddle that illustrates the issue.

If you remove "values: dsStatus" from the HTLM code for the status column, the grid instantiates just fine.  With it in there, an error is raised that dsStatus could not be found.  Any help with this that does not require me abandoning the MVVM pattern and instantiating the grid via javascript would be greatly appreciated.

Jay
Top achievements
Rank 2
 answered on 26 May 2017
3 answers
418 views

Hi, in the documents it says to use batch if doing a number of operations on the spreadsheet. Can you explain what the {layout: true} is?

http://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet#methods-batch

I'm guessing it represents the change event to fire after the batch operation finishes - if this is the case are there any other options? Ie - layout is for layout changes, what about adding validations or changing colours? I cannot seem to find this list. 

Thanks

Marc

Dimitar
Telerik team
 answered on 26 May 2017
1 answer
601 views

I am having trouble exporting my Kendo Grid to PDF because I have two locked columns. Locked columns are a known limitation for Export to PDF and I understand that.

 

I am trying to unlock the two "frozen" columns before I export to PDF, but unlocking is not working. I have tried jQuery and CSS approaches.

 

I would prefer to use CSS. Any tips would be appreciated. Thank you.

 

Here is what I have tried in my grid object:

$("#grid").kendoGrid({
    // ... snip ... //
    // ... snip ... //
    pdf: {
        allPages: true,
        avoidLinks: true,
        fileName: "Demand Report.pdf",
        paperSize: "A4",
        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
        landscape: true,
        repeatHeaders: true,
        scale: 0.2
    },
    pdfExport: function () {
 
        //Unlock the "locked" columns via jquery (this only unlocks the Field1? Field 2 will remain locked, why?)
        var grid = $("#grid").data("kendoGrid");
        grid.unlockColumn("Field1");
        grid.unlockColumn("Field2");
 
        //Unlock the "locked" columns via css (any combination of these makes the grid go crazy ?)
        $(".k-grid-content-locked").removeClass("k-grid-content-locked");
        $(".k-grid-lockedcolumns").removeClass("k-grid-lockedcolumns");
        $(".k-grid-header-locked").removeClass("k-grid-header-locked");
 
        console.log("columns should be unlocked ?");      
 
    },
    // ... snip ... //
    columns: [
        {
            field: "Field1",
            locked: true
        }, {
            field: "Field2",
            locked: true
        }, {
            field: "Field3",
            headerTemplate: currentEmploymentColumnHeading + "<span name='Field3' class='k-icon k-i-close remove' style='float: right;'></span>",
            width: 125,
            attributes: { style: "text-align:right;" },
            template: "#= (Field3 !== null) ? Number(Field3).toLocaleString() : 'N/A' #"
        }
    // ... snip ... //
    // ... snip ... //
 
 
 
//PDF Export Button - click event
$("#btnPdfExport").kendoButton({
    click: function () {
        $("#grid").getKendoGrid().saveAsPDF();
    }
});

 

Preslav
Telerik team
 answered on 26 May 2017
1 answer
170 views

Hello,
How can I get the selected month from a kendoCalendar??

the kendoCalendar it is in a window partialview:

<table class="table table-responsive">
    <tr>
        @*<td style="vertical-align: initial; padding-right: 100px;">
                <input id="picker" />
            </td>*@
        <td>
            <img src="~/Content/calendar.png" class="img-responsive" />
        </td>
        <td>
            <div id="calendar"></div>
        </td>
    </tr>
    <tr>
        <td>
            <button align="right" id="btnAddMonth" class="k-primary" onclick="SaveMonth();" style="height:2em;width:auto">Salveaza</button>
        </td>
    </tr>
</table>
i have this code behind:
$(function() {
var listaZile=[];
  var today = new Date();
    //data source
  var selectedDates = [today.getDate() ];
  //Calendar with multiselection
  initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});

function initCalendar(calendar, selectedDates, onUpdate) {
  var kendoCalendar = calendar.data('kendoCalendar');

  kendoCalendar.bind('navigate', function() {
    setTimeout(function() {
      updateCalendar(calendar, selectedDates);
    }, 0);
  });

  updateCalendar(calendar, selectedDates);

  calendar.on('click', function(event) {
    var cell = $(event.target).closest('td');
    var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);

    if (isClickedOnDayCell) {
      var date = dateFromCell(cell).getDate();
      var isDateAlreadySelected = selectedDates.some(function(selected) {
        return selected === date;
      });

      if (isDateAlreadySelected) {
        selectedDates.splice(selectedDates.indexOf(date), 1);

      } else {
        selectedDates.push(date);
listaZile.push(date); //this return days selected!!!
      }

      updateCell(cell, selectedDates);

      if (onUpdate !== undefined) {
        onUpdate();
      }
    }
  });
}


function updateCalendar(calendar, selectedDates) {
  calendar.find('td > a').parent().each(function(i, item) {
    var cell = $(item);

    if (isDayCell(cell)) {
      updateCell(cell, selectedDates);
    }
  });
}

function updateCell(cell, selectedDates) {
  var isCellSelected = selectedDates.some(function(selected) {
    return selected === dateFromCell(cell).getTime();
  });

  if (isCellSelected) {
    cell.addClass('selected');

  } else {
    cell.removeClass('selected');
  }
}

function isDayCell(cell) {
  return /^\d{1,2}$/.test(cell.find('a').text());
}

function dateFromCell(cell) {
  return new Date(convertDataValue(cell.find('a').attr('data-value')));
}

//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
  var regex = /\/(\d+)\//;
  var month = +date.match(regex)[1] + 1;

  return date.replace(regex, '/' + month + '/');
}

 

The save function :

<script type="text/javascript">
   
    function SaveMonth() {
          iMonth = document.getElementById('calendar_cell_selected').textContent;
        //var month=iMonth
        alert(iMonth);
        var year = 2017;
        debugger;

        var url = '@Url.Action("Adauga", "Calendar")';

        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            data: { listZile: listZile, iMonth: iMonth, iYear: year },
            success: function (data, status) {
                //$("#AdaugaL").html("")
                $("#AdaugaL").html("");
                var wnd = $("#AdaugaL").data("kendoWindow");
                wnd.close();
                $("#GridProgramLucru").data("kendoGrid").dataSource.read();
                $("#GridProgramLucru").data("kendoGrid").refresh();
            },
            error: function (result) {
                debugger;
            },
        })
    }
</script>
P.S I attached a view of my calendar window. the get value from month selection is undefined.
Thank you.

Preslav
Telerik team
 answered on 26 May 2017
1 answer
932 views

Hello,

How can I get the selected month from a kendoCalendar??

i have this code behind:

$(function() {

var listaZile=[];
  var today = new Date();
    //data source
  var selectedDates = [today.getDate() ];

  //Calendar with multiselection
  initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});

function initCalendar(calendar, selectedDates, onUpdate) {
  var kendoCalendar = calendar.data('kendoCalendar');

  kendoCalendar.bind('navigate', function() {
    setTimeout(function() {
      updateCalendar(calendar, selectedDates);
    }, 0);
  });

  updateCalendar(calendar, selectedDates);

  calendar.on('click', function(event) {
    var cell = $(event.target).closest('td');
    var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);

    if (isClickedOnDayCell) {
      var date = dateFromCell(cell).getDate();
      var isDateAlreadySelected = selectedDates.some(function(selected) {
        return selected === date;
      });

      if (isDateAlreadySelected) {
        selectedDates.splice(selectedDates.indexOf(date), 1);

      } else {
        selectedDates.push(date);

listaZile.push(date); //this return days selected!!!
      }

      updateCell(cell, selectedDates);

      if (onUpdate !== undefined) {
        onUpdate();
      }
    }
  });
}


function updateCalendar(calendar, selectedDates) {
  calendar.find('td > a').parent().each(function(i, item) {
    var cell = $(item);

    if (isDayCell(cell)) {
      updateCell(cell, selectedDates);
    }
  });
}

function updateCell(cell, selectedDates) {
  var isCellSelected = selectedDates.some(function(selected) {
    return selected === dateFromCell(cell).getTime();
  });

  if (isCellSelected) {
    cell.addClass('selected');

  } else {
    cell.removeClass('selected');
  }
}

function isDayCell(cell) {
  return /^\d{1,2}$/.test(cell.find('a').text());
}

function dateFromCell(cell) {
  return new Date(convertDataValue(cell.find('a').attr('data-value')));
}

//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
  var regex = /\/(\d+)\//;
  var month = +date.match(regex)[1] + 1;

  return date.replace(regex, '/' + month + '/');
}

P.S I attached a view of my calendar window. the get value from month selection is undefined.

Thank you.

Preslav
Telerik team
 answered on 26 May 2017
1 answer
211 views

I want to include an active x object on a grid edit popup and it has an associated change event specified in jscript so I need to include the script for that. 

$(gridID).kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        editable: {
            mode: "popup",
            template: function(data){return getPopupTemplate(data) }
        },
etc....
 
function getPopupTemplate(data) {
    var s =
             '<object id="ChemistryQuery" codebase="MDL.Draw.Editor.dll#-1,-1,-1,-1" height="240" width="240" classid="CLSID:FCE57399-E34B-45ce-881B-5FDFF3583307" class="drawingbox" >' +
                '<param name="ShowHydrogens" value="False">' +
                '<param name="ChimeString" id="ChimeString" value="' + data.NEW_CHEMISTRY + '">' +
             '</object>' +
             '<input type="hidden" name="NEW_CHEMISTRY" class="form-control" id="NEW_CHEMISTRY" />' +
             '<input type="text" name="TEXT_DESCRIPTOR" class="form-control" id="TEXT_DESCRIPTOR" />' +
             '<script language="jscript">' +
                'function ChemistryQuery::ComStructureChanged(){ ' +
                    'if (ChemistryQuery.ChimeString) {' +
                        'NEW_CHEMISTRY.value = ChemistryQuery.ChimeString;' +
                    '}' +
                '}' +
             '</script>';
    return s;
}

 

However, this results in an error  stating the ChemistryQuery object can't be found.

I have done something similar to this on a dialog using Kendo UI for JSP and that works fine.

<kendo:dialog name="dialog" title="Enter Reaction Schema" closable="false" modal="true" close="onDrawerClose" visible="false" initOpen="initDialogFields"
        content='<div class="form-group">
                     <label for="description" class="col-md-3 control-label k-label">Description</label>
                     <input type="text" name="description" class="reactionSchemaWidth k-input" id="description" />
                     <span class="required">*</span>
                </div>
                <div class="form-group">
                     <object id="ChemistryQuery" codebase="MDL.Draw.Editor.dll#-1,-1,-1,-1" height="240" width="240" classid="CLSID:FCE57399-E34B-45ce-881B-5FDFF3583307" class="drawingbox">
                        <param name="ShowHydrogens" value="False">
                        <param name="ChimeString" id="ChimeString">
                     </object>
                </div>
                <div class="form-group">
                    <div class="error formerror" id="dialogError"><span> </span></div>
                </div>
                <div class="form-group">
                    <input type="hidden" name="molstructure" id="molstructure" />
                </div>
                <script language="jscript">
                    function ChemistryQuery::ComStructureChanged(){
                        if (ChemistryQuery.ChimeString) {
                            molstructure.value = ChemistryQuery.ChimeString;
                        }
                    }
                </script>'>
        <kendo:dialog-actions>
            <kendo:dialog-action text="Done" primary="true" action="validateDrawForm" />
            <kendo:dialog-action text="Cancel" />
        </kendo:dialog-actions>
    </kendo:dialog>

 

So there must be a difference in the rendering timing of the two approaches.  I've tried using the kendo.template but I couldn't get the syntax right because of the <script? tags.  I've also tried changing the content in a edit handler for the grid but this loses the bindings on the other input fields.

I realise you can't work with this because you don't have my active-x control but could you please suggest a way to insert this jscript at the appropriate time?

Jane
Top achievements
Rank 1
 answered on 26 May 2017
1 answer
128 views

Hello,

when using the mobile version of the mentioned views there seems to be some calculation error when trying to select time slots. The calendar is configured with create disabled but selection enabled, so that the user can touch a time slot to select it. When the area to the left of the time slots (groupings, allday-label, etc) has certain widths, some days of the week becomes unselectable. Instead, the day before gets selected.

I have dug into the problem and seen that in these cases, the right edge of the time slot before is one pixel greater than the left edge of the time slot touched. Furthermore, the touch event gets rounded to the leftmost value of the touched time slot. This makes the select criteria to evaluate as true for both slots, and the "first" of them will be selected.

The problem is experienced on an iPad in portrait orientation, but it is possible that other resolutions is affected as well. 

Here is a more descriptive example of what happens, the slots is represented with || and the numbers are the coordinates of the egdes:

|| 100                                 210||209                             300||300                                       410||

When selecting the second time slot, the touch is rounded to 209, which will is considered inside the span of 100 <= 209 < 210, and the first slot is selected.

Some floating point error at play here perhaps?

Sorry for the long post, hope that it was helpful though.

Best regards.

Dimitar
Telerik team
 answered on 26 May 2017
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?