[Solved] kendo grid MVVM pop-up Edit

[Neeraj]

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]

Hi Neeraj,

We apologize for the delay in our response.

Straight to your questions:

1. You can remove certain field from the popup editor within the edit event handler and set the default value within the dataSource.schema.model configuration.

e.g.

// edit event handler

function hideIdField(e) {
   $("[name='ID']").hide();
   $("label[for='ID']").hide();
}

// model configuration

 schema: {
                model: {
                    id: "ID",
                    fields: {
                      ID:{type:'number', defaultValue: 0},
                     ...
                    }
                }
            }

2. I assume that the requirement is to use DatePicker editor for a certain field. Please correct me if I am wrong. A possible solution is to configure the model and explicitly specify that the field is of type Date. This way the grid will treat the value as a date and it will generate a date picker editor automatically.

e.g.

ExpiryDate: { type: "date" },

Furthermore, It is possible to create a custom editor as shown in the demo below:

• https://demos.telerik.com/kendo-ui/grid/editing-custom

Below you will find a sample which demonstrates both the above suggestions:

• https://dojo.telerik.com/iZESewOy

Regarding the queries from point 3 and 4, I am not sure that I fully understand the requirements. Could you please provide me with a little more detailed information about the expected final result? 

Thanks in advance for your understanding and cooperation.

I look forward to your reply.


Regards,
Georgi
Progress Telerik

[Neeraj]

For DatePicker Editor in Add/Edit have already declared following code in :

ExpiryDate: { type: "date" },

it shows textbox on Add Operation.? 

[Georgi]

Hi Neeraj,

The ImportPNRCreditcardDS function creates a dataSource but does not return anything. Therefore null is set as a dataSource of the grid. Please modify it to return the dataSource and let me know if the issue still occurs.

e.g.

function ImportPNRCreditcardDS() {
   return 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" }
                }
            }
        }
    });
}

Regards,
Georgi
Progress Telerik