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

Telerik grid With Checkboxes in first Column

14 Answers 171 Views

Grid

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

This question is locked. New answers and comments are not allowed.

14 Answers, 1 is accepted

answered on 17 Aug 2011, 10:08 AM

Html.Telerik().Grid<MS.IT.HRE.Performance.CommitmentLibraryAdmin.CommitmentLibraryAdminModelComponent.

CommitmentTemplate>()

.Name(

"CommitmentTemplateDetailsGrid")

.Pageable(paging =>

paging.PageSize(50).

Total((

int)ViewData["TotalCount"]))

.EnableCustomBinding(

true)

.NoRecordsTemplate(

" ")

.ClientEvents(e => e.OnDataBinding(

"OnGridDataBinding"))

.ClientEvents(e => e.OnDataBound(

"OnGridDataBound"))

.Resizable(resizing => resizing.Columns(

true))

.Columns(columns =>

{

columns.Bound(a => a.errormessage)

.ClientTemplate(

"<input type='hidden' name='masterRow' value='<#= errormessage #>'/>")

.HeaderHtmlAttributes(

new { style = "text-align:center" })

.HtmlAttributes(

new { style = "text-align:center" })

.Filterable(

false)

.Hidden(

true)

.Sortable(

false);

columns.Bound(a => a.Id)

.HeaderTemplate(() => {%>

<input id="chkAll" type="checkbox" title="check all records" /> <%})

.ClientTemplate(

"<input type='checkbox' name='checkedRecords' value='<#= Id #>' Onclick='CheckAllUncheckOnAnyUncheck()' />")

.Title(

"Select")

.Width(50)

.HeaderHtmlAttributes(

new { style = "text-align:center" })

.HtmlAttributes(

new { style = "text-align:center" })

.Filterable(

false)

.Sortable(

false);

columns.Bound(a => a.Id)

.Title(

"ID")

.Encoded(

true)

.HeaderHtmlAttributes(

new { style = "text-align:center" })

.HtmlAttributes(

new { style = "text-align:center; font:Calibri; font-size:11px " })

.Sortable(

true)

.Filterable(

false)

.Width(50);

.DataBinding(dataBinding => dataBinding.Ajax().Select(

"_ManageCommitmentTemplate", "ManageCommitmentTemplate", new

{

id = (ViewData[

"SelectedPeriod"] != null) ? Convert.ToInt32(ViewData["SelectedPeriod"]) : -1,

ManagerFilter = ViewData[

"Manager"],

TcheckedNodes = ViewData[

"TreeView1_checkedNodesClient"],

Flag = 0,

Ids =

"",

state =

"",

Version =

}))

.Groupable(grp =>

grp.Enabled(

false))

.Scrollable(scrolling =>

scrolling.Height(440))

.Filterable(filtering =>

filtering.Enabled(

false))

.Sortable(sorting =>

sorting.SortMode(

GridSortMode.SingleColumn))

.Render();

%>

For this Partiular code after upgrading during page load we are not able to See the checkboxes in the Grid.Please help me . IT is very urgent

answered on 17 Aug 2011, 02:14 PM

Hi Team,
When i tried to remove the Html Attributes and HeaderHTMl Attributes. it started working for me.
But Without these attributes the look and feel is going bad.
Could you Please tell us how in Latest version of telriks this can be used.

columns.Bound(a => a.errormessage)

.ClientTemplate(

"<input type='hidden' name='masterRow' value='<#= errormessage #>'/>")

//.HeaderHtmlAttributes(new { style = "text-align:center" })

//.HtmlAttributes(new { style = "text-align:center" })

Thanks & regards,
Shilpa

.Filterable(

false)

.Hidden(

true)

.Title(

"Error")

.Sortable(

false);

answered on 19 Aug 2011, 09:35 AM

Hi telerik team,

I am Stuck up with a very Important problem.
Please help me.
I have used a ASP.NET TELERIK treeview in my web page. And i have a javascript for Checking and Unchecking the Nodes when parent node is chekced and unched.
It used to work in Older version of Telerik . but after upgrading to 2011.2.712 version this feature is not working.
I want to Know did something got Changed in treeview.min.js value.

Code for your refernce.

@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MS.IT.HRE.Performance.Web.Models.CommitmentLibraryAdmin.ManageCommitmentTemplateViewModel>" %>

div style="height: 600px; overflow: scroll; width:249px;text-align:left;">

div style="font-family:Calibri; font-size:11px;"><input type="checkbox" id="selectall" checked="checked"/>  Select All</div>

using (Html.BeginForm())

{

List<TreeViewItem> checkedNodes = ViewData["TreeView1_CheckedNodes"] as List<TreeViewItem>;

Dictionary<String, object> dic = new Dictionary<string, object>();

dic.Add(

"id", "true");

= Html.Telerik()

.TreeView()

.HtmlAttributes(

new { style = "overflow:visible;font-family:Calibri; font-size:11px;" })

.ShowCheckBox(

true)

.Name(

"TreeView1")

.ClientEvents(events => events

.OnChecked(

"onChecked")

//.OnLoad("onLoad")

)

.BindTo(Model.Profesions, (item, profession) =>

{

item.Text = profession.Description;

item.Value = profession.ProfessionId.ToString();

item.LoadOnDemand = profession.Disciplines.Count > 0;

item.Checked =

true;

}).DataBinding(dataBinding => dataBinding.Ajax().Enabled(

true).Select("_AjaxLoading", "ManageCommitmentTemplate", new { periodid = Convert.ToInt32(ViewData["SelectedPeriod"]) }))%>

</div>

<% } %>

function () {

"#selectall").click(function () {

var checkAll = true;

if ($(this).is(":checked"))

{

var treeView = $('#TreeView1').data('tTreeView');

var allCheckboxes = $('#TreeView1').find("li").find('> div > .t-checkbox :checkbox');

$.each(allCheckboxes,

function (index, checkbox)

{

$(checkbox).attr(

'checked', checkAll ? true : false);

// treeView.checkboxClick("click", checkbox);

});

}

else

{

'#TreeView1').find("li").find('> div > .t-checkbox :checkbox').removeAttr("checked");

}

});

function treeView() {

return $('#TreeView1').data('tTreeView');

}

function ParseNodes(nodeItem) {

debugger;

var nodeValue = $('.t-checkbox :checkbox > .t-input:hidden', nodeItem)[0].attributes('value').value;

var nodeParts = nodeValue.split(':');

nodeObj =

new Object;

//Clicked on Profession

if (nodeParts.length == 1) {

nodeObj.Type =

'P';

nodeObj.ProfessionId = nodeParts[0];

nodeObj.DisciplineId =

null;

nodeObj.StandardTitleId =

null;

return nodeObj;

}

if (nodeParts.length == 2) {

nodeObj.Type =

'D';

nodeObj.ProfessionId = nodeParts[0];

nodeObj.DisciplineId = nodeParts[1];

nodeObj.StandardTitleId =

null;

return nodeObj;

}

if (nodeParts.length == 3) {

nodeObj.Type =

'S';

nodeObj.ProfessionId = nodeParts[0];

nodeObj.DisciplineId = nodeParts[1];

nodeObj.StandardTitleId = nodeParts[2];

return nodeObj;

}

return nodeObj;

}

function workOnParent(nodeObj, checked) {

if (nodeObj.Type == 'D') {

var checked = 0;

'> ul > li > ul > li > div > .t-checkbox > input[value*="' + nodeObj.ProfessionId + ':"]', treeView().element).each(

function (index, value) {

if (value.nextSibling.checked)

checked = 1;

}

)

;

if (checked == 1) {

var profession = $("> ul > li", treeView().element)[nodeObj.ProfessionId];

treeView().nodeCheck(profession,

true);

}

else {

var profession = $("> ul > li", treeView().element)[nodeObj.ProfessionId];

treeView().nodeCheck(profession,

false);

}

else if (nodeObj.Type == 'S') {

//check if all ST's are in same condition

var inputFilter = nodeObj.ProfessionId + ':' + nodeObj.DisciplineId;

var stChecked = 0

'> ul > li > ul > li > ul > li > div > .t-checkbox > input[value*="' + inputFilter.toString() + ':"]', treeView().element).each(

function (index, value) {

if (value.nextSibling.checked)

stChecked = 1;

}

)

if (stChecked == 1) {

var profession = $("> ul > li", treeView().element)[nodeObj.ProfessionId];

treeView().nodeCheck(profession,

true);

var discipline = $('> ul > li > ul > li > div > .t-checkbox > input[value="' + inputFilter + '"]', treeView().element)[0];

treeView().nodeCheck(discipline,

true);

}

else {

var discipline = $('> ul > li > ul > li > div > .t-checkbox > input[value="' + inputFilter + '"]', treeView().element)[0];

treeView().nodeCheck(discipline,

false);

//Check if all the disciplines are unchecked

var disChecked = 0;

'> ul > li > ul > li > div > .t-checkbox > input[value*="' + nodeObj.ProfessionId + ':"]', treeView().element).each(

function (index, value) {

if (value.nextSibling.checked)

disChecked = 1;

}

)

if (disChecked == 1) {

var profession = $("> ul > li", treeView().element)[nodeObj.ProfessionId];

treeView().nodeCheck(profession,

true);

}

else {

var profession = $("> ul > li", treeView().element)[nodeObj.ProfessionId];

treeView().nodeCheck(profession,

false);

}

function onChecked(e) {

var nodeObj = ParseNodes(e.item.innerHTML);

if (e.checked == false) {

"#selectall").attr('checked',false);

}

//Acted on Profession check boxes

if (nodeObj.Type == 'P') {

// Repeat the Action on Disciplines

"> ul > li > ul > li", treeView().element).each(

function (Index) {

var item = $("> ul > li > ul > li", treeView().element)[Index];

var nodesubObj = ParseNodes(item.innerHTML);

//Only those disciplines that are under select profession node.

if (nodesubObj.ProfessionId == nodeObj.ProfessionId)

treeView().nodeCheck(item, e.checked);

}

)

// Repeat the Action on STs

"> ul > li > ul > li > ul > li", treeView().element).each(

function (Index) {

var item = $("> ul > li > ul > li > ul > li", treeView().element)[Index];

var nodesubObj = ParseNodes(item.innerHTML);

//Only those STs that are under selected profession node.

if (nodesubObj.ProfessionId == nodeObj.ProfessionId)

treeView().nodeCheck(item, e.checked);

}

)

}

//Acted on Discipline check boxes

else if (nodeObj.Type == 'D') {

// Repeat the Action on STs

"> ul > li > ul > li > ul > li", treeView().element).each(

function (Index) {

var item = $("> ul > li > ul > li > ul > li", treeView().element)[Index];

var nodesubObj = ParseNodes(item.innerHTML);

//Only those STs that are under selected profession node.

if ((nodesubObj.DisciplineId == nodeObj.DisciplineId) && (nodesubObj.ProfessionId == nodeObj.ProfessionId))

treeView().nodeCheck(item, e.checked);

}

)

workOnParent(nodeObj, e.checked);

}

else if (nodeObj.Type == 'S') {

workOnParent(nodeObj, e.checked);

}

// function onLoad(e) {

// var nodeItem = e.item.innerHTML;

// var nodeValue = $('.t-checkbox > .t-input:hidden', nodeItem)[0].attributes('value').value;

// if (nodeValue == null)

// {

// $('#selectall').hide();

// }

// else {

// $('#selectall').show();

// }

script>

This is very Urgent as it is prod issue.
Kindly help me.

Thanks & regards,
Shilpa.

answered on 19 Aug 2011, 02:26 PM

Hi telerik team,

We have observed a strange behaviour in telerik .treeview.js file.
In Old version of Telerik there is a line of code and it is missing in new version of telerik 2011.2.712.hence we are facing an issue.
Thsi is happening in the node check function. We would like to know why this has been done.

