Setting initial value of custom editor in Grid edit event not updating server data

[Jason]

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

[Rosen]

Hi Jason,

The easiest way to set default value in this case will be to modify the Model instance using its set method. For example:

 

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.model.set("Number", nextNum);
        e.model.set("MaleRank", nextNum);
        e.model.set("FemaleRank", nextNum);
    }
}

Regards,
Rosen
Telerik

[Jason]

Thanks Rosen, that's exactly what I was looking for!

Jason

[Chris]

HI

I have test and found that [Required] annotation will cause default value not works : 

[Required]
public string FemaleRank { get; set; }

NOT WORKS 

  e.model.set("FemaleRank", nextNum); 

*Telerik DevCraft R2 2017 SP1.

Best regards

Chris

 

 

[Alex Hajigeorgieva]

Hello, Chris,

The Kendo UI Model defaultValue is used when a new model is created. This is described in our documentation at:

https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/define

Here is a sample Dojo demonstrating the expected behaviour:

https://dojo.telerik.com/@bubblemaster/UgeVuseC/2

Let me know in case I have misunderstood the scenario.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Neil]

Hello,

Can I just follow on this thread?

I have this column(which is a foreign key),

  {
     field: "company.companyId",
     title: "Company", editor: customCompanyEditor, template: "#=company.companyName#"
  },

 

the editor is a dropdownlist, what i wanted to achieve is when the user clicks the "Add New",
the editor will display a defaultValue. For example, if the model has 

{
    company: {defaultValue:{companyId: 3, companyName: "Westend" }}
}

when the user clicks the Add or Edit button, i want to set the dropdown the value.
does it make sense?

[Alex Hajigeorgieva]

Hi, Neil,

You can achieve the desired result but in this case when the value is not the object (the entire Company) but the underlying id field , you would need to set the editor to autoBind:true (default) so it can display the text:

https://dojo.telerik.com/@bubblemaster/AcAxoqan/2

Kind Regards,
Alex Hajigeorgieva
Progress Telerik