How to create Ribbon in Kendo UI

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");
})
)

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh6y ago
Accepted 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");

    })
)
+1