Telerik Forums
Kendo UI for jQuery Forum
3 answers
561 views
Hello, have  grid with popup  In pop-up add/edit  ID column which is hidden in data-column declaration shows up in pop-up Add/Edit Window of grid and ExpiryDate which is type in DataSource schema its editor is coming as Textbox, i want to replace by DateTime picker.

I want to resolve following things.
1) Some fields like "ID"  want to be hidden in Popup Add/Edit mode and set default ID value for item to be 0
2) For should be DatePicker in Popup Add/Edit mode
3) I want to mask in showing "#" in all number only showing last 4 .
4) OriginalCardNumber has credit card is there any way by which we can calculate OriginalCardNumber to Masked CardNumber for value in CardNumber field

here is the code:

<div data-role="window" id="ImportPNRCreditCardPricingSettlementWindow"
         data-animation="false"
         data-title="Card Details" data-modal="true"
         data-visible="false" data-bind="visible: isCreditCardCRUDWindowVisible, events:{open: OnImportPNRCreditCardWindowOpened}">
        <div data-role="grid" id="ImportPNRCreditCardGrid" data-editable='{"mode" : "popup", "confirmation" : "Are you sure you want to delete this Item?"}' data-toolbar="['create']"
             data-columns='[
            { "field": "ID",hidden: true },
            {"field": "lkpTypeName", hidden: true },
            {"field": "CardName", title:"Name"},
            {"field": "CardNumber", title:"CardNumber"},
            {"field": "OriginalCardNumber", hidden: true },
            {"field": "ExpiryDate", title:"Expiry Date"},
            {"field": "IssuingCompany", title:"Issuing Company"},
            {"field": "BillingEmail", title:"Billing Email"},
            {"field": "ValidFrom", title:"Valid From"},
             { command: ["edit", "destroy"], title: " ", width: "250px" }
             ]'
             data-bind="source: UserDefinedCreditCardDS" ></div>


Script:

function ImportPNRCreditcardDS() {
     new kendo.data.DataSource({
        data: [],
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { type: "number" },
                    lkpTypeName: { type: "string" },
                    CardName: { type: "string" },
                    CardNumber: { type: "string" },
                    OriginalCardNumber: { type: "number" },
                    ExpiryDate: { type: "date" },
                    IssuingCompany: { type: "string" },
                    BillingEmail: { type: "string" },
                    ValidFrom: { type: "date" },
                    CreditCardType: { type: "string" },
                    CreditCardCategory: { type: "string" }
                }
            }
        }
    });
}

 

Inside ViewModel , a property is declared:

var testVM= kendo.observable({
UserDefinedCreditCardDS: function(e) {
            return ImportPNRCreditcardDS();
        },
});




Georgi
Telerik team
 answered on 06 Jun 2018
1 answer
1.2K+ views

Hi, I have a problem on Kendo Grid with a field that has a lot of text to show in a column only, so I thought to show it as row, as it's displayed in attached image.
The problem, is that when grouping any column, it doesn't work correctly, it's displayed in the following example.
Is there any workaround or feature about that?

  <div id="grid"></div>
<script>
$("#grid").kendoGrid({
    groupable: true,
    columns: [
    {
      title: "Name",
      field: "name"
    },
    {
      title: "Birthdate",
      field: "birthdate"
    },
    {
      title: "City",
      field: "city"
    },
    {
      title: "Country",
      field: "country"
    },
    {
        title: "Phone",
        field: "phone"
    },
    {
      hidden: true,
      title: "Descripcion",
      field: "descrip"
    }
  ],
  editable: true,
  dataBound: function (e) {
        dataBoundGridMain(e)
  },
  dataSource: [
    { name: "Jane Doe", birthdate: new Date("1995/05/04"), city: "London", country: "UK", phone: "555-444-333", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et leo tellus." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "Londo", country: "UK", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "New York", country: "USA", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." }
  ]
});
   
  function dataBoundGridMain(e){
    var kendoGrid = e.sender;
    var rows = kendoGrid.tbody.children();
    var dataItem = null;
    var rowElement = null;
    var dataRowGrid = kendoGrid.dataItems();
    var rowLen = dataRowGrid.length, index = 0;
     
    console.log("test")
     
    for (index; index < rowLen; index++) {
      rowElement = rows[index];
      dataItem = dataRowGrid[index];
        if (dataItem.hasOwnProperty('descrip')) {
        addDescriptionTextNewRow(kendoGrid, dataItem, $(rowElement));
      }
    }   
  }
   
  function addDescriptionTextNewRow(kendoGrid, dataItem, rowElement){
    var rowsElement,
        title,
        value,
        colsNumber,
        rowRender;
 
    if (dataItem.hasOwnProperty('descrip')) {
        title = 'Description';
        value = dataItem.descrip;
    }
    colsNumber = kendoGrid.columns.length
    rowsElement = "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:12px DroidBold; text-align: left; border-bottom:1px; height: 8px; padding:5px 0 0 5px;' >" + title + "</td></tr>";
    rowsElement += "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:Arial 10px; text-align: left' >" + value + "</td></tr>";
    rowRender = $(rowsElement);
    rowElement.after(rowRender[1]);
    rowElement.after(rowRender[0]);
  }
   
</script>
Stefan
Telerik team
 answered on 06 Jun 2018
2 answers
262 views

Hi , i am new to KendoGrid and have few questions . could you please provide your valuable input on this as i am not able to find the correct solution for below.

 

#1 - I am aware of custom validation , but is it possible to attach on-fly pattern check while editing  the cell value , if the value doesn't match with pattern the value should be discarded automatically  similar to inbuilt numeric check when we define type=numeric and try to provide character. 

