Grid column Select() to bool model property

[Miroslav]

Hello I use in my form grid where I want to have checkbox selection.

I'm still lost how to bind selected row to model property "bool PrintOP"

Here is my .cshtml

div class="table-responsive">
                @(Html.Kendo().Grid(Model.ProdOrderLines)
                .Name("#grid")
                .Editable(editable => {
                    editable.Mode(GridEditMode.InCell);
                })
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .Model(m =>{
                    m.Id(id=>id.ProdOrderLineId);
                    m.Field(id=>id.PrintOP);
                    m.Field(id=>id.OperationNumber).Editable(false);
                    m.Field(id=>id.OperationName).Editable(false);
                    m.Field(id=>id.Machine).Editable(false);
                    m.Field(id=>id.Recipe1).Editable(false);
                    m.Field(id=>id.Recipe1C).Editable(false);
                    m.Field(id=>id.Recipe2).Editable(false);
                    m.Field(id=>id.Recipe2C).Editable(false);
                    m.Field(id=>id.Recipe3).Editable(false);
                    m.Field(id=>id.Recipe3C).Editable(false);
                    
                }))
                .Columns(c=>{
                    c.Bound(c=>c.ProdOrderLineId).Hidden(true)
                        .ClientTemplate("#= ProdOrderLineId # <input type='hidden' name='ProdOrderLines[#=index(data)#].ProdOrderLineId' value='#= ProdOrderLineId #' />");
                    c.Select().Width(50);
                    c.Bound(c=>c.OperationNumber).Width(50);
                    c.Bound(c=>c.OperationName).Width(100);
                    c.Bound(c=>c.Machine).Width(100);   
                    c.Bound(c=>c.Recipe1).Width(100);
                    c.Bound(c=>c.Recipe1C).Width(100);
                    c.Bound(c=>c.Recipe2).Width(100);
                    c.Bound(c=>c.Recipe2C).Width(100);
                    c.Bound(c=>c.Recipe3).Width(100);
                    c.Bound(c=>c.Recipe3C).Width(100);
                })
                .Editable(ed => ed.Mode(GridEditMode.InCell)))
              <br />
              <br />
            </div>

What I would like to have is when user select row  change model property "PrintOP" to true or false for corresponding ProductLine[x]

I hope there is some solution?

Here is also model used in Form

public classOrderDetailViewModel
    {
        public string OrderID { get; set; }    
        public string  ProductName { get; set; }
        public float OrderLength { get; set; }
        public int COL { get; set; }=0;      
        public float CalcLength { get; set; }=0;
        public float RemainingPaste { get; set; }=0;
        public List<ProdOrderLineViewModel> ProdOrderLines {get;set;}
    }

 public classProdOrderLineViewModel
    {
        public int ProdOrderLineId { get; set; }
        public int OperationNumber { get; set; }
        public string OperationName { get; set; }
        public string Machine { get; set; }
        public string Recipe1 { get; set; }="";
        public string Recipe1C { get; set; }="";
        public string Recipe2 { get; set; }
        public string Recipe2C { get; set; }
        public string Recipe3 { get; set; }
        public string Recipe3C { get; set; }

        public bool PrintOP { get; set; }=false;

    } 

Many THX in advance for your help.

BR Mirek

[Alexander]

Hi Miroslav,

Thank you for the provided information and code snippets.

You can achieve the desired result using an approach similar to this knowledge base article:

• Get the Selected Grid Rows Data

And further, modify it to meet your requirements by implementing the following steps:

• Subscribe to the Change event of the Grid:

.Events(e => e.Change("onChange"))

• Enable the Persist Selection option in order for the rows to stay persisted when performing data operations

.PersistSelection(true)

• Within the event handler, obtain the currently selected data items and change the required field value using the .set() method:

<script>
        function onChange(e){
          var grid = e.sender;  //get the grid's reference
          var rows = grid.select(); //get the currently selected rows
          
          rows.each(function(e) {
            var dataItem = grid.dataItem(this); //get the current dataItem
            if(dataItem){
                dataItem.set("Discontinued","true");
            }
          });
        }
</script>

Here is a Telerik REPL example that illustrates this approach.

I hope this helps.

Regards,
Alexander
Progress Telerik