This is a migrated thread and some comments may be shown as answers.
Simple problem with clienttemplate and checkbox
10 Answers 85 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Fred
Top achievements
Rank 1
Fred asked on 01 Jan 2012, 03:18 PM

Hi.  I am having the hardest time binding a checkbox properly with the grid.

When i first launch the view, i get the proper info in the checkbox column.

However as soon as i do a client side operation ( suck a paging) i lose my values and formatting (checkbox becomes writable, not readonly)

Anyone can help ?

Thanks

 

Html.Telerik.Grid(Model).Name("Grid") _
  
.ColumnContextMenu() _
  
.DataKeys(
 
 
Sub(keys)
  
keys.Add(
 
 
"Id")
  
 
 
 
End Sub) _
  
.ToolBar(
 
 
Sub(commandes)
  
commandes.Insert.ButtonType(type).ImageHtmlAttributes(
 
 
New With {.style = "margin-left:0"})
  
 
 
 
End Sub) _
  
.DataBinding(
 
 
Sub(databinding)
  
databinding.Ajax() _
  
.Select(
 
 
"_AjaxIndex", "CommandesProgres") _
  
.Insert(
 
 
"_InsertAjaxEditing", "CommandesProgres") _
  
.Update(
 
 
"_AjaxEdit", "CommandesProgres") _
  
.Delete(
 
 
"_DeleteAjaxEditing", "CommandesProgres")
  
 
 
 
End Sub) _
  
.Columns(
 
 
Sub(column)
  
column.Bound(
 
 
"Code").Width(50)
  
column.Bound(
 
 
"Description").Width(100)
  
column.Bound(
 
 
Function(col) col.ParDefaut).Width(50).HtmlAttributes(New With {.style = "text-align: center;"}).ClientTemplate("<input type='checkbox' disabled='disabled' name='checkbox' value=<#= ParDefaut #> />")
  
column.ForeignKey(
 
 
Function(col) col.TpId, ViewBag.typeProgress, "Id", "Description").Width(100)
  
column.ForeignKey(
 
 
Function(col) col.CtId, ViewBag.commandesTypes, "Id", "Description").Width(100)
  
column.Command(
 
 
Sub(commandes)
  
commandes.Edit.ButtonType(type)
  
commandes.Delete.ButtonType(type)
  
 
 
 
End Sub).Width(30).Title("Commands")
  
 
 
 
End Sub) _
  
.Editable(
 
 
Function(ee) ee.Mode(mode)) _
  
.Pageable _
  
.Scrollable _
  
.Sortable() _
  
.Filterable _
  
.ClientEvents(
 
 
Function(events) events.OnRowDataBound("onRowDataBound")).Render()
  
 
 
 
 
 
 
End Code
  
 
  
<
 
 
 
script type="text/javascript">
  
 
 
 
function onRowDataBound(e) {
  
 
 
 
var dataItem = e.dataItem;
  
 
 
 
var $checkbox = $(e.row).find(':checkbox');
  
$checkbox.val(dataItem.ParDefault);
  
 
 
 
if (dataItem.ParDefault) {
  
$checkbox.attr(
 
 
'checked', true);
  
}
  
}
  
</script>

 

10 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 02 Jan 2012, 03:01 PM
Hello Fred,

When you are passing a collection to the constructor of the Grid it seems the initial binding is done correctly.
I assume that the behavior you described is caused by the JavaScript function handling the OnDataBoundEvent and the client template using the client expression. A common problem is that the type of the Boolean property is considered as String. You can try to check the value like this:
 
if (dataItem.ParDefault=='true') {
//...

I hope this helps.

All the best,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 03:19 PM
thanks for the suggestion.

I tried what you suggested and i still get the same problem.

First load... i get the value et state of checkbox as i want it, i.e with value and disabled.

after paging, checkbox has no values in it.  All is false



<script type="text/javascript">
    function onRowDataBound(e) {

        var dataItem = e.dataItem;

        var $checkbox = $(e.row).find(':checkbox');

        $checkbox.val(dataItem.ParDefault);

        if (dataItem.ParDefault=='true') {

            $checkbox.attr('checked', true);

        }

    }
</script>

my binding code is:

    column.Bound(Function(col) col.ParDefaut).Width(50).HtmlAttributes(New With {.style = "text-align: center;"}).ClientTemplate("<input type='checkbox' disabled='disabled' name='checkbox' value=<#= ParDefaut #> />")
                
0
Petur Subev
Telerik team
answered on 02 Jan 2012, 03:34 PM
Hello Fred,

In order to assist you I will need a sample isolated project showing your current logic and setup, so I can check what causes this behavior.
Thank you for the understanding and cooperation.

Regards,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 03:45 PM
the entire zipped project is 10 megs.. without my database....

i will refactor try to make a small project without dataaccess that has the same problem and post it here a little bit later
0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 04:20 PM
OK   i removed all database access and only left the important stuff

http://localhost:38525/CommandesProgres# is the problem page

project is there

http://dl.dropbox.com/u/50972513/TelerikTest.rar

thanks
0
Petur Subev
Telerik team
answered on 02 Jan 2012, 04:48 PM
Hi Fred,

The problem is caused by a typo in your statement:
  • ParDefaut  is used into your model
  • ParDefault is used in the JavaScript function

Also you can use the our Ticketing system once you have logged in.


All the best,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 07:07 PM
Thanks for your quick reply.
I changed from
ParDefault to 
ParDefaut

but it still doesnt work on my end.

Does it work on your side...
however, when i changed

if (dataItem.ParDefaut == 'true')

to

if (dataItem.ParDefaut)

it started working :)

i guess when you have never done something right one time, its hard to know how close you are

Thanks a lot

last thing i need to figure out is if i have more than one checkbox, how i repeat the javascript logic to treat all of them... my javascript knowledge being what it is, i should find it before 2013 ;)

0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 07:38 PM
yeah.. this doesnt work

 

 

<

 

 

script type="text/javascript">

 

function onRowDataBound(e) {

 

var dataItem = e.dataItem;

 

var $checkbox = $(e.row).find(':checkbox');

$checkbox.val(dataItem.ParDefaut);

 

if (dataItem.ParDefaut) {

$checkbox.attr(

 

'checked', true);

}

 

var $checkbox2 = $(e.row).find(':checkbox');

$checkbox2.val(dataItem.PourProducteur);

 

if (dataItem.PourProducteur) {

$checkbox2.attr(

 

'checked', true);

}

 

}

</

 

 

script>

i am still pretty green in javascript, sadly...

0
Fred
Top achievements
Rank 1
answered on 02 Jan 2012, 11:05 PM
THIS WORKS!!!

<

 

 

script type="text/javascript">

 

function onRowDataBound(e) {

 

var dataItem = e.dataItem;

 

// var $checkbox = $(e.row).find(':checkbox');

 

var $chkParDefaut = $(e.row).find('#chkParDefaut');

 

var $chkPourProducteur = $(e.row).find('#chkPourProducteur');

 

var $chkPourDistributeur = $(e.row).find('#chkPourDistributeur');

 

var $chkFermeLaCommande = $(e.row).find('#chkFermeLaCommande');

 

 

 

 

 

 

if (dataItem.ParDefaut) {

$chkParDefaut.attr(

 

'checked', true);

}

 

if (dataItem.PourProducteur) {

$chkPourProducteur.attr(

 

'checked', true);

}

 

if (dataItem.PourDistributeur) {

$chkPourDistributeur.attr(

 

'checked', true);

}

 

if (dataItem.FermeLaCommande) {

$chkFermeLaCommande.attr(

 

'checked', true);

}

 

 

 

}

</

 

 

script>

0
Christoph Weber
Top achievements
Rank 1
answered on 26 Jan 2012, 03:16 PM
Congratulation to your solution, but...

i don't think this is a good one. In my opinion it should be able to bind checkboxes directly.

@(
 Html.Telerik().Grid(Model.AngebotStichtage)
 .Name("gridAngebotStichtag")
 
 .Columns(columns =>
 {
       columns.Bound(x => x.SomeDateTimeValue).Title("This one works great!").Format("{0:d}");
       columns.Bound(x => x.SomeBooleanGuy).Title("This one doesnt...");  
 })

 .DataBinding(dataBinding => dataBinding.Ajax().Select("TGridGetFu", "ControllerName"))
 .Pageable(paging => paging.PageSize(10))
 .PrefixUrlParameters(true)
 .Localizable("de-DE")
)

Problem here is that i need to sort the grid. I found examples with working checkboxes, but the examples sorted via postback and thats no possible way because our grid is inside a modal dialogue. The behaviour is the following:
First load shows the checkboxes just fine, but after any client-side action (paging etc...) we get a "true" or "false" instead of a checkbox.

So please Telerik provide a solution WITHOUT workaround (we already did a workaround by encapsulating the bool with a string that returns bool ? "yes" : "no"...) or add this feature into your product.

kind regards,
Tags
Grid
Asked by
Fred
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Fred
Top achievements
Rank 1
Christoph Weber
Top achievements
Rank 1
Share this question
or