Telerik .treeview.js old version

Telerik.treeview.js new version

nodeCheck: function (e, d) {

c(e, this.element).each(c.proxy(function (h, i) {

var f = c(i).closest(".t-item"),

g = c("> div > .t-checkbox", f),

j = this.element.id + "_checkedNodes",

h = g.find(':input[name="' + j + '.Index"]').val();

g.find(':input[name="' + j + "[" + h + '].Text"]').remove();

g.find(':input[name="' + j + "[" + h + '].Value"]').remove();

g.find(":checkbox").attr({

checked: d ? "checked" : "",

value: d

});

if (d) {

c(b.treeview.getNodeInputsHtml(this.getItemValue(f), this.getItemText(f), j, h)).appendTo(g)

}

}, this))

nodeCheck: function (e, d) {

c(e, this.element).each(c.proxy(function (j, k) {

var h = c(k).closest(".t-item"),

i = c("> div > .t-checkbox", h),

g = this.element.id + "_checkedNodes",

j = i.find(':input[name="' + g + '.Index"]').val(),

f = i.find(":checkbox");

i.find(':input[name="' + g + "[" + j + '].Text"]').remove();

i.find(':input[name="' + g + "[" + j + '].Value"]').remove();

f.attr("value", d);

if (d) {

f.attr("checked", "checked");

c(b.treeview.getNodeInputsHtml(this.getItemValue(h), this.getItemText(h), g, j)).appendTo(i)

}

            else {
                   f.attr("checked", "");
           }

}, this))

answered on 22 Aug 2011, 12:52 PM

telerik-treeview-js.zip

Hi Arava,

Please try the attached treeview script. It should resolve the issue.

Kind regards,
Alex Gyoshev
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>