This is a migrated thread and some comments may be shown as answers.

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

6 Answers 413 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 22 Aug 2013, 07:39 PM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 26 Aug 2013, 10:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
answered on 26 Aug 2013, 02:26 PM
Thanks Rosen, that's exactly what I was looking for!

Jason
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 11 Oct 2018, 01:49 PM

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

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 15 Oct 2018, 10:52 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Neil
Top achievements
Rank 1
answered on 09 Mar 2020, 10:32 AM

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?

0
Alex Hajigeorgieva
Telerik team
answered on 11 Mar 2020, 08:44 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Jason
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Veteran
Iron
Alex Hajigeorgieva
Telerik team
Neil
Top achievements
Rank 1
Share this question
or