Use switch as cell template in kendo grid

• https://dojo.telerik.com/EheFilEF/10

• https://dojo.telerik.com/EheFilEF/2

• https://dojo.telerik.com/EheFilEF/3

Hi Barry, 

I am not familiar with implementation on asp.net core, but basically, I did exactly what was suggested by Viktor. 

function onChange(e) {
    var checked = e.checked;
    var row = e.sender.element.closest("tr");
    var grid = $('#myGrid').data('kendoGrid');
    var dataItem = grid.dataItem(row);
    if (checked) {
        addItem(dataItem);
     } else {
        removeItem(dataItem);
     }
}

Basically, you assign HTML template to the column you want and then on databound event you actually add switch widget to that element. 

Something like:

template: function (item) {
return '<input class="switchInGrid" id="' + item.switch_name + '" type="checkbox"' + (item.checked ? 'checked="checked"' : '') + '/>';
}

and then in databound you create switch to that element (I created function for this).

createSwitch(this.tbody.find(".switchInGrid"));

function createSwitch(element) {
element.kendoMobileSwitch({
onLabel: localeService.tr('yes'),
offLabel: localeService.tr('no'),
change: onChange
});
}

Hi Vedad,

Thanks for your reply. That is the solution I ended up with, more or less; simply adding a checkbox in to the template and then calling kendoSwitch from javascript later.

If it helps anyone, here is the razor cshtml excerpt:

@(Html.Kendo().Grid(MyListOfUsers)
.Name("grid")
.Columns(columns =>
{
    columns.Bound(c => c.UserName);
    columns.Bound(c => c.IsInRole);
})
.ClientRowTemplate(
"<tr data-myuserid='#:data.UserId#' role='row'>" +
"<td role='gridcell'>#:data.HankUserName#</td>" +
"<td role='gridcell'>" +  
"<input id='swIsInRole_#:data.UserId#' type='checkbox' value='true' # if(data.IsInRole == true) {# checked #} # />"+
"</td>" +
"</tr>"
))

<script>
    kendo.syncReady(
        function () {
            $("[id^='swIsInRole_']").kendoSwitch({
                change: function (e) {
                    console.log(e.sender.element[0].id);
                }
            });
        }
    );
</script>

Hello Vaibhav,

Thank you for the provided dojo.

The reason the row is flickering is because the dataSource is being synced automatically when the switch status is changed and the row is re-rendered. You can disable the automatic sync by commenting out/removing the following lines of code:

function onChange(e) {
          var row = e.sender.element.closest("tr");
          var grid = $("#grid").getKendoGrid();
          var dataItem = grid.dataItem(row);
          var checked = e.checked;

          dataItem.set("Discontinued", checked);

          // sync data with remote service
          grid.dataSource.sync();
        }

However in this case you would need to manually call the sync method after you've finished editing the rows. Otherwise the changes won't be saved. You would also have to manually set the dirty flag to true when changing the value of the Discontinued column:

function onChange(e) {
          var row = e.sender.element.closest("tr");
          var grid = $("#grid").getKendoGrid();
          var dataItem = grid.dataItem(row);
          var checked = e.checked;

          dataItem.Discontinued = checked;
          dataItem.dirty = true;
        }

Best Regards,
Georgi Denchev
Progress Telerik

Hi, 

In one of my scenario, I am binding my grid like 

@(Html.Kendo().Grid(Model).DataSource(dataSource => dataSource

.Ajax() .Read(r => r.Action("GridBind", "Home"))

And in GridBind function in home controller, some error came and we want to log in the user again... from login.microsoftonline.com..

when I write return new ChallengeResult(OpenIdConnectDefaults.AuthenticationScheme).. it is giving cors issue..

I have added below code in start up file

//services.AddCors(options =>
//{
// options.AddPolicy("CorsPolicy", builder => builder.WithOrigins("http://localhost:123")
// .AllowAnyHeader()
// .AllowAnyMethod()
// .AllowCredentials()
// .SetIsOriginAllowed((host) => true));
//});

app.UseCors("CorsPolicy");

But it is not redirecting to the login.microsoftonline page?

Can you guide me here what I am missing.

I am binding grid using Ajax? Can you tell me what I can pass in Ajax or How to resolve this issue

Thank you, Vaibhav

Hi Vaibhav,

The DataSource.Ajax.Read method expects the Action to return a Json result with the applied request parameters:

public ActionResult GridBind([DataSourceRequest] DataSourceRequest request) {
    var myData = GetDataFromDb();
    return Json(myData.ToDataSourceResult(request));
}

More information on Ajax binding can be found in the following article: Ajax Binding.

CORS errors are usually related to the application configuration itself rather than Kendo. You can read up more on the topic here.

Best Regards,
Georgi Denchev
Progress Telerik

Hi, I am using kendoMobileSwitch to create a toggle button in a grid. we are using below library with version:

jQuery: 3.4.1

kendo-ui: 2019.1.115

Now, we are updating kendo-ui to 2020.2.617 and jQuery to 3.5.1. After updation kendoMobileSwitch is not working. 

Can you please suggest, how we can resolve this issue.

Hi, Vaibhav,

Could you please provide a small dojo sample where the faulty behavior can be observed so I can debug it locally?

I should be able to provide you with a more appropriate response after that.

I'll be looking forward to your reply.

Best Regards,
Georgi Denchev
Progress Telerik

There was some css class name changes, with the latest version and I identified that and corrected it.

Thanks