#2 - i need some conversion while editing , such as lowercase to uppercase OR expand abbreviation such as 1k to 1000 ( k stand for 1000) . where i need to place this logic . Editor or Edit event ?

 

 

Eyup
Telerik team
 answered on 05 Jun 2018
3 answers
250 views
Hello,
            I have  inside Promise function that makes the accessibility  I have a grid and column has which is Kendo DropDownList. 
I wanted functionality like in this http://jsbin.com/judagiroyi/edit?html,js,output  but since my is not global cannot directly write editor code as below in grid:


data-columns='[{"field": "SettlementType", template: kendo.template($("\\#ImportPNRSettlementTypeTemplate").html()),
              editor: viewModel.ImportPNRSettlementTypeEditor, title: "Settlement Type"
             }
]'

it shows some error pointing to kendo script which is not correct and which means ImportPNRSettlementTypeEditor is not accessible. if i declare JavaScript with  function ImportPNRSettlementTypeEditor    and make  editor: ImportPNRSettlementTypeEditor  it works. What to do if want editor in my model? 
Tsvetina
Telerik team
 answered on 05 Jun 2018
1 answer
234 views

Hi,

I run the demo from https://demos.telerik.com/aspnet-mvc/grid/editing-popup and having error: System.ArgumentException: 'Value cannot be null or empty.
Parameter name: name. It was during the first initial (controller not hit). MVC 5 application.

If I change GridEditMode.PopUp to GridEditMode.InCell or InLine then Grid works fine. Is it some setup problem? Is there any scripnt needs to be included in bundle in case of GridEditMode.PopUp?

Here is the Grid code:

@(Html.Kendo().Grid<OnTargetInv.Models.EmailAddress>()
.Name("GridEmails")
.Columns(columns =>
{
columns.Bound(p => p.Email);
columns.Bound(p => p.EmailAddressID).Width(140).Hidden();
//columns.Bound(p => p.InactiveDate).Width(140);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.EmailAddressID))
.Create(update => update.Action("EditingPopup_Create", "Client"))
.Read(read => read.Action("EditingPopup_Read", "Client"))
.Update(update => update.Action("EditingPopup_Update", "Client"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Client"))
)
)

Thanks.

Georgi
Telerik team
 answered on 05 Jun 2018
1 answer
3.1K+ views

Hello,

https://dojo.telerik.com/@alexy99/acOsisiF

On Add task sometimes I get below, sometimes: Maximum call stack exceeded. As per below post I tried defaultValue for parentId but no go.

https://www.telerik.com/forums/error-when-the-data-type-of-the-id-and-parentid-to-string

Uncaught TypeError: Cannot read property 'data' of undefined

    at init.setup (kendo.all.min.js:27)
    at init.create (kendo.all.min.js:27)
    at Object.<anonymous> (kendo.all.min.js:28)
    at Function.Deferred (jquery-1.12.3.min.js:2)
    at init._promise (kendo.all.min.js:28)
    at init._send (kendo.all.min.js:28)
    at init.sync (kendo.all.min.js:27)
    at init._syncDataSource (kendo.all.min.js:85)
    at init._createTask (kendo.all.min.js:84)
    at init.r (kendo.all.min.js:84)

Dimitar
Telerik team
 answered on 05 Jun 2018
30 answers
1.3K+ views
Hi,

When using the Grid with remote datasource and virtual scrolling, the grid often fires 2 or more of the same read request, when scrolling by either mousescroll or dragging the scrollbar. 

I reproduced the error with your demo at: http://demos.kendoui.com/web/grid/virtualization-remote-data.html 
The problems exists in the newest Firefox, Chrome and IE9 (on windows). 
Attached is screenshots of FF and IE9, where it illustrates multiple server requests for the same "page".

The easiest way to reproduce the error is scroll as fast as possible.

Let me know if you need more examples.
Stamo Gochev
Telerik team
 answered on 05 Jun 2018
5 answers
1.0K+ views

Hello,

I am using a kendo UI dropdownlist bound using remote data. I have followed the example using the no data template to add a new item using the text entered on search. However, I am now wondering if it is possible to customise the no data template so that when adding a new item it's possible to capture more information that just the item value i.e. the text from search fields. I would be aiming to display a few text fields and use these to insert data on the back end. I tried adding them however the text fields seem to be disabled and I'm not sure where I've gone wrong or if it's possible?

 

Many thanks

 

 

roy
Top achievements
Rank 1
 answered on 05 Jun 2018
7 answers
1.4K+ views
I am trying to use the window widget to open http://google.com for example and display in the center of the page. I tried the code below, but it does not do anything (no errors either). I also tried adding it to an existing element on the page, $('#window'), but displays a blank white window.

$('<div />').kendoWindow({
  content: 'http://google.com',
  iframe: false,
  modal: true
}).data('kendoWindow').center();

I would like to use it similar to how the AJAX RadControl Window is used: http://demos.telerik.com/aspnet-ajax/window/examples/default/defaultcs.aspx

Any help would be greatly appreciated!
Ivan Danchev
Telerik team
 answered on 05 Jun 2018
5 answers
1.4K+ views

Hi,

From what I've read, requestEnd fires at the end of the request to signal that the operation is completed.

First, in case the error event of DataSource is fired, will the requestEnd also fire?

Also, in case there are records created and others updated, DataSource will fire two requests to server (batch mode), one for creation and another for updating. requestEnd fires twice in this case? Or just once, after both requests have been updated? 

 

Regards

Bilal

Ivan Danchev
Telerik team
 answered on 05 Jun 2018
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?