Rank 1
in my view , there are 2 grids(one at the bottom and other at the top).In botton grid toolbar insert command should be visible or enable according to the rows in the top grid.
that means if there are no rows in the top grid, i want to diable or make visible false for the bottom grid toolbar insert command.
after adding one row only the insert command sow be visible or enable.
Can you please suggest how it will be possilbe using javascript when the view loads.
3 Answers, 1 is accepted
In order to hide the insert button you may use first grid's DataBound event to check the total number of records. Similar to the following:
function firstGrid_dataBound(e) { var button = $("#SecondGrid .t-grid-toolbar .t-grid-add"); if ($(this).data("tGrid").total) { button.show(); } else { button.hide(); } }Note that this will work only if ajax binding is used.
Regards,
Rosen
the Telerik team
Rank 1
Thanks for the Help.It has been worked for me.
Other requirement is
In the Top grid , i will first have no rows and also in the bottom grid , there will be no rows.
I will first add new record in the top grid(that means it will call the ajax insert method).and it will generate an new id .
i want to populate the bottom grid will that new id after sucefully insertion or i want to use that top grid inserted id when i am inserting an record in the bottom grid as foreign key.
when i am inserting into an new record in top grid , i am keeping the new id in the viewbag.id
and i am passing it as an paramter to the ajax insert method.but it is showing me as 0 after updating the viewbag.id =1 after inserting in the top grid.
please check the code
top grid
@(Html.Telerik().Grid(Model)
.Name(
"Grid")
.DataKeys(keys =>
{
keys.Add(p => p.CourseId);
})
.ToolBar(commands => commands.Insert().ButtonType(
GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select(
"_SelectCourse", "Main")
.Insert(
"_InsertCourse", "Main")
.Update(
"_UpdateCourse", "Main");
})
.Columns(columns =>
{
//if (Context.User.IsInRole("Admin"))
columns.Bound(p => p.CourseName).Width(520).Title(
"Course Name");
columns.Bound(p => p.CategoryName).Width(120).Title(
"Category");
columns.Bound(p => p.CourseTypeName).Width(100).Title(
"Type");
columns.Bound(p => p.CourseStatusName).Width(50).Title(
"Status");
columns.Bound(p => p.AutoEnroll).Width(50).Title(
"AutoEnroll")
.ClientTemplate(
"<input type='checkbox' disabled='disabled' name='AutoEnroll' <#= AutoEnroll? checked='checked' : '' #> />");
columns.Command(commands =>
{
commands.Edit().ButtonType(
GridButtonType.ImageAndText).HtmlAttributes(new { style = "min-width: 53px" });
}).Width(90).Title(
"Command");
})
.Editable(editing => editing.Mode(
GridEditMode.InForm))
.ClientEvents(e => e.OnEdit(
"onEdit").OnDataBinding("firstGrid_dataBound").OnDataBound("firstGrid_dataBound"))
.Pageable(paging =>
{
paging.Enabled(
false);
paging.PageSize(1);
})
.Sortable(sorting => sorting.Enabled(
false))
.Selectable(select => select.Enabled(
false))
.Filterable(filter => filter.Enabled(
false))
.Footer(
false)
)
Bottom grid
@(Html.Telerik().Grid((
IEnumerable<Microsoft.Ogma.Web.Models.MainModels.CourseModuleModel>)ViewData["CourseModule"])
.Name(
"CourseModule")
.DataKeys(keys =>
{
keys.Add(p => p.ModuleId);
})
//.ToolBar(tb => { if (ViewBag.CourseId > 0) tb.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }); })
.ToolBar(tb => tb.Insert().ButtonType(
GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))
.Columns(columns =>
{
columns.Bound(c => c.ModuleName).Width(130);
columns.Bound(c => c.IsActive).Width(50).Title(
"Status")
.ClientTemplate(
"<input type='checkbox' disabled='disabled' name='IsActive' <#= IsActive? checked='checked' : '' #> />");
columns.Command(commands =>
{
commands.Edit().ButtonType(
GridButtonType.ImageAndText).HtmlAttributes(new { style = "min-width: 30px" });
commands.Delete().ButtonType(
GridButtonType.ImageAndText).HtmlAttributes(new { style = "min-width: 30px" });
}).Width(90).Title(
"Commands");
})
.DataBinding(
dataBinding =>
{
dataBinding.Ajax()
.Select(
"_SelectModules", "Main", new { id = ViewBag.CourseId })
.Insert(
"_InsertCourseModule", "Main", new { courseId = ViewBag.CourseId })
.Update(
"_UpdateCourseModule", "Main", new { courseId = ViewBag.CourseId })
.Delete(
"_DeleteCourseModule", "Main", new { courseId = ViewBag.CourseId });
}
)
.Pageable(paging =>
{
paging.Enabled(
true);
paging.PageSize(10);
})
.Editable(editing => editing.Mode(
GridEditMode.PopUp)).HtmlAttributes(new { style = "min-width:300px" })
.Sortable()
.Selectable()
.ClientEvents(events => events.OnRowSelect(
"onRowSelected").OnRowDataBound("onRowDataBound"))
)Insert method in the bottom grid
[
AcceptVerbs(HttpVerbs.Post)]
[
GridAction]
public ActionResult _InsertCourseModule(CourseModuleModel insertCourseModule, int courseId)
{
if (courseId > 0)
{
if (ModelState.IsValid)
{
ModuleRepository moduleRepository = new ModuleRepository();
moduleRepository.CreateCourseModule(courseId, insertCourseModule.ModuleName, insertCourseModule.Description);
return View(new GridModel(GetCourseModules(courseId)));
}
}
return View();
}
in the bottom grid insert in am getting courseid as 0 but not the new inserted courseid which i am keep in ViewBag.courseid .
Please help me out.
As you may know when ajax binding is used, the View is not recreated nor processed but only the grid's data is reconstructed on the client using the returned JSON data. Therefore, passing values through the ViewData/ViewBag will not work. More information on ajax binding can be found here.
In order to pass additional values when ajax binding is used, the dataBinding event should be used, as shown in this online demo.
To set or modify values of the edited/inserted dataItem the onSave event can be used.
Rosen
the Telerik team