How to create Ribbon in Kendo UI

Question

I have to put all controls like add edit export etc outside of Grid how to create a Ribbon menu for that?

Sachin Singh · Answer

You can use Kendo Toolbar for such puposes , i have used once in a project like below, just download the appropriate icon @(Html.Kendo().ToolBar() .Name( "ToolBar" ) .Items(items => { //items.Add().Type(CommandType.Button).Click("homebtn").Id("btn_Home").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/if_go-home.png")).Text("Home").HtmlAttributes(new { @title = "Home", style = "text-decoration:none;", @class = "btn btn-link " }); //items.Add().Type(CommandType.Separator); items.Add().Type(CommandType.Button).Id( "btn_new" ).ImageUrl(Url.Content( "~/MainMastercss/dist/img/icon/if_db_add.png" )).Text( "New" ).HtmlAttributes( new { @title = "Add" , style = "text-decoration:none" , @ class = "btn btn-link " }); //.Text("Add") items.Add().Type(CommandType.Separator).Id( "sep_new" ); //items.Add().Type(CommandType.Button).Id("btn_create").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/if_floppy.png")).Text("Save & Close").HtmlAttributes(new { @title = "Save", style = "text-decoration:none", @class = "btn btn-link" });//.Click("createbtn") //items.Add().Type(CommandType.Separator).Id("sep_Create"); items.Add().Type(CommandType.Button).Id( "btn_Edit" ).ImageUrl(Url.Content( "~/MainMastercss/dist/img/icon/if_edit.png" )).Text( "Edit" ).HtmlAttributes( new { @title = "Edit" , style = "text-decoration:none" , @ class = "btn btn-link" }); //.Click("createbtn") items.Add().Type(CommandType.Separator); items.Add().Type(CommandType.Button).Id( "btn_Delete" ).ImageUrl(Url.Content( "~/MainMastercss/dist/img/icon/if_Delete.png" )).Text( "Delete" ).HtmlAttributes( new { @title = "Delete" , style = "text-decoration:none" , @ class = "btn btn-link " }); //.Text("Add") items.Add().Type(CommandType.Separator).Id( "sep_delete" ); items.Add().Type(CommandType.Button).Id( "btn_View" ).ImageUrl(Url.Content( "~/MainMastercss/dist/img/icon/if_eye.png" )).Text( "View" ).HtmlAttributes( new { @title = "View" , style = "text-decoration:none" , @ class = "btn btn-link " }); //.Text("View") items.Add().Type(CommandType.Separator); //items.Add().Type(CommandType.Button).Click("backbtn").Id("btn_backword").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/Back.png")).HtmlAttributes(new { @title = "Backward" });//.Text("Add") // items.Add().Type(CommandType.Button).Click("forwardbtn").Id("btn_forword").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/Forward.png")).HtmlAttributes(new { @title = "Forward" }); //items.Add().Type(CommandType.Separator); //items.Add().Type(CommandType.Separator); //items.Add().Type(CommandType.Button).Click("clearbtn").Id("btn_clear").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/clear.png")).Text("Clear").HtmlAttributes(new { @title = "Clear" }); // items.Add().Type(CommandType.Button).Click("refreshbtn").Id("btn_Refresh").ImageUrl(Url.Content("~/img/Refress1.jpg")).HtmlAttributes(new { @title = "Refresh" });//.Text("Add") //items.Add().Type(CommandType.Separator); //items.Add().Type(CommandType.Button).Id("btn_upload").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/if_General_Office.png")).Text("Upload").HtmlAttributes(new { @title = "Upload", style = "text-decoration:none", @class = "btn btn-link" });//.Text("Add") //items.Add().Type(CommandType.Separator); //items.Add().Template(" ").Overflow(ShowInOverflowPopup.Never); //items.Add().Type(CommandType.Separator); //items.Add().Type(CommandType.Button).Id("btn_Export").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/Export.png")).Text("Export").HtmlAttributes(new { @title = "Export" }); //items.Add().Type(CommandType.Button).Id("btn_Exportexcel").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/ExportExcel.png")).HtmlAttributes(new { @title = "Export Excel" }); // items.Add().Type(); //items.Add().Type(CommandType.Separator).Id("sep_upload"); //items.Add().Type(CommandType.Button).Id("btn_approvelead").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/checked-user.png")).Text("Approve Lead").HtmlAttributes(new { @title = "Approve Lead", style = "text-decoration:none", @class = "btn btn-link" }); //items.Add().Type(CommandType.Separator).Id("sep_approvelead"); //items.Add().Type(CommandType.Button).Id("btn_appointment").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/iCalendar.png")).Text("Appointment").HtmlAttributes(new { @title = "Appointment", style = "text-decoration:none", @class = "btn btn-link" }); //items.Add().Type(CommandType.Separator).Id("sep_appointment"); //items.Add().Type(CommandType.Button).Id("btn_email").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/if_mail.png")).Text("Email").HtmlAttributes(new { @title = "Email", style = "text-decoration:none", @class = "btn btn-link" }); //items.Add().Type(CommandType.Separator).Id("sep_email"); //items.Add().Type(CommandType.Button).Id("btn_phone").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/if_phone.png")).Text("Phone Call").HtmlAttributes(new { @title = "Phone Call", style = "text-decoration:none", @class = "btn btn-link" }); //items.Add().Type(CommandType.Separator).Id("sep_phone"); // items.Add().Type(CommandType.Button).Id("btn_print").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/printer.png")).HtmlAttributes(new { @title = "Print" }); //items.Add().Type(CommandType.Button).Id("btn_help").ImageUrl(Url.Content("~/MainMastercss/dist/img/icon/help.png")).Text("Help").HtmlAttributes(new { @title = "Help", style = "text-decoration:none", @class = "btn btn-link" }); //items.Add().Type(CommandType.Separator).Id("sep_help"); }) )

How to create Ribbon in Kendo UI

Answers (1)