asp.net - Override JqGrid Edit/Delete button CSS class -


in jqgrid needed add edit , delete buttons when user click on buttons user redirected page delete , edit specific record. it's working fine i've got css issue buttons. how can override style of buttons.

here mvc view

 <title>jqgrid asp.net mvc - demo</title>     <!-- jquery ui theme used grid -->         <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />     <!-- css ui theme extension of jqgrid -->     <link rel="stylesheet" type="text/css" href="../../content/themes/ui.jqgrid.css" />         <!-- jquery library prerequisite jqgrid -->     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>     <!-- language pack - must included before jqgrid javascript -->     <script type="text/javascript" src="../../scripts/trirand/i18n/grid.locale-en.js"></script>     <!-- jqgrid javascript runtime -->     <script type="text/javascript" src="../../scripts/trirand/jquery.jqgrid.min.js"></script>        <link rel="stylesheet" type="text/css" href="../../content/mystyle.css" />      <script type="text/javascript">         var mygrid = $('#list');         $(function () {             $("#list").jqgrid({                 url: '/jqgridclients/dynamicgriddata/',                 datatype: 'json',                 mtype: 'get',                  colnames: ['clientid', 'address', 'company', 'name'],                 colmodel: [           { name: 'clientid', index: 'clientid', search: false,  align: 'left', formatter: pkid_formatter },           { name: 'address', index: 'address', search: true, sortable: true, align: 'left' },           { name: 'company', index: 'company', search: true, align: 'left', stype: 'select' },           { name: 'name', index: 'name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}}],                 pager: jquery('#pager'),                 rownum: 10,                  width: '100%',                 height: '100%',                 rowlist: [5, 10, 20, 50],                 sortname: 'clientid',                 sortorder: "desc",                 viewrecords: true,                 loadonce: true,                 caption: 'clients',              }).navgrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "search" });                $("#list").jqgrid('filtertoolbar', { stringresult: true, searchonenter: false, defaultsearch: 'cn' });                $("#list").setgridparam({data: results.rows, localreader: reader}).trigger('reloadgrid');         });         function pkid_formatter(cellvalue, options, rowobject) {     return '<a href="client/edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a> <a href="client/delete?id=' + cellvalue + '" class="ui-icon ui-icon-trash" ></a>'; }    </script>        <h2>index</h2>  <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="pager" class="scroll" style="text-align:center;"></div> 

enter image description here

you use ui-icon class <a> elements inside of pkid_formatter function. <a> elements have display: block css style. can fix problem in many ways. example can add style="display:inline-block" <a> elements.

you should consider use formatter: "actions" (see here example) instead of usage custom formatter.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -