kendo grid MVVM pop-up Edit

4 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    139 posts
    Member since:
    May 2015

    Posted 31 May 2018 Link to this post

    Hello, i have mvvm grid with popup mode . In pop-up add/edit mode , ID column which is hidden in data-column declaration shows up in pop-up Add/Edit Window of grid and ExpiryDate which is type:date 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" i want to be hidden in Popup Add/Edit mode and set default ID value for new item to be 0
    2) For ExpiryDate , editor should be DatePicker in Popup Add/Edit mode
    3) I want to mask in CardNumber : showing "#" in all number only showing last 4 digit.
    4) OriginalCardNumber has credit card number , 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();
            },
    });




  2. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 04 Jun 2018 Link to this post

    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:


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


    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Neeraj
    Neeraj avatar
    139 posts
    Member since:
    May 2015

    Posted 06 Jun 2018 Link to this post

    For DatePicker Editor in Add/Edit Mode , i have already declared following code in schema:

    ExpiryDate: { type: "date" },

    still it shows textbox on Add Operation.? 
  4. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 06 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top